JavaScript 发出 HTTP 请求终极指南：XMLHttpRequest 和 Fetch API 深度解析

想要使用 JavaScript 与服务器交互并构建动态网页？掌握发送 HTTP 请求是关键！本指南将带你学习两种常用方法：XMLHttpRequest 和 Fetch API，并提供代码示例和最佳实践，帮助你轻松发送各种类型的请求。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 应用的基石，允许你以异步方式发送请求，无需刷新整个页面。以下是如何使用它发送 GET 请求：javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

代码解析：

创建一个 XMLHttpRequest 对象实例。- 使用 open() 方法初始化请求，指定请求方法 ('GET')、目标 URL 和是否异步 (true)。- onreadystatechange 事件处理程序监听请求状态变化，并在请求完成 (readyState 为 4) 且成功 (status 为 200) 时处理响应数据。- send() 方法发送请求。

2. 使用 Fetch API

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式，基于 Promise，代码更易读易维护。以下是如何使用 fetch() 函数发送 GET 请求：javascriptfetch('https://api.example.com/data') .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log(error); });

代码解析：

fetch() 函数返回一个 Promise，表示请求的状态。- 使用 .then() 方法处理成功响应，并使用 response.json() 将 JSON 数据解析为 JavaScript 对象。- 链式调用 .then() 处理解析后的数据。- .catch() 方法捕获并处理请求过程中发生的任何错误。

请求方法与参数

以上示例展示了发送 GET 请求，你还可以使用 POST、PUT、DELETE 等其他 HTTP 方法。

发送 POST 请求时，需要设置请求头并将数据添加到请求体中：javascript// 使用 XMLHttpRequestxhr.open('POST', 'https://api.example.com/data', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify({ key: 'value' }));

// 使用 Fetch APIfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })});

总结

本文介绍了使用 JavaScript 发送 HTTP 请求的两种常用方法：XMLHttpRequest 和 Fetch API。Fetch API 更简洁易用，建议优先使用。掌握这些技术，你就可以轻松构建与服务器交互的动态 Web 应用。

记住将代码示例中的 https://api.example.com/data 替换为你自己的 API 端点。

JavaScript 发出 HTTP 请求终极指南：XMLHttpRequest 和 Fetch API 深度解析