AJAX XHR-readyState

2022-04-15 14:50 更新

AJAX - onreadystatechange 事件


 當(dāng)發(fā)送一個請求后,客戶端需要確定這個請求什么時候會完成,因此,XMLHttpRequest對象提供了onreadystatechange事件機制來捕獲請求的狀態(tài),繼而實現(xiàn)響應(yīng)。

 當(dāng)請求被發(fā)送到服務(wù)器時,我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

 每當(dāng)readyState改變時,就會觸發(fā)onreadystatechange事件。

 readyState屬性存有 XMLHttpRequest 的狀態(tài)信息。

 下面是 XMLHttpRequest 對象的三個重要的屬性:

屬性 描述
onreadystatechange 存儲函數(shù)(或函數(shù)名),每當(dāng)readyState屬性改變時,就會調(diào)用該函數(shù)。
readyState

存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

  • 0: 請求未初始化

  • 1: 服務(wù)器連接已建立

  • 2: 請求已接收

  • 3: 請求處理中

  • 4: 請求已完成,且響應(yīng)已就緒

status 200: "OK"
404: 未找到頁面

readyState狀態(tài)說明

 0:請求未初始化

 此階段確認XMLHttpRequest對象是否創(chuàng)建,并為調(diào)用open()方法進行未初始化作好準(zhǔn)備,值為0表示對象已經(jīng)存在,否則瀏覽器會報錯:對象不存在。

 1:服務(wù)器連接已建立

 此階段對XMLHttpRequest對象進行初始化,即調(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,responseTextresponseXML的屬性存取的格式,為在客戶端調(diào)用作好準(zhǔn)備。

 狀態(tài)3表示正在解析數(shù)據(jù)。

 4:請求已完成,且響應(yīng)已就緒

 此階段確認全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式,解析已經(jīng)完成。值為4表示數(shù)據(jù)解析完畢,可以通過的XMLHttpRequest對象的屬性取得數(shù)據(jù)。


 概而括之,整個XMLHttpRequest對象的生命周期應(yīng)該包含如下階段:

  1. 創(chuàng)建
  2. 初始化請求
  3. 發(fā)送請求
  4. 接收數(shù)據(jù)
  5. 解析數(shù)據(jù)
  6. 完成


 在onreadystatechange事件中,我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時所執(zhí)行的任務(wù)。

 當(dāng)readyState等于 4 且狀態(tài)為 200 時,表示響應(yīng)已就緒:

實例

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

嘗試一下 ?

 注意:onreadystatechange事件被觸發(fā) 5 次(0 - 4),對應(yīng)著readyState的每個變化。

 提示: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ù)形式傳遞給另一個函數(shù)的函數(shù)。

 如果您的網(wǎng)站上存在多個 AJAX 任務(wù),那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對象編寫一個標(biāo)準(zhǔn)的函數(shù),并為每個 AJAX 任務(wù)調(diào)用該函數(shù)。

 該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生onreadystatechange事件時執(zhí)行的任務(wù)(每次調(diào)用可能不盡相同):

實例

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

嘗試一下 ?

 在接下來的一個章節(jié)中,你將學(xué)習(xí)到與AJAX ASP/PHP相關(guān)的知識!


相關(guān)文章


 HTTP狀態(tài)碼


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號