使用Ajax异步调用

一、Ajax介绍

Ajax指异步Javascript和XML，Ajax带来用户体验的改变，页面进行局部的异步刷新；
AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象；
传统web交互模型，浏览器直接将请求发送给服务器，服务器响应直接发给浏览器；而Ajax交互模型，浏览器首先将请求发送Ajax引擎（以XMLHttpRequest为核心），Ajax引擎再将请求发送给服务器，服务器响应先发给Ajax引擎，再由引擎传给浏览器显示。

二、Ajax的使用

创建XMLHttpRequest对象；
将状态触发器绑定到一个函数；
使用open方法建立与服务器的连接；
向服务器发送数据；
在回调函数中对返回数据进行处理。

//get方式发送数据，参数已经在url上
xmlHttpReq.open("GET", "url?key=value");
//post方式发送数据，需要设置编码格式
xmlHttpReq.open("POST", "url");
xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttpReq.send("name=xxx&pwd=xxx");
//回调函数编写
if(xmlHttpReq.readyState == 4) {if(xmlHttpReq.status == 200) {//响应有效}
}

三、Ajax案例

通过离开焦点发送Ajax请求验证用户名是否存在；

var xmlHttpReq = createXMLHttpRequest();
xmlHttpReq.onreadystatechange = function() { //状态回调函数//readyState属性说明请求是否发送成功//0-请求未初始化（在调用open方法之前） //1-请求已提出（调用send方法之前） //2-请求已发送（可以从响应中得到内容头部）//3-请求处理中（响应中部分数据可用，服务器还没有完成响应）//4-请求已完成（可以访问服务器响应）if(xmlHttpReq.readyState == 4) { //status服务器响应状态//200-服务器响应成功 404-资源错误 500-服务器内部错误if(xmlHttpReq.status == 200) { //响应成功}}
};
xmlHttpReq.open("GET", "checkUser?username=" + username);
xmlHttpReq.send(null);

四、jQuery的Ajax

jQuery库提供了方便的Ajax实现

//方式1
load(url, [data], [callback])
//方式2
jQuery.get(url, [data], [callback])
jQuery.post(url, [data], [callback])
//方式3
jQuery.ajax(options)
//方式4
jQuery.getJSON(url, [data], [callback])

简单示例

$(function(){$("#mybutton").bind("click", function(){$("#mydiv").load("URL地址");});
});

使用Ajax异步调用相关推荐

Ajax异步调用Web服务的例子
我这里是看的Dflying Chen的使用ASP.NET AJAX异步调用Web Service和页面中的类方法的一系列文章写出来的例子. 请Dflying Chen别介意.例子中没有最后一篇文章的的 ...
jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...
ajax一步调用,ajax异步调用
ajax异步调用内容精选换一换当前示例是单模型情况下推理Engine的实现代码.在多模型情况下,如果需要参考该示例,您需要注意以下几点:声明preOutBuffer变量时,不能带有static关 ...
[转] 为什么javascript是单线程的却能让AJAX异步调用？
为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() {console.log( 'first' );se ...
使用ASP.NET AJAX异步调用Web Service和页面中的类方法（2）：处理异步调用中的异常...
本文来自<ASP.NET AJAX程序设计第II卷:客户端Microsoft AJAX Library相关>的第三章<异步调用Web Service和页面中的类方法>,请同时 ...
图片懒加载、ajax异步调用数据、lazyload插件的使用
关于这个效果还是很简单的,样式部分我就不多说了,我就简单的写了一下布局, 这是css样式我们先说一下实现的原理. 我们都知道在于图片的引入,我们都是用src来引入图片地址.从而实现图片的显示.那我们 ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
异步调用WebService
这里用Winform演示如何异步调用WebService. 首先在界面中拖入2个按纽,一个是同步,一个是异步,作为比较.新建立一个WebService,就用默认的HelloWorld方法来演示. 在W ...
java微信公众号短信验证码_解决微信端公众号网页获取短信验证码ajax重复调用两次的问题...
问题背景介绍: 微信公众号网页开发的时候,点击发送短信验证码,如果响应时间超长,目前测试是10秒左右(这个10秒左右,是我自己多次测试总结出来的规律) 超过10秒左右,就会自动请求第二遍,这个问题挺恶 ...

使用Ajax异步调用

使用Ajax异步调用

一、Ajax介绍

二、Ajax的使用

三、Ajax案例

四、jQuery的Ajax

使用Ajax异步调用相关推荐

最新文章

热门文章