AJAX onreadystatechange事件

onreadystatechange 事件

當發送一個請求后，客戶端需要確定這個請求什么時候會完成，因此，XMLHttpRequest對象提供了onreadystatechange事件機制來捕獲請求的狀態，繼而實現響應。

當請求被發送到服務器時，我們需要執行一些基于響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

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

屬性	描述
onreadystatechange	存儲函數(或函數名)，每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 • 0: 請求未初始化 • 1: 服務器連接已建立 • 2: 請求已接收 • 3: 請求處理中 • 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

readyState狀態說明

0：請求未初始化

此階段確認XMLHttpRequest對象是否創建，并為調用open()方法進行未初始化作好準備，值為0表示對象已經存在，否則瀏覽器會報錯：對象不存在。

1：服務器連接已建立

此階段對XMLHttpRequest對象進行初始化，即調用open()方法，根據參數（method,url,true）完成對象狀態的設置。并調用send()方法開始向服務端發送請求。

值為1表示正在向服務端發送請求。

2：請求已接收

此階段接收服務器端的響應數據。但獲得的還只是服務端響應的原始數據，并不能直接在客戶端使用。

值為2表示已經接收完全部響應數據，并為下一階段對數據解析作好準備。

3：請求處理中

此階段解析接收到的服務器端響應數據即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody，responseText或responseXML的屬性存取的格式，為在客戶端調用作好準備。

狀態3表示正在解析數據。

4：請求已完成，且響應已就緒

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

概而括之，整個XMLHttpRequest對象的生命周期應該包含如下階段：

• 創建

• 初始化請求

• 發送請求

• 接收數據

• 解析數據

• 完成

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

當 readyState 等于 4 且狀態為 200 時，表示響應已就緒：

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

注釋：onreadystatechange 事件被觸發 5 次(0 - 4)，對應著 readyState 的每個變化。

提示：XHR.readyState狀態的變化如下：

• 0：請求未初始化，還沒有調用 open()。

• 1：請求已經建立，但是還沒有發送，還沒有調用 send()。

 • 2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。

 • 3：請求在處理中；通常響應中已有部分數據可用了，沒有全部完成。 

• 4：響應已完成；您可以獲取并使用服務器的響應了。

使用回調函數

callback 函數是一種以參數形式傳遞給另一個函數的函數。

如果您的網站上存在多個 AJAX 任務，那么您應該為創建 XMLHttpRequest 對象編寫一個標準的函數，并為每個 AJAX 任務調用該函數。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務(每次調用可能不盡相同)：

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