新手指南：什麼是 XMLHttpRequest？

更新日期： 2025 年 3 月 9 日

在學習 JavaScript 和網頁開發時，常常會接觸到一個名為 XMLHttpRequest 的物件。

這個物件是早期網頁進行資料交換的關鍵工具，它使得網頁能夠在不重新加載的情況下，和伺服器進行互動，從而大大提升了用戶的體驗。

本文將介紹什麼是 XMLHttpRequest 以及如何使用它進行資料請求。

什麼是 XMLHttpRequest？

XMLHttpRequest（縮寫為 XHR）是一個 JavaScript 物件，用於在瀏覽器和伺服器之間進行資料交換。

這個物件的發明，讓我們能夠動態地從伺服器獲取資料，並更新頁面的部分內容，而不需要重新加載整個頁面。

這樣的技術便是 AJAX（Asynchronous JavaScript and XML）的一部分。

雖然 XMLHttpRequest 的名字中有 “XML”，但實際上它不僅僅用於 XML，它同樣可以傳輸其他格式的資料，例如 JSON、HTML，甚至是純文字。

XMLHttpRequest 的用途

XMLHttpRequest 最主要的用途，就是發送 HTTP 請求並接收伺服器的回應，從而使得網頁應用程序能夠更加互動和響應迅速。

典型的使用場景包括：

• 當用戶在輸入框中輸入時，動態獲取搜索建議。
• 提交表單資料，而無需重新加載整個頁面。
• 動態更新網頁的某些部分，例如顯示新聞列表或商品資訊。

如何使用 XMLHttpRequest？

使用 XMLHttpRequest 進行 HTTP 請求的基本步驟如下：

1. 創建 XMLHttpRequest 物件。
2. 初始化請求（指定請求方法和 URL）。
3. 發送請求。
4. 監聽伺服器的回應，並根據回應進行處理。

以下是一個使用 XMLHttpRequest 獲取伺服器資料的簡單範例：

// 1. 創建 XMLHttpRequest 對象
const xhr = new XMLHttpRequest();

// 2. 初始化請求，設置請求方法為 GET，URL 為示範 API 的端點
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

// 3. 設置回應處理
xhr.addEventListener("load", function() {
  if (xhr.status === 200) {
    // 解析回應資料並顯示在控制台中
    const data = JSON.parse(xhr.responseText);
    console.log("標題: ", data.title);
  } else {
    console.error("請求失敗，狀態碼: ", xhr.status);
  }
});

// 4. 發送請求
xhr.send();

代碼解釋

• 創建 XMLHttpRequest 物件：const xhr = new XMLHttpRequest();。
• 初始化請求：xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); 這一行指定了我們想要執行一個 GET 請求，並且設定 URL 和請求的異步模式（true 表示異步）。
• 設置回應處理：當伺服器回應時，使用 xhr.addEventListener("load", ...) 來監聽回應，我們可以在這裡處理回應的資料。如果請求成功（狀態碼為 200），則將回應解析為 JavaScript 物件。
• 發送請求：xhr.send(); 用來實際發送請求。

常見的 XMLHttpRequest 方法和屬性

• open(method, url, async)：初始化請求的方法。
  
  method 可以是 “GET”、”POST” 等，url 是要請求的伺服器地址，async 用於指定是否異步（通常為 true）。
• send(data)：發送請求。如果是 POST 請求，可以在 send() 方法中傳遞要發送的資料。
• load：當請求成功完成後觸發的事件，用於處理伺服器返回的資料。
• status：表示伺服器回應的 HTTP 狀態碼，例如 200 表示成功，404 表示未找到。
• responseText：伺服器返回的資料，以文字形式表示。

XMLHttpRequest 的缺點與替代方案

雖然 XMLHttpRequest 是一個非常強大的工具，但它在現代開發中逐漸被替代，原因包括：

1. 代碼可讀性較差：使用 XMLHttpRequest 進行異步請求時，代碼中往往充滿回調函數，可能會導致代碼難以閱讀和維護。
2. Promise 和 Fetch API：現代 JavaScript 引入了 Promise 和 Fetch API，使得異步請求的代碼更加簡潔和易於閱讀。

以下是一個使用 Fetch API 的簡單範例，與上面的 XMLHttpRequest 相比，代碼更加簡潔：

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("標題: ", data.title))
  .catch(error => console.error("發生錯誤: ", error));

可以看到，使用 fetch，我們可以用更少的代碼來完成同樣的操作，並且代碼的結構更加清晰。

小結

XMLHttpRequest 是早期網頁應用和伺服器之間進行資料交換的重要工具，它讓網頁可以在不重新加載的情況下更新部分內容，大大提升了用戶體驗。

然而，由於代碼可讀性問題和更現代化的替代方案（如 Fetch API）的出現，XMLHttpRequest 在現代開發中的使用越來越少。

但了解它的工作原理，對於理解 Web 的發展和 JavaScript 的基礎，是非常有幫助的。

希望這篇文章能幫助你理解 XMLHttpRequest 的基本概念和用法。