Ajax —— 一言不合就谈Ajax

Ajax —— 一言不合就谈Ajax

众所周知，Ajax是一种可以不刷新页面即可从服务器取得新数据。为什么它有这样的功能呢？原因是Ajax有一个核心技术叫做XMLHttpRequest,简称XHR，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。这里值得一提的是别看XMLHttpRequest包含XML，但是Ajax通信与数据格式无关。

首先呢，IE5是第一个引入XHR对象的浏览器，XHR对象是通过MSXML库中的一个ActiveX对象实现的（这个不用管它，知道就行），在IE中可能会遇到三种不同版本的XHR。

然后呢，其他浏览器，IE7+、Firefox、Opera、Chrome、Safari都是支持原生的XHR的。直接通过var xhr = new XMLHttpRequest(），便可得到XHR对象。

最终呢，我们写一个函数，可兼容各种浏览器，来创建XHR对象。

从上面的图中可以看到，（1）检测原生XHR对象是否存在，如果存在，就返回它的实例，（2）如果不存在，就检测ActiveX，（3）如果两种对象都不存在，就抛出一个错误。

下面直接通过var xhr = createXHR()在所有浏览器中创建XHR对象了。

好，第一步创建XHR对象就是这么简单，完成了。

我们知道，创建完XHR对象之后，就得向服务器发送请求了，一般比较常用的请求有两种get和post。

使用XHR对象时，要调用的第一个方法是open()；open函数并不会真正发送请求，只是启动一个请求以备发送。然后通过调用send(),发送到服务器。

 由于这次请求是同步的，则JavaScript会等到服务器响应之后，再继续执行，而响应的内容一般包括以下几种
    responseText: 作为响应主题被返回的文本
    responseXML: 一般为XML DOM文档
    status: 响应的HTTP请求
    statusText: HTTP状态的说明

所以，在发送完成后，为接收到响应，应进行状态检测

说完同步，再说说异步请求，因为呢，大多数还是发送异步请求的，才能让JavaScript继续执行而不必去等待响应。这时，就要用到XHR对象的readyState属性了。

只要readyState属性的值由一个值变成另一个值，都会触发一次onreadystatechange事件。当readyState值为4的时候，说明已经接收到全部的响应内容了，可以进行使用了。

到这里呢，Ajax的用法就介绍完了。小伙伴们，是不是很简单呢！