創(chuàng )建Ajax：
要創(chuàng )建Ajax，主角是XMLHttpRequest（下簡(jiǎn)稱(chēng)XHR）對象。
第一步：創(chuàng )建XHR對象
var xhr = new XMLHttpRequest();
第二步：向服務(wù)器發(fā)送請求
方法：open(method,url,async) 和 send(string)
open()方法傳入三參數
- method：請求的類(lèi)型（GET/POST）
- url：文件在服務(wù)器上的位置
- async：布爾值，true表示異步，false表示同步（可選，默認為true）
send()方法將請求發(fā)送到服務(wù)器，有一個(gè)可選的參數string，僅用于POST類(lèi)型的請求。
這里主要討論一下async參數，XMLHttpRequest對象如果要用于A(yíng)JAX的話(huà)，其open()方法的async參數必須設置為true。那如果參數設置為false會(huì )有什么樣的后果呢？同步請求的后果是：JavaScript會(huì )等到服務(wù)器響應就緒才繼續執行。如果是比較大型的請求或者服務(wù)器處于繁忙狀態(tài)，應用程序會(huì )掛起或停止。簡(jiǎn)單點(diǎn)說(shuō)就是頁(yè)面會(huì )一直卡到響應內容回來(lái)才繼續運行。
在發(fā)送GET請求的時(shí)候，可能得到緩存的信息（IE中），導致我們發(fā)送的異步請求不能正確的返回我們想要的最新的數據。
方法一：在url中添加一個(gè)唯一的ID：（隨機數）
1 xhr.open("GET","demo.asp?t=" + Math.random(),true);2 xhr.send();這種方式可以避免拿到緩存中的舊消息，但它的每次請求仍然會(huì )被瀏覽器緩存起來(lái)，占用瀏覽器資源。
方法二：用setRequestHeader(header，value)方法向請求添加HTTP頭。（關(guān)于setRequestHeader在后面討論）
1 xhr.open("GET","demo.asp",true);2 xhr.setRequestHeader("If-Modified-Since","0"); //設置瀏覽器不使用緩存3 xhr.send();GET中的url可以拼接字符串從而達到傳參，而傳送數據一般用POST。
如果我們用POST方法向服務(wù)器發(fā)送數據，應該這樣設置http頭。
1 xhr.open("POST","postdemo.asp",true);2 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //否則數據無(wú)法被正常接收3 xhr.send("name=amie"); //send里寫(xiě)要發(fā)送的數據第三步：服務(wù)器響應
XMLHttpRequest對象的responseText和responseXML屬性分別獲得字符串形式的響應數據和XML形式的響應數據
可以在控制臺里輸出響應
console.log(xhr.responseText);
還有三個(gè)關(guān)于響應狀態(tài)的屬性也經(jīng)常用到：
- readyState：存有XMLHttpRequest的狀態(tài)。XHR對象會(huì )經(jīng)歷5種不同的狀態(tài)
- 0：請求未初始化（new完后）；
- 1：服務(wù)器連接已建立（對象已創(chuàng )建并初始化，尚未調用send方法）；
- 2：請求已接收；
- 3：請求處理中；
- 4：請求已完成，響應就緒；
- status：（HTTP狀態(tài)碼很多，請自行了解，舉例常見(jiàn)的）
- onreadystatechange：存儲函數（或函數名），每當readyState屬性改變時(shí)，就會(huì )調用該函數。
因此上面那行代碼可以改為：
1 xhr.onreadystatechange = function () {2 if (xhr.readyState == 4 && xhr.status == 200) {3 console.log(xhr.responseText);4 };
關(guān)于setRequestHeader
在HTTP協(xié)議里，客戶(hù)端向服務(wù)器請求某個(gè)網(wǎng)頁(yè)的時(shí)候，需要發(fā)送一個(gè)HTTP協(xié)議的頭文件，而XMLHttp就是通過(guò)HTTP協(xié)議去的網(wǎng)站上的文件數據的，所以也要發(fā)送HTTP頭給服務(wù)器。
發(fā)送請求時(shí)會(huì )默認發(fā)一個(gè)頭文件，如果我們需要修改或添加參數，就需要用到setRequestHeader方法。
Ps:
1.響應頭包含了許多信息，有興趣的小伙伴可以去了解一下。（HTTP涉及了許多計算機網(wǎng)絡(luò )的知識）。
2.查看http請求頭可以到開(kāi)發(fā)者工具里的Network里查看。
(寫(xiě)在結尾：前端新人一枚~歡迎大家指出錯誤，謝謝閱覽~)
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
