最新的Web開發教程
 

AJAX - onreadystatechange事件


onreadystatechange事件

當被發送到服務器的請求,我們要執行基於所述響應的一些動作。

onreadystatechange事件被觸發每次readyState的變化。

readyState屬性持有了XMLHttpRequest的狀態。

XMLHttpRequest對象的三個重要的屬性:

屬性 描述
onreadystatechange 存儲函數(或函數的名稱)被自動調用每次readyState屬性變化
readyState 擁有了XMLHttpRequest的狀態。 從0到4的變化:
0:請求未初始化
1:服務器連接建立
2:接收到的請求
3:請求處理
4:請求完成和響應準備就緒
status 200:“OK”
404:找不到頁面

在onreadystatechange事件中,我們指定當服務器響應準備處理會發生什麼。

當readyState為4和狀態為200,則響應已準備就緒:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
試一試»

注:onreadystatechange事件被觸發5次(0-4),一時間對於每個readyState的改變。


用回調函數

回調函數是作為參數傳遞給另一個函數傳遞的函數。

如果您對您的網站多個AJAX任務,你應該創建一個標準功能,用於創建XMLHttpRequest對象,並稱之為每個AJAX任務。

函數調用應包含URL以及如何對onreadystatechange的(這是每次調用可能不同),這樣做:

function loadDoc(cFunc) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    cFunc(xhttp);
  }
試一試»