JavaScript 发起 HTTP 请求完全指南：XMLHttpRequest 与 Fetch API

想要在你的 JavaScript 项目中与服务器交互？掌握如何发出 HTTP 请求是关键！本文将为你介绍两种强大的方法：经典的 XMLHttpRequest 对象和更现代的 Fetch API。

使用 XMLHttpRequest 发送 HTTP 请求

XMLHttpRequest 对象是 AJAX 应用的基石，让我们通过一个例子学习如何使用它：

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求方法和 URL
xhr.open('GET', 'https://api.example.com/data', true);

// 监听请求状态变化
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，处理响应数据
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    // 请求失败
    console.error('请求失败。状态码：' + xhr.status);
  }
};

// 处理错误
xhr.onerror = function() {
  console.error('请求出错');
};

// 发送请求
xhr.send();

在这个例子中，我们创建了一个 XMLHttpRequest 对象，设置了请求方法为 'GET'，目标 URL 为 'https://api.example.com/data'，并指定异步请求 (true)。然后，我们监听了 onload 事件，根据 HTTP 状态码判断请求是否成功，并进行相应的处理。

使用 Fetch API 发送 HTTP 请求

Fetch API 提供了更简洁、更现代的发送 HTTP 请求的方式，让我们看一个例子：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败。状态码：' + response.status);
    }
    return response.json(); // 解析 JSON 响应
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在这个例子中，我们使用 fetch() 函数发送请求，并使用 Promise 链式调用处理响应。如果 response.ok 为 true，则表示请求成功，我们可以调用 response.json() 方法解析 JSON 格式的响应数据。否则，抛出一个错误，并在 catch 块中处理。

总结

本文介绍了使用 JavaScript 发送 HTTP 请求的两种常用方法：XMLHttpRequest 和 Fetch API。XMLHttpRequest 较为传统，但功能强大，兼容性好。Fetch API 语法更简洁，使用 Promise，更易于异步处理，是现代 Web 开发的首选。

希望这篇文章能够帮助你更好地理解如何在 JavaScript 中发送 HTTP 请求，并在你的项目中运用自如！