JavaScript 发起 HTTP 请求终极指南：Fetch 和 XMLHttpRequest

JavaScript 发起 HTTP 请求终极指南：Fetch 和 XMLHttpRequest

想要在你的 JavaScript 应用中与服务器交互、获取数据或发送信息？掌握如何发起 HTTP 请求至关重要。本文将介绍两种常用的 JavaScript 发起 HTTP 请求的方法：现代的 fetch 函数和传统的 XMLHttpRequest 对象。

使用 fetch 函数发起 HTTP 请求

fetch 函数是现代 JavaScript 中发起 HTTP 请求的推荐方法，它提供了简洁易用的 API。javascriptfetch(url, { method: 'GET', // 可以是 GET、POST、PUT、DELETE 等 headers: { 'Content-Type': 'application/json', // 根据需要设置请求头 // 其他自定义请求头可以在这里添加 }, // 可选的请求体内容 // body: JSON.stringify({ key: 'value' }),}).then(response => response.json()) // 解析响应数据.then(data => { // 处理返回的数据 console.log(data);}).catch(error => { // 处理请求错误 console.error('发生错误:', error);});

代码解析：

1. fetch(url, options): 发起请求，url 为目标地址，options 为可选配置对象。2. method: 请求方法，如 'GET'、'POST'、'PUT'、'DELETE' 等。3. headers: 请求头，例如设置内容类型为 JSON。4. body: 可选的请求体内容，例如以 JSON 格式发送数据。5. .then(response => response.json()): 处理响应，并解析为 JSON 格式。6. .then(data => { ... }): 处理解析后的数据。7. .catch(error => { ... }): 捕获并处理请求错误。

使用 XMLHttpRequest 对象发起 HTTP 请求

XMLHttpRequest 对象是传统的 JavaScript 发起 HTTP 请求的方式，虽然代码相对繁琐，但在一些老旧浏览器或特殊场景下仍有其应用价值。javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', url, true); // 可以是 GET、POST、PUT、DELETE 等xhr.setRequestHeader('Content-Type', 'application/json'); // 根据需要设置请求头// 其他自定义请求头可以在这里添加

xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 解析响应数据 // 处理返回的数据 console.log(response); } else if (xhr.readyState === 4) { // 处理请求错误 console.error('发生错误:', xhr.status); }};

// 可选的请求体内容// xhr.send(JSON.stringify({ key: 'value' }));xhr.send();

代码解析:

1. 创建 XMLHttpRequest 对象实例。2. 使用 open() 方法设置请求方法、目标地址和异步选项。3. 使用 setRequestHeader() 设置请求头。4. 监听 onreadystatechange 事件处理不同请求状态。5. 使用 send() 方法发送请求，可选传入请求体内容。

总结

fetch 函数和 XMLHttpRequest 对象都能够实现 JavaScript 发起 HTTP 请求的功能。fetch 函数以其简洁易用的 API 成为现代 JavaScript 的首选方案，而 XMLHttpRequest 对象则在一些特殊情况下仍有其应用价值。选择合适的方法取决于你的具体需求和目标浏览器。