掌握 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中文网其他相关文章！