JavaScript 发起 HTTP 请求终极指南：XMLHttpRequest 与 Fetch API 深入解析

想要在你的 JavaScript 项目中与服务器交互数据？掌握发起 HTTP 请求是关键！本文将带你深入了解两种常用的方法：XMLHttpRequest 对象和 Fetch API，并提供简单易懂的代码示例，助你快速上手。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 应用的基石，允许你以 JavaScript 代码发送 HTTP 请求并处理响应。

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

这段代码演示了如何发送一个简单的 GET 请求，并在成功获取响应后解析 JSON 数据。

使用 Fetch API

Fetch API 提供了更简洁、更现代的发送 HTTP 请求的方式，并且基于 Promise，代码更易读写。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

同样是发送 GET 请求，使用 Fetch API 代码更加简洁易懂。

总结

以上示例展示了如何使用 XMLHttpRequest 和 Fetch API 发送 GET 请求，并处理响应数据。你可以根据实际需求修改请求 URL、方法 (GET、POST 等) 以及其他参数。

希望本指南能帮助你更好地理解和使用 JavaScript 发送 HTTP 请求！

JavaScript 发起 HTTP 请求终极指南：XMLHttpRequest 与 Fetch API 深入解析