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

在 Web 开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互、获取数据和更新网页内容的基础。本文将介绍两种常用的发送 HTTP 请求的方法：XMLHttpRequest 和 Fetch API，并提供示例代码和最佳实践。

1. 使用 XMLHttpRequest 发送 HTTP 请求

XMLHttpRequest 是一个浏览器内置对象，用于在 JavaScript 中发起 HTTP 请求。以下是一个使用 XMLHttpRequest 发送 HTTP GET 请求的示例：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

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

// 指定响应类型
xhr.responseType = 'json';

// 处理请求完成后的响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 获取响应数据
    var responseData = xhr.response;
    // 在此处处理响应数据
    console.log(responseData);
  }
};

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

代码解释：

首先，创建一个新的 XMLHttpRequest 对象。
使用 open() 方法设置请求方法 (GET)、请求 URL (http://example.com/api/data) 和是否异步 (true)。
可选地，设置 responseType 属性来指定服务器响应的数据类型，例如 'json' 表示 JSON 格式。
监听 onload 事件，当请求完成并接收到响应时触发。
在 onload 事件处理程序中，检查响应状态码 (xhr.status) 是否为 200（表示成功），如果是，则从 xhr.response 获取响应数据。
最后，使用 send() 方法发送请求。

注意： 将示例代码中的 URL 'http://example.com/api/data' 替换为您要请求的实际 URL。

2. 使用 Fetch API 发送 HTTP 请求

Fetch API 是一个更现代的发送 HTTP 请求的 API，它返回 Promise 对象，使用起来更加简洁和灵活。以下是一个使用 Fetch API 发送 HTTP GET 请求的示例：

fetch('http://example.com/api/data')
  .then(function(response) {
    if (response.ok) {
      // 获取响应数据
      return response.json();
    } else {
      throw new Error('HTTP status code: ' + response.status);
    }
  })
  .then(function(responseData) {
    // 在此处处理响应数据
    console.log(responseData);
  })
  .catch(function(error) {
    // 处理错误
    console.error(error);
  });

代码解释：

使用 fetch() 函数发送请求，传入请求 URL。
fetch() 函数返回一个 Promise 对象，可以使用 .then() 方法处理成功响应。
在第一个 .then() 方法中，检查响应是否成功 (response.ok)，如果是，则调用 response.json() 方法将响应数据解析为 JSON 对象并返回。
第二个 .then() 方法接收解析后的 JSON 数据，可以在这里进行处理。
如果请求过程中出现错误，可以使用 .catch() 方法捕获并处理。

结论

本文介绍了两种使用 JavaScript 发送 HTTP 请求的方法：XMLHttpRequest 和 Fetch API。XMLHttpRequest 是一种传统的、兼容性较好的方法，而 Fetch API 则更加现代、简洁和灵活。您可以根据项目需求和代码环境选择适合的方法。

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