我眼中浏览器的助手——AJAX

所谓AJAX就是:”Asynchronous JavaScript and XML”，中文意思：异步JavaScript和XML。AJAX并不单单指一门技术，可以简单的理解成Javascript+XMLHttpRequest+Css+服务器端 的集合。

ajax是浏览器端的一项技术，在用户不知情的情况下悄悄的把用户在浏览器端发给服务器的请求发送出去，并悄悄的把数据内容带回给浏览器，通过浏览器解析这些数据最后呈现给用户看。而且使用ajax技术在实现分页显示数据的功能时可以实现请刷新的效果，减少浏览器向服务器的交互次数，减轻服务器的压力，并且在浏览器端减少用户的等待时间，几乎实现肉眼以为是在本地取数据那么流畅的效果。（关于用ajax实现分页的功能下次再介绍）

AJAX技术的核心是XMLHttpRequest。

今天抛开一些官方的解释，小谈一下我眼中理解的AJAX。

之前当我们通过浏览器端向服务器提交某种请求的时候，浏览器会亲自跑去向服务器提交，在服务器尚未返回响应请求的过程中我们（用户）一直都都在等着，什么操作也做不了，直到浏览器拿到从服务器返回的数据后才能解析给我们看，假设：服务器当时比较繁忙，不顾的处理浏览器提交过去的请求，那么我们就得一直在浏览器端等待，这样的网页相信你下次一定不会再想打开。

相反，有了AJAX后，AJAX相当于浏览器的一个助手，当客户在浏览器端向服务器端提交某种请求的时候，浏览器会把向服务器端提交请求并返回数据这项任务分派给ajax去做，而在 ajax返回从服务器端带回的数据前浏览器可以继续跟用户交互，这样就节省了用户的时间，不至于使用户一直干等着某一项请求的完成。（跟前面介绍过的多线程相比，ajax就相当于一个新的线程，当浏览器把这个新的线程派出去后，还可以跟客户交互）

那么ajax这个小助手是如何为浏览器办事的呢？下面用一个派助手去买啤酒的例子来解释一下：

1.首先要叫一个助手过来（创建一个XMLHttprequest对象）

XMLHttpRequest xhr=new XMLHttpRequest();

2.告诉助手用什么方式去、去哪里买啤酒，并让助手带上钱（调用XMLHttpRequest对象的open()方法，并设置它的参数）

xhr.open("get","url",true);

open()方法有三个参数，第一个参数：使用get方式提交还是用post方式提交；第二个参数：提交到的页面url路径；第三个参数：是否使用异步的方式执行（true和false）。

3.出发前告诉助手买回来的啤酒应该放哪（设置onreadystatechange事件并触发一个回调函数，并根据readyState属性值的不同来判断ajax是否顺利从浏览器带回了数据）

xhr.onreadystatechange=function (){

if(xhr.readyState==4){

varresult=xhr.responseText;

alert(xhr.);

}

}

4.告诉助手可以出发了（send()方法）

xhr.send(null);

关于send()方法里面的参数，当上面的open()方法的第一个参数是get的时候send()方法里面的参数应该是null，因为即便是要传递某些数据给请求的页面也是在url路径后面写数据，而不用在send()里面传参;比如要传一个name=admin的值给url则：

xhr.open("get","url?neme=admin",true);

xhr.send(null);

而当我们在 open()方法中设置成post方式时，则所要传递的数据就应该在send()方法中写了,还是上面的例子：

xhr.open("post","url",true);

xhr.send(name=admin);

这样就把一个最简单的委派助手（ajax）买啤酒的任务实现了。

注：在使用ajax实现异步的过程中还有好多的情况发生，比如XMLHttpRequest对象的Status属性要是返回服务器端的状态不是200（200表示服务器已经找到浏览器请求的页面并返回给浏览器相应的内容）的时候应该如何处理，readyState属性共有5个值（从0到4）分表表示正处在什么情况下，要是想传递多个数据给服务器端应该怎么传，等……

上面的这些情况还需要根据我们的需求来做相应的判断。