JavaScript 发送 HTTP 请求教程：从 XMLHttpRequest 到 Fetch API

在网页开发中，经常需要使用 JavaScript 向服务器发送 HTTP 请求以获取或提交数据。本教程将介绍两种常用的发送 HTTP 请求的方法：XMLHttpRequest 对象和 Fetch API，并提供详细的代码示例和解释。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是浏览器提供的用于发送 HTTP 请求的传统方式。以下是使用 XMLHttpRequest 发送 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();

代码解释：

创建一个 XMLHttpRequest 对象。
使用 open() 方法初始化请求，指定请求方法 ('GET'), URL 和是否异步 (true)。
设置 onreadystatechange 事件处理函数，该函数在请求状态发生变化时触发。
检查 readyState 是否为 4 (请求完成) 以及 status 是否为 200 (请求成功)。
如果请求成功，使用 JSON.parse() 解析响应数据。
使用 send() 方法发送请求。

2. 使用 Fetch API

Fetch API 是现代浏览器提供的一种更简洁、更易于使用的发送 HTTP 请求的方式。以下是使用 Fetch API 发送 GET 请求的示例代码：

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

代码解释：

使用 fetch() 函数发送请求，传入 URL。
fetch() 函数返回一个 Promise 对象，可以使用 .then() 方法链式调用处理响应。
第一个 .then() 方法将响应转换为 JSON 格式。
第二个 .then() 方法处理解析后的 JSON 数据。
.catch() 方法捕获并处理请求过程中发生的错误。

总结

本文介绍了两种使用 JavaScript 发送 HTTP 请求的方法：XMLHttpRequest 和 Fetch API。Fetch API 语法更简洁，更易于使用，是现代 Web 开发中的首选方式。

无论您选择哪种方法，都可以根据需要更改请求类型 (如 POST、PUT 等) 以及请求参数。

请记住，为了在浏览器中运行这些代码，您需要确保代码运行在支持 JavaScript 的环境中，例如浏览器的开发者工具控制台或 Node.js 运行时环境。

JavaScript 发送 HTTP 请求教程：从 XMLHttpRequest 到 Fetch API