JavaScript 发起 HTTP 请求教程：XMLHttpRequest 与 Fetch API 实战

JavaScript 发起 HTTP 请求教程：XMLHttpRequest 与 Fetch API 实战

在 Web 开发中，经常需要使用 JavaScript 发送 HTTP 请求与服务器交互，获取数据或提交信息。本文将介绍两种常用的方法：传统的 XMLHttpRequest 对象和现代浏览器提供的 Fetch API，帮助你快速掌握如何用 JavaScript 发送 HTTP 请求。

1. 使用 XMLHttpRequest 对象发送 HTTP 请求

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

以下是使用 XMLHttpRequest 发送 GET 请求的示例代码：javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://example.com/api/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = xhr.responseText; // 处理响应数据 }};xhr.send();

代码解析：

1. 创建一个 XMLHttpRequest 对象实例。2. 使用 open() 方法初始化请求，参数包括请求方法 ('GET'), 请求 URL, 以及是否异步 (true)。3. 设置 onreadystatechange 事件处理函数，监听请求状态变化。4. 当请求状态码为 4 (请求完成) 且状态码为 200 (请求成功) 时，获取响应数据。5. 使用 send() 方法发送请求。

发送 POST 请求

发送 POST 请求需要设置请求头信息，并传递请求体数据。javascriptvar xhr = new XMLHttpRequest();xhr.open('POST', 'https://example.com/api/data', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function () { // ... 处理响应};var data = { key: 'value' };xhr.send(JSON.stringify(data));

2. 使用 Fetch API 发送 HTTP 请求

Fetch API 提供了更简洁、更现代的发送 HTTP 请求的方式，它返回 Promise 对象，更易于处理异步操作。

以下是使用 fetch 函数发送 GET 请求的示例代码:javascriptfetch('https://example.com/api/data') .then(function(response) { if (response.ok) { return response.text(); } throw new Error('网络请求失败'); }) .then(function(data) { // 处理响应数据 }) .catch(function(error) { // 处理错误情况 });

代码解析：

1. 调用 fetch 函数并传入请求 URL，返回一个 Promise 对象。2. 使用 .then() 方法处理成功响应。3. 判断响应状态是否 OK，如果是，则解析响应数据（例如使用 response.text() 获取文本内容）。4. 如果响应状态不 OK，则抛出错误。5. 使用 .catch() 方法捕获错误信息。

发送 POST 请求

发送 POST 请求时，需要在 fetch 函数的第二个参数中设置请求方法、请求头信息和请求体数据。javascriptfetch('https://example.com/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}).then(response => { // ... 处理响应}).catch(error => { // ... 处理错误});

总结

本文介绍了使用 JavaScript 发送 HTTP 请求的两种常用方法：XMLHttpRequest 和 Fetch API。XMLHttpRequest 较为传统，但兼容性更好； Fetch API 更简洁易用，是现代 Web 开发中的首选方案。

希望这篇教程能帮助你更好地理解如何在 JavaScript 中发送 HTTP 请求！