JavaScript 发送 HTTP 请求: 从 XMLHttpRequest 到 Fetch API

在现代 Web 开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互和构建动态 Web 应用的关键。本文将介绍两种常用的发送 HTTP 请求的方法：传统的 XMLHttpRequest 对象和更现代的 Fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的基础，允许 JavaScript 在不刷新页面的情况下与服务器进行异步通信。

以下是使用 XMLHttpRequest 发送 GET 请求的示例：javascript// 创建一个新的 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 配置请求，包括 URL 和请求类型xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头，如果需要的话xhr.setRequestHeader('Content-Type', 'application/json');

// 处理请求的响应xhr.onload = function() { if (xhr.status === 200) { // 请求成功，处理响应数据 console.log(xhr.responseText); } else { // 请求失败，处理错误信息 console.error('请求失败. 错误代码:', xhr.status); }};

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

使用 Fetch API

Fetch API 提供了一种更简洁、更易于使用的发送 HTTP 请求的方式。它使用 Promise 来处理异步操作，使代码更易读和维护。

以下是使用 fetch 函数发送 GET 请求的示例：javascript// 发起 GET 请求fetch('https://api.example.com/data') .then(function(response) { if (response.ok) { // 请求成功，处理响应数据 return response.text(); } else { // 请求失败，抛出一个错误 throw new Error('请求失败. 错误代码: ' + response.status); } }) .then(function(data) { // 处理响应数据 console.log(data); }) .catch(function(error) { // 处理错误信息 console.error(error); });

总结

XMLHttpRequest 和 Fetch API 都可以用来发送 HTTP 请求，但 Fetch API 更现代、更易于使用。选择哪种方法取决于你的项目需求和个人偏好。

希望本文能帮助你理解如何使用 JavaScript 发送 HTTP 请求！

JavaScript 发送 HTTP 请求: 从 XMLHttpRequest 到 Fetch API