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

想要使用 JavaScript 发送 HTTP 请求？你可以利用浏览器内置的 XMLHttpRequest 对象或更现代的 Fetch API。

使用 XMLHttpRequest 发送 HTTP 请求

以下是如何使用 XMLHttpRequest 发送 GET 请求的示例：

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

这段代码将：

创建一个新的 XMLHttpRequest 对象。
使用 open() 方法初始化一个 GET 请求，目标 URL 为 'https://api.example.com/data'，并设置异步标志为 true。
监听 load 事件，当请求成功完成时，检查状态码是否为 200 (表示成功)。
如果请求成功，解析响应数据并将其打印到控制台。
使用 send() 方法发送请求。

使用 Fetch API 发送 HTTP 请求

Fetch API 提供了一种更简洁、更现代的方式来发送 HTTP 请求。以下是如何使用 Fetch API 实现相同功能的示例：

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('网络请求失败');
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log('错误：', error.message);
  });

这段代码将：

使用 fetch() 函数发起对 'https://api.example.com/data' 的 GET 请求。
使用 .then() 方法处理响应。
检查响应是否成功 (response.ok)。
如果成功，将响应解析为 JSON 格式并返回。
否则，抛出一个错误。
在下一个 .then() 方法中，处理解析后的 JSON 数据。
使用 .catch() 方法捕获并处理任何错误。

总结

以上代码示例展示了如何使用 XMLHttpRequest 和 Fetch API 从 'https://api.example.com/data' 获取数据并将其解析为 JSON 格式。你可以根据自己的需求修改 URL 和其他参数。 Fetch API 通常是更推荐的选择，因为它提供了更简洁的语法和更强大的功能。

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