Ajax原生XHR對象

前端學了有一段時間了，在項目中我一般使用的都是jQuery封裝好的Ajax函數($.ajax、$.get、$.post)，使用很是的簡單方便，但爲了更清楚的瞭解Ajax，須要學習原生xhr對象。

 

先來明確什麼是Ajax，Ajax：「Asynchronous JavaScript and XML」，翻譯過來就是異步JavaScript和XML。

Ajax是一種用於建立快速動態網頁的技術，經過在後臺與服務器進行少許數據交換，AJAX可使網頁實現異步更新。意味這能夠再不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

 

建立Ajax：

 

要建立Ajax，主角是XMLHttpRequest（下簡稱XHR）對象。

第一步：建立XHR對象

var xhr = new XMLHttpRequest();

 

 

第二步：向服務器發送請求

方法：open(method,url,async) 和 send(string)

open()方法傳入三參數

• method：請求的類型（GET/POST）
• url：文件在服務器上的位置
• async：布爾值，true表示異步，false表示同步（可選，默認爲true）

send()方法將請求發送到服務器，有一個可選的參數string，僅用於POST類型的請求。

 

這裏主要討論一下async參數，XMLHttpRequest對象若是要用於AJAX的話，其open()方法的async參數必須設置爲true。那若是參數設置爲false會有什麼樣的後果呢？同步請求的後果是：JavaScript會等到服務器響應就緒才繼續執行。若是是比較大型的請求或者服務器處於繁忙狀態，應用程序會掛起或中止。簡單點說就是頁面會一直卡到響應內容回來才繼續運行。

 

在發送GET請求的時候，可能獲得緩存的信息（IE中），致使咱們發送的異步請求不能正確的返回咱們想要的最新的數據。

 

方法一：在url中添加一個惟一的ID：（隨機數）

1 xhr.open("GET","demo.asp?t=" + Math.random(),true);
2 xhr.send();

這種方式能夠避免拿到緩存中的舊消息，但它的每次請求仍然會被瀏覽器緩存起來，佔用瀏覽器資源。

 

方法二：用setRequestHeader(header，value)方法向請求添加HTTP頭。（關於setRequestHeader在後面討論）

1 xhr.open("GET","demo.asp",true);
2 xhr.setRequestHeader("If-Modified-Since","0");  //設置瀏覽器不使用緩存
3 xhr.send();

GET中的url能夠拼接字符串從而達到傳參，而傳送數據通常用POST。

若是咱們用POST方法向服務器發送數據，應該這樣設置http頭。

1 xhr.open("POST","postdemo.asp",true);
2 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  //不然數據沒法被正常接收
3 xhr.send("name=amie");  //send裏寫要發送的數據

 

第三步：服務器響應

XMLHttpRequest對象的responseText和responseXML屬性分別得到字符串形式的響應數據和XML形式的響應數據

能夠在控制檯裏輸出響應

console.log(xhr.responseText);

還有三個關於響應狀態的屬性也常常用到：

• readyState：存有XMLHttpRequest的狀態。XHR對象會經歷5種不一樣的狀態
• 0：請求未初始化（new完後）；
• 1：服務器鏈接已創建（對象已建立並初始化，還沒有調用send方法）；
• 2：請求已接收；
• 3：請求處理中；
• 4：請求已完成，響應就緒；
• status：（HTTP狀態碼不少，請自行了解，舉例常見的）
• 200：請求成功
• 404：未找到頁面
• onreadystatechange：存儲函數（或函數名），每當readyState屬性改變時，就會調用該函數。

所以上面那行代碼能夠改成：

1 xhr.onreadystatechange = function () {
2     if (xhr.readyState == 4 && xhr.status == 200) {
3     console.log(xhr.responseText);
4 };

 

關於setRequestHeader

在HTTP協議裏，客戶端向服務器請求某個網頁的時候，須要發送一個HTTP協議的頭文件，而XMLHttp就是經過HTTP協議去的網站上的文件數據的，因此也要發送HTTP頭給服務器。

發送請求時會默認發一個頭文件，若是咱們須要修改或添加參數，就須要用到setRequestHeader方法。

Ps:

1.響應頭包含了許多信息，有興趣的小夥伴能夠去了解一下。（HTTP涉及了許多計算機網絡的知識）。

2.查看http請求頭能夠到開發者工具裏的Network裏查看。

 

(寫在結尾：前端新人一枚~歡迎你們指出錯誤，謝謝閱覽~)

 

【轉發自http://www.cnblogs.com/YiminLiu/p/6078987.html】