JavaScript 发起 HTTP 请求: XMLHttpRequest 和 Fetch API 教程

在 Web 开发中，经常需要使用 JavaScript 向服务器发送请求并获取数据。JavaScript 提供了两种主要的 API 来实现这一功能：传统的 XMLHttpRequest 对象和现代的 Fetch API。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象允许您以 JavaScript 发送 HTTP 请求。它提供了丰富的功能，例如异步请求、请求头管理和响应处理。

**示例代码:**javascript// 创建一个新的 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 设置请求的类型和 URLxhr.open('GET', 'https://api.example.com/data', true); // true 表示异步请求

// 监听请求状态改变事件xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且响应状态为 200 时，处理响应数据 var responseData = JSON.parse(xhr.responseText); console.log(responseData); }};

// 发送请求xhr.send();

代码解释:

我们首先创建一个新的 XMLHttpRequest 对象。2. 然后，使用 open() 方法设置请求的类型 ('GET'、'POST' 等) 和目标 URL。第三个参数 true 表示我们希望进行异步请求。3. onreadystatechange 事件会在请求状态发生改变时触发。我们监听此事件并在 readyState 为 4 (请求完成) 且 status 为 200 (请求成功) 时处理响应数据。4. 最后，使用 send() 方法发送请求。

2. 使用 Fetch API

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式。它基于 Promise，使得处理异步操作更加方便。

**示例代码:**javascript// 发出 GET 请求fetch('https://api.example.com/data') .then(function(response) { if (response.ok) { // 当响应状态为 200 时，处理响应数据 return response.json(); } throw new Error('Network response was not ok.'); }) .then(function(responseData) { console.log(responseData); }) .catch(function(error) { console.log('Error:', error.message); });

代码解释:

fetch() 函数返回一个 Promise 对象。2. 第一个 .then() 方法处理响应对象。我们检查 response.ok 是否为 true，如果是，则表示请求成功，我们使用 response.json() 方法将响应体解析为 JSON 对象。3. 第二个 .then() 方法接收解析后的 JSON 数据并进行处理。4. .catch() 方法捕获任何错误并进行处理。

选择哪种方法？

Fetch API 更简洁易用，并且更符合现代 JavaScript 开发的 Promise 风格。然而，XMLHttpRequest 提供了更细粒度的控制，并且在所有浏览器中都得到支持。

您可以根据项目的具体需求和开发团队的偏好选择合适的方法。

JavaScript 发起 HTTP 请求: XMLHttpRequest 和 Fetch API 教程