前言:
Jquery中ajax方法中async用于控制同步和异步,当async值为true时是异步请求,当async值为fase时是同步请求。ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据。
概念解释:
一.什么是同步请求:(false)
同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function2)。
二.什么是异步请求:(true)
异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。
一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
两者区别:
异步:在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。
同步:在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,知道接触阻塞余下的代码才会继续执行。
代码:
一:同步事件
//跨浏览器添加事件
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else {
obj.attchEvent("on" + type, fn);
}
};
//同步方式
addEvent(document, "click", function () {
var xhr = new XMLHttpRequest();//创建xhr
xhr.open('get', 'test.xml? rand=' + Math.random, false); //准备发送请求,以get方式请求,url是test.xml,同步
xhr.send(null); //发送请求,get不需要数据提交,则填写为null
//alert(xhr.responseText); //打印出服务器端打印回来的数据
// alert(xhr.status); //获取当前数据的是否成功,成功返回的是200
//alert(xhr.statusText);//获取成功或失败后返回的文本,成功返回OK
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('获取数据错误!错误代码:' + xhr.status + '错误信息:' + xhr.statusText);
}
});
二 :异步事件
//使用异步方式
addEvent(document, "click", function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { //只有当页面完成及接受全部的相应后,才真正的使用。分为了xhr.readystate==1,启动;2,发送,3,接受,4,完成。
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('获取数据错误!错误信息:' + xhr.status + '错误信息:' + xhr.statusText);
}
};
}
xhr.open('get', 'test.xml? rand=' + Math.random, true);
xhr.abort(); //取消异步的函数。
xhr.send(null);
})