AJAX - 處理響應

AJAX 是一種用於非同步傳送和接收資料到/從 Web 伺服器的技術，而無需重新載入或重新整理整個頁面。當 AJAX 應用程式從網頁向伺服器發出非同步請求時，伺服器會響應請求並返回請求的資料，因此接收和處理伺服器響應的過程被稱為處理響應。或者我們可以說，處理響應是一個處理從伺服器返回的資料、對其執行適當的操作並相應地更新網頁的過程。

處理響應涵蓋以下幾點：

接收響應 - 一旦 AJAX 將請求傳送到伺服器，客戶端 JS 程式碼就會等待伺服器響應。當伺服器響應請求時，響應將返回到客戶端。

處理響應 - 從伺服器獲取響應後，客戶端 JS 會以預期格式處理資料，因為伺服器返回的資料有多種格式，例如 JSON、XML 等，並且還會從響應中提取相關資訊。

更新 Web 應用程式/網頁 - 處理響應後，AJAX 回撥函式會根據響應動態更新網頁或 Web 應用程式。這包括修改 HTML 內容、顯示錯誤訊息、更新值等。

處理錯誤 - 如果請求遇到錯誤，則由於任何請求失敗、網路問題等原因，伺服器可能會以錯誤狀態進行響應。因此，處理響應過程非常有效地處理錯誤並針對錯誤採取適當的措施。

如何處理響應

按照以下步驟使用 XMLHttpRequest 處理響應：

步驟 1 - 使用 XMLHttpRequest() 建構函式建立 XMLHttpRequest 物件。使用此物件，您可以輕鬆地執行 HTTP 請求並非同步處理其響應。

var qhttp = new XMLHttpRequest();

步驟 2 - 為 readystatechange 事件定義事件處理程式。每當 XHR 物件的 readyState 屬性值發生變化時，此事件就會觸發。

qhttp.onreadystatechange = function() {
   if (qhttp.readyState == 4){
      if(qhttp.status == 200){
         // Display the response
      }else{
         // Handle the error if occure
      }
    }
  };

步驟 3 - 使用 HTTP 方法（如 GET、POST 等）和我們要請求的 URL 開啟請求。

qhttp.open("HTTP Method","your-URL", true);

步驟 4 - 根據需要設定任何頭部資訊。

qhttp.setRequestHeader('Authorization', 'Your-Token');

步驟 5 - 將請求傳送到伺服器。

qhttp.send()

示例

在以下程式中，我們將處理伺服器對給定請求返回的響應。為此，我們將建立一個名為 handleResponse() 的 Javascript 函式，該函式處理伺服器返回的響應並相應地顯示結果。此函式首先建立一個 XMLHttpRequest 物件，然後定義一個“onreadystatechange”事件處理程式來處理請求狀態。當請求狀態發生變化時，函式會檢查請求是否完成（readyState = 4）。如果請求已完成，則函式會檢查狀態碼 = 200。如果狀態碼為 200，則顯示響應。否則，顯示錯誤訊息。

<!DOCTYPE html>
<html>
<body>
<script>
   function handleResponse() {
   // Creating XMLHttpRequest object
   var qhttp = new XMLHttpRequest();
   // Creating call back function
   qhttp.onreadystatechange = function() {
      if (qhttp.readyState == 4){
         if(qhttp.status == 200){
            // Display the response
            console.log(qhttp.responseText)
         }else{
            console.log("Found Error: ", qhttp.status)
         }
      }
   };
   // Open the given file
   qhttp.open("GET", "https://jsonplaceholder.typicode.com/todos", true);
   // Sending request to the server 
   qhttp.send()
}
</script>
<h2>Display Data</h2>
<button type="button" onclick="handleResponse()">Submit</button>
<div id="sample"></div>
</body>
</html>

輸出

結論

因此，這就是 AJAX 如何處理伺服器返回的響應，從而使網頁能夠在後臺非同步與伺服器通訊，而無需重新整理整個頁面。在下一篇文章中，我們將學習如何在 AJAX 中處理二進位制資料。

列印頁面