Ajax

XMLHttpRequest对象

IE7+、Firefox、Opera、Chrome、Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象直接使用XMLHttpRequest构造函数。eg:

var  xhr = new XMLHttpRequest();

如果还需要支持IE的早期版本，那么需要编写函数对其进行兼容：

<span style="white-space:pre">		</span>if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
			xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
		} 
		else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
			xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
		}

在使用XMR对象是，第一个要调用的方法是open()，它接收三个参数：要发送的请求类型("get"、"post"等)、请求的url和表示是否异步发送请求的布尔值(true表示异步)。

eg: xhr.open("get"、"example.php"、false);

这行代码会启动一个针对example.php的get请求，但是调用该方法并未真正发送请求，而是启动了一个请求以备发送。要发送特定的请求，还必须调用send()方法:

send(null);//因为是get请求，所以参数为null，不能省略。

由于这次请求是同步的(send的第三个参数是false)，Javascript代码会等到服务器响应之后再继续执行，在收到响应之后，响应的数据会自动填充XMR对

象的属性，相关属性简介如下：

1、responseText：作为响应主体被返回的文本。

2、responseXML：如果响应的内容类型是"text/xml"或者"application/xml"，这个属性中将保存包含响应数据的XML DOM文档。

3、status：响应的HTTP状态

4、statusText：HTTP的状态说明

如果使用的是异步请求，这样可以使js代码往下执行而不必等待。此时，可以检测readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性

可以取值如下：

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接到响应

3：接收。已经接收到部分相应数据

4：完成。已经接受到全部数据，可以在客户端使用了

只用readyState属性的值由一个转变为另外一个值，都会触发readyStatechange事件。通常我们只对readyState为4时感兴趣。

 <span style="white-space:pre">	</span>xhr.onreadystatechange = function(event){ 
            if (xhr.readyState == 4){
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    alert(xhr.responseText);
                } else {
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        };
        xhr.open("get", "example.txt", false);
        xhr.send(null);

另外在接收响应之前，还可以调用abort()方法来取消异步强求。eg：

xhr.abort();

调用该方法后，XHR对象会停止触发时间，而且也不在允许访问任何与响应有关的对象属性。

参考自《JavaScript高级程序设计》