JavaScript 发起 HTTP 请求教程：Fetch 和 XMLHttpRequest

在现代 Web 开发中，使用 JavaScript 发起 HTTP 请求是与后端服务器交互和构建动态 Web 应用的常见需求。本教程将介绍两种常用的发起 HTTP 请求的方法：Fetch API 和 XMLHttpRequest 对象。

1. 使用 Fetch API 发起 HTTP 请求

Fetch API 提供了一种简洁现代的方式来发起 HTTP 请求。它返回一个 Promise 对象，可以方便地处理响应和错误。

以下是如何使用 Fetch API 发起 GET 请求的示例：javascriptfetch('https://api.example.com/data', { method: 'GET' }) .then(response => response.json()) .then(data => { console.log(data); // 处理返回的数据 }) .catch(error => { console.log(error); // 处理错误 });

代码解释：

fetch() 函数接受两个参数：请求 URL 和一个可选的配置对象。* method 属性指定 HTTP 请求方法，例如 'GET'、'POST'、'PUT'、'DELETE' 等。* .then() 方法用于处理响应。* response.json() 方法将响应体解析为 JSON 对象。* catch() 方法用于捕获请求过程中的任何错误。

2. 使用 XMLHttpRequest 对象发起 HTTP 请求

XMLHttpRequest (XHR) 是一个传统的 JavaScript 对象，允许您在不刷新页面的情况下发送 HTTP 请求并处理响应。

以下是如何使用 XMLHttpRequest 对象发起 GET 请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onload = function() { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); console.log(data); // 处理返回的数据 } else { console.log('请求失败。状态码：' + xhr.status); }};xhr.onerror = function() { console.log('请求错误。');};xhr.send();

代码解释：

创建一个新的 XMLHttpRequest 对象。* 使用 open() 方法初始化请求，指定请求方法和 URL。* 设置 onload 事件处理程序，在请求成功完成时处理响应。* xhr.status 属性表示 HTTP 状态码。* xhr.responseText 属性包含服务器返回的响应数据。* JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象。* onerror 事件处理程序用于捕获请求过程中的错误。* 使用 send() 方法发送请求。

总结

Fetch API 和 XMLHttpRequest 对象都是发起 HTTP 请求的有效方法。Fetch API 提供了更现代、更简洁的语法，而 XMLHttpRequest 对象提供了更细粒度的控制和更多功能。选择哪种方法取决于您的具体需求和偏好。

希望本教程能帮助您了解如何使用 JavaScript 发起 HTTP 请求。如果您有任何问题，请随时在下方留言。

JavaScript 发起 HTTP 请求教程：Fetch 和 XMLHttpRequest