AJAX的概述（2015年10月26号）

我们知道发起http的请求方式分为两种一种为：同步请求（浏览器地址栏输入URL、页面的跳转、表单的提交），都是通过同步请求。但是同步请求的http和响应经常会让客户端出现“一片惨白”的状况，另外在表单的提交的时候如果客户所填写的资料出现错误，而服务器端和数据库不能及时的返回，我们在提交表单后就不会成功，那么需要客户重新填写表单。所以为了提高客户的浏览和体验。我们需要另外一种http请求和响应方式：异步请求（异步请求是由AJAX发起的请求），是Google 2002年在GoogleSuggest应用提出的。AJAX涉及到的技术：HTML、CSS、JS、DOM、XML、JSON等，属于前端范畴，是纯客户端技术。AJAX实现的效果：①客户端和服务器异步运行、②客户端页面的局部刷新、③动态页面的静态化。但是并不是表示在一个网页当中异步请求越多就越好，异步请求过多，网页的处理效率就越慢。

这里注意区分AJAX实现的异步请求，与H5里面用WebWorker实现的同步的区别，WebWorker其实是普通的js文件，完全是在浏览器中实现的同步效果，并没有与后台有任何的关系。在没有使用worker之前，js中的程序完全是按照顺序，从上到下顺序执行。而使用Worker允许在上一步代码没有执行完毕就执行下一段代码，总体来说在js中使用Worker的技术特点有：

⑴如果存在多个需求的话，每一个worker文件完成一个需求，多个Worker文件之间没有任何的关系。因为不是上下顺序关系，他们互相不影响。

⑵在HTML页面当中所体现出来的只有n个Worker对象，并没有具体的逻辑代码。

⑶创建多个Worker对象，应该存在一个Worker文件当中，这些Worker文件应该允许被同时执行。

在AJAX中异步刷新通过XHR对象向服务器发送请求，并接收服务器返回的响应消息。

使用AJAX的步骤分为4步：

①首先创建XHR对象：

varxhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

②绑定onreadystatechange事件监听函数：注意readyState中S为大写（我在这里错了几遍）

xhr.onreadystatechange= function(){

if(xhr.readyState===4){
if(xhr.status===200)
}else{
alert('失败的响应消息');
}

}

③创建请求消息，建立到服务器之间的连接：

xhr.open('GET/POST','xx.php', true);

④ 发送请求消息：

xhr.send(null/data );

虽然绑定事件监听函数放在第二步，但是由于IE浏览器，在顺序执行这四个方法的时候，会有两次运行到readystate=1的状况，所以说，在实际的开发过程中，我们往往把事件的监听函数放在最后。