建站
咨詢
售后
建站咨詢
新聞中心
ajax - onreadystatechange 事件
當(dāng)發(fā)送一個(gè)請求后，客戶端需要確定這個(gè)請求什么時(shí)候會完成，因此，XMLHttpRequest對象提供了onreadystatechange事件機(jī)制來捕獲請求的狀態(tài)，繼而實(shí)現(xiàn)響應(yīng)。
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、個(gè)舊網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為個(gè)舊等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
當(dāng)請求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng)readyState改變時(shí)，就會觸發(fā)onreadystatechange事件。
readyState屬性存有 XMLHttpRequest 的狀態(tài)信息。
下面是 XMLHttpRequest 對象的三個(gè)重要的屬性：
| 屬性 | 描述 |
|---|---|
onreadystatechange | 存儲函數(shù)（或函數(shù)名），每當(dāng)readyState屬性改變時(shí)，就會調(diào)用該函數(shù)。 |
readyState | |
status | 200: "OK" 404: 未找到頁面 |
readyState狀態(tài)說明
0：請求未初始化
此階段確認(rèn)XMLHttpRequest對象是否創(chuàng)建，并為調(diào)用open()方法進(jìn)行未初始化作好準(zhǔn)備，值為0表示對象已經(jīng)存在，否則瀏覽器會報(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)該包含如下階段：
- 創(chuàng)建
- 初始化請求
- 發(fā)送請求
- 接收數(shù)據(jù)
- 解析數(shù)據(jù)
- 完成
在onreadystatechange事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng)readyState等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒：
實(shí)例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
嘗試一下 ?
注意：onreadystatechange事件被觸發(fā) 5 次（0 - 4），對應(yīng)著readyState的每個(gè)變化。
提示：XHR.readyState狀態(tài)的變化如下：
- 0：請求未初始化，還沒有調(diào)用
open()。 - 1：請求已經(jīng)建立，但是還沒有發(fā)送，還沒有調(diào)用
send()。 - 2：請求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
- 3：請求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，沒有全部完成。
- 4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。
使用回調(diào)函數(shù)
回調(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)用可能不盡相同）：
實(shí)例
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
嘗試一下 ?
在接下來的一個(gè)章節(jié)中，你將學(xué)習(xí)到與AJAX ASP/PHP相關(guān)的知識！
相關(guān)文章
HTTP狀態(tài)碼
名稱欄目：創(chuàng)新互聯(lián)AJAX教程:AJAX XHR-readyState
標(biāo)題網(wǎng)址：http://m.fisionsoft.com.cn/article/ccophcs.html
