JavaScript 发送 HTTP 请求终极指南：XMLHttpRequest vs. Fetch

想要使用 JavaScript 与服务器交互并构建动态网页应用？掌握发送 HTTP 请求是关键！本文将为你深入解析两种常用的方法：传统的 XMLHttpRequest 对象和现代的 fetch 函数。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的核心，允许你以异步方式发送请求，无需刷新页面即可更新内容。

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

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

// 定义请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功
    console.log(xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败. 错误码: ' + xhr.status);
  }
};

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

代码解析:

xhr.open('GET', 'https://api.example.com/data', true): 初始化请求，指定方法 (GET)、URL，以及是否异步 (true)。
xhr.onload: 定义请求完成后的回调函数，处理响应数据。
xhr.status: 获取 HTTP 状态码，200 表示成功。
xhr.responseText: 获取响应数据 (文本形式)。
xhr.send(): 发送请求。

2. 使用 Fetch 函数 (更现代的方式)

fetch 函数提供了更简洁、更 Promise 化的方式来发送 HTTP 请求。

// 发出 GET 请求
fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      // 响应成功
      return response.text(); // 获取文本数据
    } else {
      throw new Error('请求失败. 错误码: ' + response.status);
    }
  })
  .then(function(data) {
    // 处理响应数据
    console.log(data);
  })
  .catch(function(error) {
    // 处理错误
    console.error(error);
  });

代码解析:

fetch('https://api.example.com/data'): 发起 GET 请求，返回一个 Promise 对象。
.then(response => ...): 处理响应。
- response.ok: 检查响应状态是否成功 (200-299)。
- response.text(): 获取响应数据 (文本形式)，也可以使用 response.json() 获取 JSON 数据。
.catch(error => ...): 捕获并处理错误。

总结

XMLHttpRequest 是传统的发送 HTTP 请求的方式，而 fetch 提供了更现代、更易用的 API。选择哪种方法取决于你的项目需求和编码风格。

希望这篇指南帮助你更好地理解如何在 JavaScript 中发送 HTTP 请求！

JavaScript 发送 HTTP 请求终极指南：XMLHttpRequest vs. Fetch