JavaScript 发出 HTTP 请求终极指南：XMLHttpRequest vs. Fetch

JavaScript 发出 HTTP 请求：掌握 XMLHttpRequest 和 Fetch

在网页开发中，经常需要使用 JavaScript 发送 HTTP 请求与服务器交互，获取或提交数据。本文将介绍两种常用的方法：XMLHttpRequest 对象和 Fetch API，并提供详细的代码示例，帮助你快速上手。

使用 XMLHttpRequest 对象发送请求

XMLHttpRequest 是传统的发送 HTTP 请求的方式，它提供了更大的灵活性和控制权。以下是使用 XMLHttpRequest 发送 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();

代码解析:

1. 创建一个 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，设置请求方法为 'GET'，目标 URL 为 'https://api.example.com/data'，第三个参数 true 表示异步请求。3. 监听 onreadystatechange 事件，在请求状态发生改变时触发回调函数。4. 在回调函数中，检查 readyState 属性是否为 4 (请求完成) 以及 status 属性是否为 200 (请求成功)。5. 如果请求成功，使用 JSON.parse() 解析响应数据。6. 使用 send() 方法发送请求。

使用 Fetch API 发送请求

Fetch API 是更现代的发送 HTTP 请求的方式，它提供了更简洁的语法和基于 Promise 的 API。以下是使用 Fetch 发送 GET 请求的示例：javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error('请求发生错误:', error); });

代码解析:

1. 使用 fetch() 方法发起请求，传入目标 URL。2. fetch() 方法返回一个 Promise 对象。3. 使用 .then() 方法处理成功的响应，response.json() 方法将响应解析为 JSON 格式。4. 在第二个 .then() 方法中，可以访问解析后的数据。5. 使用 .catch() 方法捕获请求过程中发生的错误。

总结

无论是 XMLHttpRequest 还是 Fetch API，都可以实现发送 HTTP 请求的功能。XMLHttpRequest 提供更细粒度的控制，而 Fetch API 更加简洁易用。请根据实际需求选择合适的方法。

提示: 记得将示例代码中的 URL 替换为你实际请求的目标地址。