掌握 XMLHttpRequest：JavaScript 中 AJAX 呼叫指南

用於 AJAX 呼叫的 XMLHttpRequest

XMLHttpRequest (XHR) 物件是 JavaScript 的核心功能，它允許您從伺服器非同步發送和接收數據，而無需刷新網頁。它構成了 AJAX（非同步 JavaScript 和 XML）的基礎，支援動態和互動式 Web 應用程式。

---

1.什麼是 XMLHttpRequest？

XMLHttpRequest 是 JavaScript 中的 API，可促進透過 HTTP 要求與伺服器進行通訊。它支援：

• 無需重新載入頁面即可檢索資料。
• 處理各種格式，如 JSON、XML、HTML 和文字。
• 同步和非同步操作（儘管在大多數用例中不建議使用同步模式）。

---

2.建立 XMLHttpRequest 物件

要使用 XHR，請建立 XMLHttpRequest 物件的實例：

const xhr = new XMLHttpRequest();

---

3.進行 XHR 呼叫的步驟

1. 建立 XHR 物件：

   const xhr = new XMLHttpRequest();

1. 初始化請求： 使用 open() 方法定義 HTTP 方法、URL 以及呼叫是否非同步。

   xhr.open("GET", "https://api.example.com/data", true);

1. 設定回應回呼： 使用 onreadystatechange 事件或 load 事件。

   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("Response:", xhr.responseText);
       } else {
           console.error("Error:", xhr.status, xhr.statusText);
       }
   };

1. 發送請求：

   xhr.send();

---

4.完整範例：GET 請求

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Data retrieved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Failed to fetch data. Status:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("Request failed due to a network error.");
};

xhr.send();

---

5.使用 POST 請求發送資料

XHR 允許使用 POST 向伺服器傳送資料。

範例：

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("Data saved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Error:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);

---

6. XHR 的屬性與方法

關鍵屬性：

• readyState：代表請求的狀態（0到4）。

  • 0：未發送
  • 1：打開
  • 2：標頭_已接收
  • 3：載入中
  • 4：完成

• status：HTTP 狀態代碼（例如，200 表示成功，404 表示未找到）。

• responseText：回應正文作為文字字串。

• responseXML：XML 資料形式的回應正文（如果適用）。

關鍵方法：

• open(method, url, async)：初始化請求。
• send(data)：將請求傳送到伺服器。
• setRequestHeader(header, value)：設定自訂標頭。
• abort()：取消請求。

---

7.處理回應狀態

您可以使用 onreadystatechange 事件來監控 XHR 請求的進度。

範例：

const xhr = new XMLHttpRequest();

---

8.使用 XHR 的優點

• 非同步通訊：避免阻塞主執行緒。
• 跨瀏覽器支援：適用於現代和舊版瀏覽器。
• 靈活的資料格式： 支援 JSON、XML、HTML 和純文字。

---

9. XHR 的限制

• 詳細語法： 與 fetch 等現代 API 相比，需要更多程式碼。
• 回調地獄：複雜的請求可能會導致深度嵌套的回調。
• 有限的現代功能：缺乏 Promises 或 async/await 等功能。

---

10。現代替代方案：取得 API

雖然 XHR 仍然受到廣泛支持，但 Fetch API 提供了一種現代的、基於承諾的方法來發出 HTTP 請求。

取得範例：

   const xhr = new XMLHttpRequest();

---

11。結論

XMLHttpRequest 是一種可靠且得到良好支援的 AJAX 呼叫工具，但現代 API（如 fetch 或函式庫（如 Axios））通常因其簡單性和增強功能而受到青睞。然而，理解 XHR 對於維護遺留程式碼和更深入了解非同步通訊在 JavaScript 中的工作原理至關重要。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 XMLHttpRequest：JavaScript 中 AJAX 呼叫指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！