JavaScript 发起 HTTP 请求：XMLHttpRequest 与 Fetch API 教程

在现代 Web 开发中，使用 JavaScript 发起 HTTP 请求获取数据或与服务器交互至关重要。本文将介绍两种常用的方法：传统的 XMLHttpRequest 对象和更现代的 fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象允许您在 JavaScript 中创建异步 HTTP 请求。以下是使用 GET 方法发送请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

这段代码执行以下操作：

创建一个新的 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法 ('GET'), URL 和是否异步 (true)。3. 设置 onreadystatechange 事件处理程序，该程序在请求状态发生变化时执行。4. 检查 readyState 是否为 4（请求完成）以及 status 是否为 200（请求成功）。5. 如果请求成功，将响应解析为 JSON 格式并打印到控制台。6. 使用 send() 方法发送请求。

使用 fetch 函数

fetch API 提供了一种更简洁、更易于使用的发送 HTTP 请求的方式。以下是使用 fetch 获取数据的示例：javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error));

这段代码执行以下操作：

使用 fetch() 函数发起 GET 请求。2. 使用 .then() 方法处理响应。3. 第一个 .then() 将响应解析为 JSON 格式。4. 第二个 .then() 打印解析后的数据到控制台。5. .catch() 方法捕获并处理请求过程中发生的任何错误。

总结

XMLHttpRequest 和 fetch API 都允许您在 JavaScript 中发送 HTTP 请求。fetch API 提供了更现代、更简洁的语法，并基于 Promise，使其更易于处理异步操作。选择哪种方法取决于您的项目需求和个人偏好。

注意事项

以上示例仅演示了简单的 GET 请求。您还可以使用其他 HTTP 方法（如 POST，PUT，DELETE）发送数据。* 在实际应用中，您可能需要添加请求头、处理错误、设置超时等操作。* 确保您的 API 请求符合跨域资源共享 (CORS) 策略，以避免浏览器阻止您的请求。

JavaScript 发起 HTTP 请求：XMLHttpRequest 与 Fetch API 教程