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

在现代 Web 开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互、获取数据和构建动态 Web 应用程序的基石。本教程将引导您了解使用 JavaScript 发送 HTTP 请求的两种常用方法：传统的 XMLHttpRequest 对象和更现代的 fetch API。

1. 使用 XMLHttpRequest 发送 HTTP 请求

XMLHttpRequest 对象是 AJAX（异步 JavaScript 和 XML）技术的核心，它允许您在不刷新整个页面的情况下发送异步 HTTP 请求。

步骤：

创建 XMLHttpRequest 对象：

javascript var xhr = new XMLHttpRequest();
配置请求： 使用 open() 方法设置 HTTP 方法（GET、POST 等）、请求 URL 和异步标志（true 表示异步，false 表示同步）。

javascript xhr.open('GET', 'https://api.example.com/data', true);
设置请求头（可选）： 使用 setRequestHeader() 方法添加请求头，例如 Content-Type。

javascript xhr.setRequestHeader('Content-Type', 'application/json');
处理响应： 使用 onreadystatechange 事件监听器处理服务器响应。

javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); console.log(response); } };
发送请求： 使用 send() 方法发送请求。对于 GET 请求，可以将 null 作为参数传递；对于 POST 请求，则传递请求体数据。

javascript xhr.send();

**完整示例：**javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); }};xhr.send();

2. 使用 Fetch API 发送 HTTP 请求

fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式，它返回一个 Promise 对象，使您可以使用更优雅的异步代码。

**基本语法：**javascriptfetch(url, options) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

**示例：**javascriptfetch('https://api.example.com/data', { method: 'GET', headers: { 'Content-Type': 'application/json' }}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

说明：

fetch() 函数的第一个参数是请求 URL。- 第二个参数是一个可选的配置对象，可以设置 HTTP 方法、请求头、请求体等。- response.json() 方法用于将响应数据解析为 JSON 对象。- .then() 方法用于处理成功响应。- .catch() 方法用于处理错误。

结论

本教程介绍了使用 JavaScript 发送 HTTP 请求的两种主要方法：XMLHttpRequest 和 fetch API。 fetch API 更加现代和简洁，推荐在新项目中使用。

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