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

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

在 web 开发中，我们经常需要使用 JavaScript 发送 HTTP 请求来与服务器交互，获取数据或提交信息。本文将介绍两种常用的方法：传统的 XMLHttpRequest 对象和更现代的 Fetch API。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象允许 JavaScript 通过发送 HTTP 请求与服务器进行异步通信。

以下是使用 XMLHttpRequest 发送 HTTP 请求的基本步骤：

1. 创建一个 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，设置请求方法（GET, POST 等）和目标 URL。3. 设置请求头，例如 Content-Type。4. 使用 send() 方法发送请求。5. 监听 onreadystatechange 事件，处理服务器响应。

**示例代码：**javascriptfunction sendHttpRequest(url, method, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.send(JSON.stringify(data));}

// 用法示例：var url = 'https://api.example.com/endpoint';var method = 'POST';var data = { key: 'value' };

sendHttpRequest(url, method, data, function(response) { console.log(response);});

代码解释：

• open(method, url, async): 初始化请求。method 是请求方法，url 是目标 URL，async 表示是否异步发送请求，默认为 true。* setRequestHeader(header, value): 设置请求头。* onreadystatechange: 监听请求状态变化。* readyState: 表示请求状态，4 代表请求已完成。* status: HTTP 状态码，200 代表请求成功。* send(data): 发送请求，可选参数 data 是要发送的数据。

2. 使用 Fetch API

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

以下是使用 Fetch API 发送 HTTP 请求的基本步骤：

1. 使用 fetch() 函数发起请求，传入目标 URL。2. 使用 then() 方法处理响应。3. 使用 json() 或 text() 方法解析响应数据。

**示例代码：**javascriptfunction sendHttpRequest(url, method, data, callback) { fetch(url, { method: method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.text()) .then(callback);}

// 用法示例：var url = 'https://api.example.com/endpoint';var method = 'POST';var data = { key: 'value' };

sendHttpRequest(url, method, data, function(response) { console.log(response);});

代码解释：

• fetch(url, options): 发起请求。url 是目标 URL，options 是可选的配置对象，可以设置请求方法、请求头、请求体等。* then(callback): 处理响应，callback 函数接收一个 Response 对象作为参数。* response.json(): 将响应解析为 JSON 对象。* response.text(): 将响应解析为文本字符串。

总结

无论是使用 XMLHttpRequest 还是 Fetch API，都可以方便地使用 JavaScript 发送 HTTP 请求。Fetch API 语法更简洁，更易于使用，建议在新项目中优先考虑。但 XMLHttpRequest 仍然是兼容性更好的选择，适用于需要支持旧版浏览器的项目。