JavaScript 发送 HTTP 请求：XMLHttpRequest 示例和库选择

使用 JavaScript 发送 HTTP 请求有多种方法。本文将介绍如何使用 XMLHttpRequest 对象，以及一些常用的 JavaScript 库，如 Axios 和 Fetch。

使用 XMLHttpRequest 对象发送 HTTP 请求

以下代码示例展示了如何使用 XMLHttpRequest 对象发送一个 GET 请求：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 初始化一个 GET 请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）
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);
    }
};

// 发送请求
xhr.send();

代码解释:

创建 XMLHttpRequest 对象: var xhr = new XMLHttpRequest(); 创建一个 XMLHttpRequest 对象，通常简写为 XHR。
初始化请求: xhr.open('GET', 'https://api.example.com/data', true); 使用 open() 方法初始化一个 GET 请求，URL 为 'https://api.example.com/data'。你可以根据需要修改 URL 和请求方法（GET、POST 等）。
设置请求头: xhr.setRequestHeader('Content-Type', 'application/json'); 使用 setRequestHeader() 方法设置请求头，如果不需要设置可以省略。
监听状态变化: xhr.onreadystatechange = function() { ... }; 使用 onreadystatechange 事件监听请求状态变化。当 readyState 等于 4（表示请求已完成）且 status 等于 200（表示请求成功）时，可以通过 responseText 获取到返回的数据。
发送请求: xhr.send(); 发送 HTTP 请求。

使用 JavaScript 库简化 HTTP 请求

除了原生 JavaScript 的 XMLHttpRequest，你还可以使用一些现代的 JavaScript 库来简化 HTTP 请求的处理，例如：

Axios: https://axios-http.com/ 一个流行的基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js。
Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 浏览器内置的 API，提供了一种更现代、更简洁的发送 HTTP 请求的方式。

这些库可以提供更友好的 API、更好的错误处理机制以及对 Promise 的支持，使你更容易地进行 HTTP 请求。

总结

本文介绍了如何使用 XMLHttpRequest 对象以及一些 JavaScript 库来发送 HTTP 请求。选择哪种方法取决于你的具体需求和项目环境。对于简单的请求，XMLHttpRequest 可能是最佳选择。而对于更复杂的请求，使用 Axios 或 Fetch API 可能更方便和高效。

JavaScript 发送 HTTP 请求：XMLHttpRequest 示例和库选择