JavaScript 发起 HTTP 请求：XMLHttpRequest 和 Fetch 详解

想要在你的 JavaScript 应用中获取数据或与服务器交互吗？了解如何使用 JavaScript 发起 HTTP 请求至关重要。本文将介绍两种常用方法：传统的 XMLHttpRequest 对象和更现代的 fetch 函数，帮助你轻松掌握 HTTP 请求的发送和处理。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 应用的基石，允许你以 JavaScript 代码发送 HTTP 请求。以下是如何使用它发送 GET 请求的示例：

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

这段代码演示了以下步骤：

1. 创建一个新的 XMLHttpRequest 对象。
2. 使用 open() 方法初始化一个请求，指定请求方法 (GET)、URL 和是否异步 (true)。
3. 使用 onreadystatechange 事件监听请求状态变化。
4. 当请求完成且成功 (状态码 200) 时，解析响应数据并输出到控制台。
5. 使用 send() 方法发送请求。

使用 Fetch 函数

fetch 函数提供了更简洁、更现代的发送 HTTP 请求的方式。它返回一个 Promise，使你可以使用更优雅的异步代码结构。以下是使用 fetch 发送 GET 请求的示例：

fetch('http://example.com/api/data')
    .then(function(response) {
        if (response.ok) {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
    .then(function(data) {
        console.log(data);
    })
    .catch(function(error) {
        console.log(error.message);
    });

这段代码展示了以下流程：

1. 调用 fetch() 函数并传入请求 URL。
2. 使用 .then() 方法处理 Promise 的成功状态，检查响应是否成功 (response.ok)。
3. 如果成功，将响应解析为 JSON 格式并返回。
4. 否则，抛出一个错误。
5. 再次使用 .then() 方法处理解析后的 JSON 数据，并将其输出到控制台。
6. 使用 .catch() 方法捕获并处理任何错误。

总结

本文介绍了两种使用 JavaScript 发送 HTTP 请求的方法：XMLHttpRequest 和 fetch。XMLHttpRequest 是传统的 AJAX 方法，而 fetch 提供了更现代、更易于使用的 Promise-based API。选择哪种方法取决于你的项目需求和编码风格。