对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据,ajax中根据async的值不同分为**同步(async = false)和异步(async = true)**两种执行方式,那么,ajax的同步和异步请求两种方式有什么区别呢?本篇文章就来给大家详细分析一下ajax同步与异步执行的区别。
图解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="JS_Ajax" id="btn">
<hr>
<input>
<script>
var btn = document.getElementById("btn");
btn.onclick = function() {
//1.获取XMLHttpRequest 对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
//参数1 :method:请求的类型;GET 或 POST
//参数2 :url:文件在服务器上的位置
//参数3 :async:true(异步)或 false(同步)
//xmlhttp.open("POST","AjaxServlet",true);
xmlhttp.open("GET", "AjaxServlet?lname=zzf", true);
//3.发送请求
xmlhttp.send();
//4.接收服务器的数据 xmlhttp.responseText;
//onreadystatechange: 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
xmlhttp.onreadystatechange = function() {
//存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//readyState
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成,且响应已就绪
//status
//1XX - 5XX
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
}
</script>
</body>
</html>
首先我们来分别看一下ajax同步与异步请求是什么?
ajax异步请求:
异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
比如:
$.ajax({
type:"POST",
url:"Venue.aspx?act=init",
dataType:"html",
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
说明:上述代码中,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()。
ajax同步请求:
同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,也就是说,当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个ajax执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function)。
比如:
$.ajax({
type:"POST",
url:"Venue.aspx?act=init",
dataType:"html",
async: false, success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
说明:上述代码中,当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。
看完了对于ajax同步与异步请求的意思后,我们就来看看ajax同步请求与异步请求的区别。
ajax同步请求与异步请求的区别:
异步模式下:
当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。
同步模式下:
当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,知道接触阻塞余下的代码才会继续执行。