ajax同步请求和异步请求详解

- ajax异步请求

由于网络访问一般存在延时，我们一般设计http请求为异步请求。http对象发送请求时，将方法open()的第三个参数设置成true，代码如下：

var xhr = null;
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else {
	xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.open("get","xxx.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			var result = xhr.responseText;
			//执行渲染前端页面或刷新前端页面数据
		}
	}
}

• 异步的底层原理
  js中的异步的实现是单线程加实践队列，js的代码执行是单线程的。顾名思义单线程的含义是js的diam从而往下顺序依次执行，一定是上一行代码执行完毕再执行下一行代码。事件队列可以理解为一个容器，在这个容器中存储一些回调函数。这些回调函数只有在js代码全部执行完成后，才会去调用。由于js是单线程，一次只能做一件事情。js在空闲的情况下会去事件队列中查看回调函数或方法有没有达到触发条件，若触发，则执行相关回调函数或方法。
  上述代码中，首先创建http对象，设置http请求为异步请求，然后执行发送请求，请求浏览器进行网络数据请求，此时js代码单线程顺序执行，将回调函数存储在事件队列，此时由于网络传输需要时间，当网络请求数据返回时会更改xhr中readyState的值。等js代码运行结束后，js在空闲的情况下再去事件队列中调用回调函数，当readyState的值发生变化时，onreadystatechange触发时，执行回调函数中的代码体。

- ajax同步请求

http对象发送请求时，将方法open()的第三个参数设置成false，代码如下：

xhr.open("get","xxx.php",false);

• 原理
  当参数设置成false时，http请求为同步请求。可在代码中增加console.log()打印readyState值，对readyState进行分析。代码如下：

//准备发送http请求
xhr.open("get","xxx.php",false);
console.log("-------xhr.readyState1:-------"+xhr.readyState);
//执行发送http请求
xhr.send(null);
console.log("-------xhr.readyState2:-------"+xhr.readyState);

• 对于readyState值得变化从0变到4，具体如下：
• 0表示xhr对象创建完成
• 1表示已经发送了请求
• 2表示浏览器已经接收到了服务器响应的数据
• 3表示正在解析数据
• 4表示数据已经解析完成，可以使用
• 上述代码中xhr.readyState2值已经为4。此时，当xhr.open(null)执行完毕后，xhr.readyState值已经为4。此时xhr.onreadyStatechange不会再变化，即不会再与异步模式一样执行回调函数。
• 因此，当http请求为同步模式时，xhr.open(null)代码执行完毕之后直接对xhr.readyState及xhr.status值进行判断，之后渲染前端页面。

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得