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

在网页开发中，经常需要与服务器进行数据交互。JavaScript 提供了多种方式发送 HTTP 请求，本文将介绍两种常用的方法：传统的 XMLHttpRequest 对象和现代的 Fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的基础，它允许您在不刷新页面的情况下与服务器进行数据交互。

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

// 设置请求方法和 URLxhr.open('GET', 'https://api.example.com/data', true); // true 表示异步请求，false 表示同步请求

// 设置请求头（可选）xhr.setRequestHeader('Content-Type', 'application/json');

// 设置响应回调函数xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); console.log(response); } else { console.error('请求失败:', xhr.status); }};

// 处理错误xhr.onerror = function() { console.error('请求错误');};

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

使用 Fetch API

Fetch API 提供了一种更简洁、更现代的方式发送 HTTP 请求。

以下是使用 fetch 函数发送 GET 和 POST 请求的示例：

GET 请求javascriptfetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('请求失败: ' + response.status); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('请求错误:', error); });

POST 请求javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => { if (!response.ok) { throw new Error('请求失败: ' + response.status); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('请求错误:', error); });

总结

本文介绍了使用 JavaScript 发送 HTTP 请求的两种常用方法：XMLHttpRequest 和 Fetch API。Fetch API 语法更简洁易懂，更推荐使用。在实际开发中，您可以根据具体需求选择合适的方法。

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