onreadystatechange 屬性

JJJhr發表於2024-06-15

onreadystatechange 屬性是 XMLHttpRequest 物件的一個事件處理器，用於在 XMLHttpRequest 物件的 readyState 屬性發生變化時觸發。這個屬性通常用於非同步地獲取和處理伺服器的響應。以下是關於 onreadystatechange 屬性的詳細解釋：

定義與用途

  • 定義：onreadystatechange 是一個事件處理器，它指定了一個函式，該函式會在 XMLHttpRequest 物件的 readyState 屬性發生變化時被呼叫。
  • 用途：由於 AJAX 請求是非同步的，客戶端無法立即知道請求何時完成或結果何時可用。onreadystatechange 事件提供了一種機制，使得當請求的某個狀態發生變化時，可以執行相應的程式碼。

觸發時機

  • onreadystatechange 事件會在 readyState 屬性的值從 0 到 4 之間的任何一個值變化時觸發。這意味著該事件可能會被觸發多次，每次 readyState 的值發生變化時都會觸發。

readyState 的值

  • readyState 是一個整數，表示請求的不同狀態：
    1. UNSENT (0): 初始狀態，open() 方法還沒有被呼叫。
    2. OPENED (1): 已經呼叫 open() 方法，但還未呼叫 send() 方法。
    3. HEADERS_RECEIVED (2): 已經呼叫 send() 方法，並且已經接收到伺服器的響應頭。
    4. LOADING (3): 正在接收響應體（即伺服器返回的資料）。
    5. DONE (4): 請求已完成，無論成功還是失敗。

典型用法

通常，onreadystatechange 事件處理器會檢查 readyState 的值，並在其等於 4（即請求已完成）時，進一步檢查 status 屬性（表示 HTTP 響應狀態碼）來確定請求是否成功。如果 status 為 200（表示請求成功），則可以處理伺服器返回的資料。

var xhr = new XMLHttpRequest();  
xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4) { // 請求已完成  
    if (xhr.status === 200) { // 請求成功  
      console.log(xhr.responseText); // 處理伺服器返回的資料  
    } else {  
      // 處理錯誤情況  
    }  
  }  
};  
xhr.open('GET', 'some_url', true);  
xhr.send();

總結

onreadystatechange 屬性為開發者提供了一種機制，用於在 AJAX 請求的不同階段執行相應的程式碼。透過檢查 readyState 和 status 屬性的值，可以確定請求的狀態和結果，並據此採取相應的操作。

相關文章