JavaScript 发送 HTTP 请求完全指南：Fetch API 与 XMLHttpRequest

在前端开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互、获取数据和实现动态功能的基石。本文将介绍两种常用的发送 HTTP 请求的方法：现代的 Fetch API 和传统的 XMLHttpRequest 对象。

1. 使用 Fetch API 发送请求

Fetch API 提供了一种简洁直观的接口，用于发送网络请求并处理响应。以下是使用 Fetch API 发送 GET 请求的示例：javascriptfetch('https://api.example.com/data', { method: 'GET', // 可替换为'POST'、'PUT'等 headers: { 'Content-Type': 'application/json', // 请求头部设置 // 如果有需要，还可以设置其他请求头部 }, // 可选：如果需要发送数据，可以在这里添加body字段}) .then(response => response.json()) .then(data => { // 在这里处理响应数据 console.log(data); }) .catch(error => { // 处理请求错误 console.log(error); });

代码解析:

fetch(url, options): 发起 HTTP 请求。 - url: 请求的目标 URL。 - options: 可选配置对象，包含请求方法、头部信息、请求体等。- .then(response => response.json()): 将响应数据解析为 JSON 格式。- .then(data => { ... }): 处理成功响应。- .catch(error => { ... }): 处理请求错误。

发送 POST 请求javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ key1: 'value1', key2: 'value2' }),}) .then(response => response.json()) .then(data => { console.log('请求成功:', data); }) .catch(error => { console.error('请求出错:', error); });

2. 使用 XMLHttpRequest 对象发送请求

XMLHttpRequest 是更传统的发送 HTTP 请求的方式，提供了更细粒度的控制。以下是使用 XMLHttpRequest 发送 GET 请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true); // 可替换为'POST'、'PUT'等xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头部

xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 在这里处理响应数据 console.log(xhr.responseText); }};

// 可选：如果需要发送数据，可以在这里添加send方法的参数xhr.send();

// 如果需要处理请求错误，可以添加以下代码xhr.onerror = function () { // 处理请求错误 console.log('请求出错！');};

代码解析:

创建 XMLHttpRequest 对象。- 使用 open() 方法初始化请求，设置请求方法、 URL 和是否异步。- 设置请求头部信息。- 使用 send() 方法发送请求。- 监听 onreadystatechange 事件，根据 readyState 和 status 属性判断请求状态，并处理响应数据。

发送 POST 请求javascriptconst xhr = new XMLHttpRequest();xhr.open('POST', 'https://api.example.com/data', true);xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { console.log('请求成功:', xhr.responseText); } else { console.error('请求出错:', xhr.status); } }};

xhr.send(JSON.stringify({ key1: 'value1', key2: 'value2' }));

xhr.onerror = function () { console.log('请求出错!');};

选择合适的请求方法

对于大多数现代浏览器应用，推荐使用 Fetch API，其简洁易用且支持 Promises。- 如果需要兼容老旧浏览器或需要更细粒度的控制，可以选择 XMLHttpRequest。

无论选择哪种方式，理解 HTTP 请求和响应的基本原理都是至关重要的。希望本文能够帮助你更好地掌握使用 JavaScript 发送 HTTP 请求的方法。

JavaScript 发送 HTTP 请求完全指南：Fetch API 与 XMLHttpRequest