一、XMLHttpRequest 对象 (XHR)

XMLHttpRequest 对象用于在后台与服务器交换数据，有了这个对象，我们可以：

在不重新加载页面的情况下更新网页；

在页面已加载后从服务器请求数据；

在页面已加载后从服务器接收数据；

在后台向服务器发送数据。 

二、创建XHR

Js代码

//创建XMLHttpRequest对象    

1. function createXMLHttpRequest(){  

2.     var xmlHttpRequest;  

3.     if(window.XMLHttpRequest){  

4.         //IE8+, FF, Chrome等浏览器内置XHR对象，可以直接创建  

5.         xmlHttpRequest = new XMLHttpRequest();     

6.     }else if(window.ActiveXObject){  

7.         //IE7和之前版本需要通过ActiveXObject创建XHR  

8.         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");    

9.     }else{  

10.         //其他不支持XHR的浏览器  

11.     }  

12.     return xmlHttpRequest;  

13. }  

 

三、发送请求

在Javascrpt中使用XHR的以下方法发送请求：

Js代码 /** 

1.  * 初始化XHR请求 

2.  * @param method   请求的类型（get/post) 

3.  * @param url      请求的url 

4.  * @param isAsync  是否使用异步请求 

5.  * @param username 对于要求认证的服务器，可以提供用户名 

6.  * @param password 对于要求认证的服务器，可以提供密码 

7.  */  

8. open(method, url[, isAsync=true[, username=null[, password=null]]]);  

9.   

10. /** 

11.  * 发送请求 

12.  * @param data 作为请求体的数据 

13.  */  

14. send([data=null]);    

 例：

1. var xhr = createXMLHttpRequest();  

2.   

3. //使用同步方式发送GET请求  

4. xhr.open("get", "http://sample.org/test", false);    

5. xhr.send(null);  

6.   

7. //使用异步方式发送POST请求并模拟表单提交  

8. xhr.open("post", "http://sample.org/test", true);    

9. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  

10. xhr.send("var1=val1&var2=val2");  

 

四、注册回调函数

1. xhr.onreadystatechange = function(){    

2.    // Do something...    

3. }    

 

 五、常用属性

1. readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义 

状态	名称	描述
0	UNSENT	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	OPENED	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	HEADERS_RECEIVED	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	LOADING	所有响应头部都已经接收到。响应体开始接收但未完成。
4	DONE	HTTP 响应已经完全接收。

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 readystatechange 事件。

 

2. responseText

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

 

3. responseXML

如果响应的内容是"text/xml"或者"application/xml"，这个属性将保存包含响应数据的XML DOM文档（Document对象）。

 

4. status

响应的http状态码。

 

5. statusText

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。

 

六、Ajax示例

Js代码 

1.   var xhr = createXMLHttpRequest();  

2. xhr.onreadystatechange = function(){  

3.     if (xhr.readyState==4) {  

4.         if (xhr.status==200) {  

5.             //do something  

6.         }  

7.     }  

8. }  

9.   

10. xhr.open("get", "http://sample.org/test", true);    

11. xhr.send(null);  

 

七、其他方法

Js代码 /** 

1.  * 取消请求并关闭连接，XHR对象重置为readyState为0的状态。 

2.  */  

3. abort()  

4.   

5. /** 

6.  * 向一个打开但未发送的请求设置或添加一个HTTP请求头信息。 

7.  * @param headerName 需要设置或添加的头信息的名字（大小写不敏感） 

8.  * @param value      设置或添加的头信息的值 

9.  */  

10. setRequestHeader(headerName, value)  

11.   

12.   

13. /** 

14.  * 取得一个包含所有响应的header信息的长字符串，如果 readyState 小于 3，这个方法返回 null。 

15.  */  

16. getAllResponseHeaders()  

17.   

18. /** 

19.  * 取得指定的HTTP响应头信息的值。 

20.  * @param headerName 需要从响应中获得的头信息的名字（大小写不敏感） 

21.  */  

22. getResponseHeader(headerName)