JavaScript 发送 HTTP 请求教程：XMLHttpRequest 和 Fetch API 实例

想要使用 JavaScript 发送 HTTP 请求？您来对地方了！

在网页开发中，经常需要使用 JavaScript 与服务器进行数据交互。这时就需要使用 HTTP 请求。

本文将介绍两种常用的发送 HTTP 请求的方法：

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是浏览器内置的用于发送 HTTP 请求的 API。

以下是使用 XMLHttpRequest 对象发送 GET 请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/endpoint', 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 和是否异步 (true)。
3. 使用 onreadystatechange 事件监听请求状态变化，并在请求完成且状态码为 200 时解析响应数据并输出。
4. 使用 send() 方法发送请求。

2. 使用 Fetch API

Fetch API 是更现代化的发送 HTTP 请求的方式，它提供了更简洁的语法和基于 Promise 的 API。

以下是使用 Fetch API 发送 GET 请求的示例代码：

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

这段代码执行以下操作：

1. 使用 fetch() 函数发送请求，并返回一个 Promise 对象。
2. 使用 .then() 方法处理成功响应，并使用 response.json() 方法将响应数据解析为 JSON 格式。
3. 再次使用 .then() 方法处理解析后的 JSON 数据并输出。
4. 使用 .catch() 方法捕获并处理请求过程中发生的错误。

总结

以上两种方法都可以用来发送 HTTP 请求，您可以根据自己的需要选择合适的方法。

需要注意的是，以上示例代码仅展示了简单的 GET 请求，您可以根据需要修改请求方法、URL、请求头和请求体等参数。

希望本教程能够帮助您理解如何使用 JavaScript 发送 HTTP 请求。祝您编码愉快！