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

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

想要在 JavaScript 中与服务器交互并动态更新网页内容？掌握发送 HTTP 请求是关键！本指南将带您了解两种常用的方法：传统的 XMLHttpRequest 对象和现代的 fetch 函数。

使用 XMLHttpRequest 发送 HTTP 请求

XMLHttpRequest 对象是 AJAX 的基础，允许您在不刷新页面的情况下发送异步请求。

以下是一个简单的示例，演示如何使用 XMLHttpRequest 发送 GET 请求：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log('成功:', xhr.response); } else { console.error('请求失败:', xhr.status); }};xhr.onerror = function() { console.error('发生错误！');};xhr.send();

在这个例子中：

1. 我们创建了一个新的 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法 ('GET') 和目标 URL。3. 设置 onload 事件处理程序，在请求成功完成时处理响应。4. 设置 onerror 事件处理程序，在请求过程中发生错误时进行处理。5. 使用 send() 方法发送请求。

使用 fetch 发送 HTTP 请求

fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式。它返回一个 Promise，使您可以使用 then、catch 和 finally 处理响应和错误。

以下是如何使用 fetch 发送 POST 请求的示例：javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .then(data => { console.log('成功:', data); }) .catch(error => { console.error('发生错误:', error); });

在这个例子中：

1. 我们调用 fetch 函数，传入目标 URL 和一个包含请求方法、头部信息和请求体的配置对象。2. 使用 .then() 处理响应，并使用 .json() 方法解析 JSON 响应。3. 使用 .catch() 处理请求过程中可能发生的任何错误。

选择哪种方法？

fetch 通常更易于使用和阅读，尤其是在处理异步操作时。XMLHttpRequest 则提供了更细粒度的控制，并且在所有浏览器中都受支持。

选择哪种方法取决于您的具体需求和项目环境。

小贴士

• 确保在发送请求之前处理 CORS 问题。* 使用开发者工具监控网络请求和响应。* 使用 async/await 简化异步代码。

希望本指南帮助您了解如何使用 JavaScript 发送 HTTP 请求！