當(dāng)發(fā)送一個(gè)請求后,客戶端需要確定這個(gè)請求什么時(shí)候會(huì)完成,因此,XMLHttpRequest對象提供了onreadystatechange
事件機(jī)制來捕獲請求的狀態(tài),繼而實(shí)現(xiàn)響應(yīng)。
當(dāng)請求被發(fā)送到服務(wù)器時(shí),我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng)readyState
改變時(shí),就會(huì)觸發(fā)onreadystatechange
事件。
readyState
屬性存有 XMLHttpRequest 的狀態(tài)信息。
下面是 XMLHttpRequest 對象的三個(gè)重要的屬性:
屬性 | 描述 |
---|---|
onreadystatechange
|
存儲(chǔ)函數(shù)(或函數(shù)名),每當(dāng)readyState 屬性改變時(shí),就會(huì)調(diào)用該函數(shù)。 |
readyState
|
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
|
status
|
200: "OK"
404: 未找到頁面 |
0:請求未初始化
此階段確認(rèn)XMLHttpRequest對象是否創(chuàng)建,并為調(diào)用open()
方法進(jìn)行未初始化作好準(zhǔn)備,值為0表示對象已經(jīng)存在,否則瀏覽器會(huì)報(bào)錯(cuò):對象不存在。
1:服務(wù)器連接已建立
此階段對XMLHttpRequest對象進(jìn)行初始化,即調(diào)用open()
方法,根據(jù)參數(shù)(method,url,true)
完成對象狀態(tài)的設(shè)置。并調(diào)用send()
方法開始向服務(wù)端發(fā)送請求。
值為1表示正在向服務(wù)端發(fā)送請求。
2:請求已接收
此階段接收服務(wù)器端的響應(yīng)數(shù)據(jù)。但獲得的還只是服務(wù)端響應(yīng)的原始數(shù)據(jù),并不能直接在客戶端使用。
值為2表示已經(jīng)接收完全部響應(yīng)數(shù)據(jù),并為下一階段對數(shù)據(jù)解析作好準(zhǔn)備。
3:請求處理中
此階段解析接收到的服務(wù)器端響應(yīng)數(shù)據(jù)即根據(jù)服務(wù)器端響應(yīng)頭部返回的MIME類型把數(shù)據(jù)轉(zhuǎn)換成能通過responseBody
,responseText
或responseXML
的屬性存取的格式,為在客戶端調(diào)用作好準(zhǔn)備。
狀態(tài)3表示正在解析數(shù)據(jù)。
4:請求已完成,且響應(yīng)已就緒
此階段確認(rèn)全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式,解析已經(jīng)完成。值為4表示數(shù)據(jù)解析完畢,可以通過的XMLHttpRequest對象的屬性取得數(shù)據(jù)。
概而括之,整個(gè)XMLHttpRequest對象的生命周期應(yīng)該包含如下階段:
在onreadystatechange
事件中,我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng)readyState
等于 4 且狀態(tài)為 200 時(shí),表示響應(yīng)已就緒:
注意:onreadystatechange
事件被觸發(fā) 5 次(0 - 4),對應(yīng)著readyState
的每個(gè)變化。
提示:XHR.readyState狀態(tài)的變化如下:
open()
。
send()
。
回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個(gè)函數(shù)的函數(shù)。
如果您的網(wǎng)站上存在多個(gè) AJAX 任務(wù),那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對象編寫一個(gè)標(biāo)準(zhǔn)的函數(shù),并為每個(gè) AJAX 任務(wù)調(diào)用該函數(shù)。
該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生onreadystatechange
事件時(shí)執(zhí)行的任務(wù)(每次調(diào)用可能不盡相同):
在接下來的一個(gè)章節(jié)中,你將學(xué)習(xí)到與AJAX ASP/PHP相關(guān)的知識(shí)!
更多建議: