所谓的异步刷新,就是不刷新整个网页进行更新数据。

  只有通过js才能实现Ajax,进而实行异步刷新

  表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面);ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面)。

  

【例子】==验证用户名是否重复==

  

  使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面。

  

  

界面

一、使用Linq连接数据库

二、把jquery文件导入到项目中。代码写在<head>中

  

<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>

三、在刷新的页面写如下代码。代码写在<head>中

  

<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>  <%--调用jquery--%>

    <script>
$(document).ready(//当页面准备好加载完成的时候触发
function getval() {
$("#TextBox1").blur(function () {//当鼠标点击或离开时触发
var txt = $(this).val();//获取文本框的值 //使用ajax发送出来文本框的值 $.ajax( {
url: "De.aspx",
type: "POST",
data: {id:txt}, //接收数据库返回的信息
datatype: "xml",
success: function (data) {//data中的数据就是De页面中count的数据
var co = $(data).text();
if (parseInt(co) == 0) {
var lbl = document.getElementById("Label1");//利用js输出
lbl.innerHTML = "√";
} else {
var lbl = document.getElementById("Label1");
lbl.innerHTML = "此用户名已注册";
} }
});
});
});
</script>

四、在传值的页面中的Page_Load中写如下代码

  

 protected void Page_Load(object sender, EventArgs e)
{
//查询传过来的数据
DataClassesDataContext dc = new DataClassesDataContext();
string uid = Request["id"].ToString();
int count = dc.STOpro.Where(r => r.Stoid == int.Parse(uid)).Count();
//以xml形式返回
Response.Write("<?xml varsion='1.0'?>");
Response.Write("<count>" + count + "</count>");
Response.End();//关掉Response }

完成!

如何手写Ajax实现异步刷新的更多相关文章

  1. 怎么手写Ajax实现异步刷新

    所谓的异步刷新,就是不刷新整个网页进行更新数据. 只有通过js才能实现Ajax,进而实行异步刷新 表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面( ...

  2. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  3. 前端面试题整理——手写AJAX

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  5. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  6. 手写Ajax的意义所在,从青铜到钻石!

    话说菩提祖师打了孙猴子三板子  然后悟空学会72般变化以及一身神通 对待这个问题作为面试者要思考更加深层次的意义 才更能获得认可 实际上写的ajax 很能看出一个的水平 贴几段代码就可以看出水平的高低 ...

  7. 纯手写AJAX

    function ajax(){ //http相应对象 var xmlhttp; //判断浏览器 if(window.XMLHttpRequest){ xmlhttp = new XMLHttpReq ...

  8. 常见的JS手写函数汇总(代码注释、持续更新)

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

  9. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

随机推荐

  1. 7.docker日志收集

    默认情况下,docker logs或者docker service logs显示命令的输出,就像在终端中以交互方式运行命令时一样.UNIX和Linux命令通常开在运行时间上三个I / O流,所谓的 S ...

  2. google vimium插件的一些简单命令

    j: 向下滑动 k: 向上滑动 d: 向下一页 u: 向上一页 x: 关闭页面 r: 刷新页面 gg: 回到顶部 yy: 复制网址 t: 打开新标签 f: 显示页内指令 yt: 复制当前网址并打开 o ...

  3. elastalert

    http://blog.51cto.com/kexiaoke/1977481 什么是? ElastAlert是一个简单的框架,用于从弹性搜索中的数据中提取异常,尖峰或其他感兴趣的模式.在Yelp,我们 ...

  4. (二分查找 拓展) leetcode278. First Bad Version

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  5. Entity Framework入门教程(2)---EF工作流程

    EF工作流程 1.EF基本CRUD流程 下边的图就可以很清晰地展示EF的CRUD操作的基本工作流程: 这里做一个EF CRUD操作的简单总结:1.定义模型:这是EF工作的前提,定义模型包括定义领域类( ...

  6. JN_0002:Win10禁止U盘拷贝文件的方法

    1,在电脑桌面使用快捷键win键+r唤出运行窗口,在搜索框中输入gpedit.msc,然后点击确定. 2,打开的本地组策略编辑器中依次点击展开计算机配置—管理模块—系统,在系统下找到并选中可移动存储访 ...

  7. 第九节:JWT简介和以JS+WebApi为例基于JWT的安全校验

    一. 简介 1. 背景 传统的基于Session的校验存在诸多问题,比如:Session过期.服务器开销过大.不能分布式部署.不适合前后端分离的项目. 传统的基于Token的校验需要存储Key-Val ...

  8. [数分提高]2014-2015-2第6教学周第1次课讲义 3.3 Taylor 公式

    1. (Taylor 公式). 设 $f^{(n)}$ 在 $[a,b]$ 上连续, $f^{(n+1)}$ 在 $(a,b)$ 内存在, 试证: $ \forall\ x,x_0\in [a,b], ...

  9. [物理学与PDEs]第3章第5节 一维磁流体力学方程组 5.1 一维磁流体力学方程组

    1.  当磁流体力学方程组中的量只依赖于 $t$ 及一个空间变量时, 该方程组称为一维的. 2.  一维磁流体力学方程组 $$\beex \bea \cfrac{\p H_2}{\p t}& ...

  10. C++中数组作为形参进行传递(转)

    有两种传递方法,一种是function(int a[]); 另一种是function(int *a) 这两种两种方法在函数中对数组参数的修改都会影响到实参本身的值! 对于第一种,根据之前所学,形参是实 ...