JavaScript 发送 HTTP 请求 - XMLHttpRequest 和 Fetch API 教程

使用 JavaScript 发送 HTTP 请求：从 XMLHttpRequest 到 Fetch API

在现代 Web 开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互和构建动态应用的关键技能。本教程将带你了解两种常用的发送 HTTP 请求的方法：XMLHttpRequest 对象和 fetch 函数。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是浏览器内置的用于发送 HTTP 请求的传统方法。

**代码示例：**javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = xhr.responseText; console.log(response); }};xhr.send();

解释：

1. 创建一个 XMLHttpRequest 对象实例。2. 使用 open() 方法初始化请求，指定请求方法 ('GET'、'POST' 等)、目标 URL 和是否异步 (true 为异步)。3. 设置 onreadystatechange 事件处理程序，该程序在请求状态发生变化时触发。4. 在事件处理程序中，检查 readyState 属性是否为 4 (请求完成) 以及 status 属性是否为 200 (请求成功)。5. 如果请求成功，从 responseText 属性获取响应数据。6. 使用 send() 方法发送请求。

2. 使用 Fetch API

fetch 函数是更现代的发送 HTTP 请求的 API，它返回一个 Promise 对象，使代码更易于阅读和维护。

**代码示例：**javascriptfetch('https://api.example.com/data') .then(function(response) { return response.text(); // 可以根据响应类型使用其他方法，例如 json() }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log(error); });

解释：

1. 使用 fetch() 函数发起请求，传入目标 URL。2. fetch() 函数返回一个 Promise 对象，可以使用 .then() 方法链式处理响应。3. 第一个 .then() 方法接收 Response 对象，并使用 .text() 方法将其转换为文本格式 (也可以使用 .json() 等方法)。4. 第二个 .then() 方法接收解析后的响应数据。5. .catch() 方法用于捕获请求过程中出现的任何错误。

总结

XMLHttpRequest 和 fetch 都可以用于发送 HTTP 请求，但 fetch API 更简洁易用，并且更适合现代 JavaScript 开发。选择哪种方法取决于你的项目需求和个人偏好。