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

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

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 应用的基石，允许你直接与服务器交互。以下是如何使用它发送 GET 请求：

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

使用 fetch API

fetch API 提供了一种更简洁、更易于使用的发送 HTTP 请求的方式。以下是如何使用它获取数据：

fetch('https://api.example.com/data')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

自定义 HTTP 请求

无论是使用 XMLHttpRequest 还是 fetch API，你都可以通过指定以下内容来自定义 HTTP 请求：

• HTTP 方法: GET、POST、PUT、DELETE 等
• URL: 请求发送的目标地址
• 请求头: 包含身份验证、数据类型等信息的键值对
• 请求体: 对于 POST 请求，包含要发送到服务器的数据

浏览器和 Node.js 环境支持

XMLHttpRequest 和 fetch API 在现代浏览器和 Node.js 环境中都可用，确保你的网络请求代码具有广泛的兼容性。