XMLHttpRequest

XMLHttpRequest 对象是一个允许在后台发送 HTTP 请求和接收响应的 JavaScript API。它是实现 Ajax（Asynchronous JavaScript and XML）的关键组成部分。通过 XMLHttpRequest 对象，可以在不刷新整个页面的情况下，与服务器进行异步数据交互。

AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行数据交换的技术。它使用 JavaScript 和 XMLHttpRequest 对象发送异步请求并接收服务器返回的数据，而无需刷新整个页面。

要使用原生 JavaScript 和 XMLHttpRequest 对象发送 AJAX 请求，可以按照以下步骤进行操作：

// 1. 创建一个新的 XMLHttpRequest 对象：
var xhr = new XMLHttpRequest();
// 2. 设置请求的方法、URL 和是否使用异步模式（通常为 true）：
xhr.open("GET", "http://example.com/api", true);
// 3.设置请求完成后的回调函数：
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 处理服务器返回的响应数据
  }
};
// 4. 设置请求头和发送请求：
xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头
xhr.send(); // 发送请求，如果有请求体可以在 send() 方法中传入
// 5. 在回调函数中处理服务器返回的响应数据：
var responseData = JSON.parse(xhr.responseText); // 将服务器返回的 JSON 数据解析为 JavaScript 对象
// 6. 处理 responseData

需要注意的是，以上是基本的 AJAX 请求示例，具体的代码可能会根据实际需求和后端 API 的要求有所差异。在实际开发中，你可能还需要处理错误状态码、处理请求超时等情况，以及在发送 POST 请求时设置请求体数据等。

此外，现代的 JavaScript 开发中也有很多基于 Promise 的 AJAX 库（如 Axios、Fetch 等），它们提供了更简洁和易用的 API，可以进一步简化发送 AJAX 请求的过程。

Fetch API

Fetch API 是一个用于发送网络请求的 JavaScript 接口，它提供了一个更现代和灵活的方式来处理网络请求和响应。与传统的 XMLHttpRequest 对象相比，Fetch API 具有许多优点和区别。

1. 语法简洁：Fetch API 提供了一种基于 Promise 的简洁的语法，使用起来更加直观和易于理解。
2. 基于 Promise：Fetch API 使用 Promise 对象来处理请求和响应，这意味着你可以使用 then() 和 catch() 等方法来处理成功和失败的情况，而不是使用回调函数。
3. 内置的 JSON 解析：Fetch API 默认情况下会自动解析响应数据，例如 JSON 数据。这意味着你不需要手动解析响应数据，可以直接使用返回的数据。
4. 无法中止请求：与 XMLHttpRequest 不同，Fetch API 的请求是无法中止的。一旦发出请求，它将无法取消，这可能会导致一些问题。
5. 跨域请求默认开启：Fetch API 默认情况下是开启跨域请求的，而不需要额外配置或设置。

例子：

let req = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
};
fetch("https://api.example.com/data", req)
  .then(function (response) {
    if (response.ok) {
      return response.json(); // 解析响应的 JSON 数据
    }
    throw new Error(`请求失败：${response.status}`);
  })
  .then((data) => {
    // 处理解析后的数据
    console.log(data);
  })
  .catch((error) => {
    // 处理错误
    console.log(`发生错误：${error.message}`);
  });

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24