JavaScript发送HTTP请求实战指南：XMLHttpRequest与Fetch API详解

想要使用 JavaScript 发送 HTTP 请求？你有两个强大的工具可以选择：浏览器内置的 'XMLHttpRequest' 对象和现代的 'fetch' 函数。

使用 XMLHttpRequest 对象

'XMLHttpRequest' 对象允许你以编程方式创建 HTTP 请求，并处理服务器响应。以下是如何使用它发送 GET 请求的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

这段代码将：

1. 创建一个新的 'XMLHttpRequest' 对象。
2. 使用 'open()' 方法初始化一个 GET 请求，目标 URL 为 'https://api.example.com/data'。
3. 设置 'onreadystatechange' 事件处理程序，以便在请求状态发生变化时执行代码。
4. 检查 'readyState' 是否为 4（请求完成）以及 'status' 是否为 200（请求成功）。
5. 如果请求成功，则将响应解析为 JSON 对象，并将其打印到控制台。
6. 使用 'send()' 方法发送请求。

使用 Fetch 函数

'fetch' 函数提供了一种更简洁、更现代的方式来发送 HTTP 请求。以下是使用 'fetch' 发送 GET 请求的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这段代码将：

1. 使用 'fetch()' 函数发送 GET 请求到 'https://api.example.com/data'。
2. 使用 '.then()' 方法处理响应。
3. 将响应解析为 JSON 对象。
4. 将数据打印到控制台。
5. 如果出现错误，则将错误信息打印到控制台。

自定义请求

你可以根据需要更改请求方法（例如 'POST'）和 URL。 对于复杂的请求，你还可以设置请求头、请求体等。

总结

'XMLHttpRequest' 和 'fetch' 都是发送 HTTP 请求的有效方式。'fetch' 提供了更现代和简洁的语法，而 'XMLHttpRequest' 则提供了更细粒度的控制。 选择哪种方法取决于你的具体需求。