JavaScript 发送 HTTP 请求：完整指南（含请求头、请求参数和错误处理）

JavaScript 发送 HTTP 请求：完整指南

在现代 Web 开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互和构建动态应用程序的基础。本指南将带您了解如何使用 XMLHttpRequest 和 fetch API 发送带有请求头、请求参数和错误处理逻辑的 HTTP 请求。

使用 XMLHttpRequest 发送 POST 请求

var 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) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
      console.error('Error: ' + xhr.status);
    }
  }
};
var requestBody = JSON.stringify({ key1: 'value1', key2: 'value2' });
xhr.send(requestBody);

代码解释：

1. 创建一个 XMLHttpRequest 对象。
2. 使用 open() 方法初始化请求，指定 HTTP 方法 (POST)、目标 URL 和是否异步 (true)。
3. 使用 setRequestHeader() 方法设置请求头，例如内容类型为 application/json。
4. 使用 onreadystatechange 事件监听器处理服务器响应。
5. 检查 readyState 是否为 4 (请求完成) 以及 status 是否为 200 (成功)。
6. 如果请求成功，解析响应数据并输出到控制台。
7. 如果出现错误，输出错误信息到控制台。
8. 使用 JSON.stringify() 将请求参数转换为 JSON 字符串。
9. 使用 send() 方法发送请求，将请求体作为参数传递。

使用 Fetch API 发送 POST 请求

var url = 'https://api.example.com/data';
var headers = {
  'Content-Type': 'application/json'
};
var requestBody = JSON.stringify({ key1: 'value1', key2: 'value2' });

fetch(url, {
  method: 'POST',
  headers: headers,
  body: requestBody
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => console.log(data))
  .catch(error => console.log(error));

代码解释：

1. 定义目标 URL、请求头和请求体。
2. 使用 fetch() 函数发送请求，传递 URL、请求方法 (POST)、请求头和请求体。
3. 使用 then() 方法处理响应。
4. 如果 response.ok 为 true (状态码在 200-299 范围内)，解析响应数据为 JSON 格式。
5. 否则，抛出一个错误，包含状态码。
6. 使用另一个 then() 方法处理解析后的 JSON 数据，并将其输出到控制台。
7. 使用 catch() 方法捕获任何错误并将其输出到控制台。

总结

本文介绍了使用 XMLHttpRequest 和 fetch API 发送 HTTP 请求的方法，并涵盖了设置请求头、传递请求参数以及处理错误的逻辑。掌握这些技术将使您能够构建更强大、更具交互性的 Web 应用程序。

请记住将示例代码中的 URL、请求头和请求参数替换为您的实际值。