JavaScript 发起 HTTP 请求教程：XMLHttpRequest 与 Fetch API 实例

想要在你的 JavaScript 项目中获取数据或与服务器交互？你需要掌握如何发起 HTTP 请求。

本教程将介绍两种常用的 JavaScript 发起 HTTP 请求的方式：

XMLHttpRequest 对象
Fetch API

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 是一个浏览器内置对象，允许 JavaScript 发送 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 对象： const xhr = new XMLHttpRequest();
使用 open() 方法初始化请求：
- 第一个参数是 HTTP 请求方法，这里是 'GET'。
- 第二个参数是请求的 URL。
- 第三个参数表示是否使用异步请求，设置为 true。
设置 onreadystatechange 事件处理函数，在请求状态改变时触发。
在事件处理函数中，检查 readyState 是否为 4（请求完成）以及 status 是否为 200（请求成功）。
如果请求成功，解析响应数据并打印到控制台。
使用 send() 方法发送请求。

2. 使用 Fetch API

Fetch API 是一个更现代、更简洁的 JavaScript API，用于发起网络请求。

以下代码展示了如何使用 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。
使用 .then() 处理响应，response.json() 将响应数据解析为 JSON 格式。
使用另一个 .then() 处理解析后的 JSON 数据，并打印到控制台。
使用 .catch() 处理请求过程中出现的错误。

总结

本文介绍了两种常用的 JavaScript 发起 HTTP 请求的方式：XMLHttpRequest 和 Fetch API。

XMLHttpRequest 是一个传统的 API，功能强大但使用起来较为繁琐。
Fetch API 是一个更现代、更简洁的 API，更易于使用和理解。

选择哪种方式取决于你的项目需求和个人偏好。

免责声明

请注意，由于 GPT-3.5-turbo 是一个文本模型，它无法直接执行代码或进行实际的 HTTP 请求。上述代码示例仅为了展示在 Javascript 中发起 HTTP 请求的方式，并非在 GPT-3.5-turbo 内部运行的代码。

JavaScript 发起 HTTP 请求教程：XMLHttpRequest 与 Fetch API 实例