Javascript與Ajax

1、XMLHttpRequest 對象 (XHR)

XMLHttpRequest 對象用於在後臺與服務器交換數據，有了這個對象，咱們能夠：

在不從新加載頁面的狀況下更新網頁；

在頁面已加載後從服務器請求數據；

在頁面已加載後從服務器接收數據；

在後臺向服務器發送數據。 

2、建立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. }  

 

3、發送請求

在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");  

 

4、註冊回調函數

1. xhr.onreadystatechange = function(){    

2.    // Do something...    

3. }    

 

 5、經常使用屬性

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"。

 

6、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);  

 

7、其餘方法

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)