JavaScript 发送 HTTP 请求教程：从 XMLHttpRequest 到 Fetch

JavaScript 发送 HTTP 请求教程：从 XMLHttpRequest 到 Fetch

想要在你的 JavaScript 项目中与服务器交互并动态更新内容？你需要掌握发送 HTTP 请求的技巧！本文将带你学习如何使用 JavaScript 发送 HTTP 请求，涵盖传统的 XMLHttpRequest 对象以及更现代的 Fetch API。

使用 XMLHttpRequest 发送请求

XMLHttpRequest 对象是 AJAX 技术的核心，它允许你发送异步 HTTP 请求。以下是一个使用 XMLHttpRequest 发送 GET 请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); // 解析并输出数据 } else { console.error('请求失败:', xhr.status); }};xhr.onerror = function() { console.error('请求出错');};xhr.send();

在这个例子中：

1. 我们创建了一个 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法和 URL。3. 使用 onload 事件处理成功的响应，并检查状态码。4. 使用 onerror 事件处理请求错误。5. 最后，使用 send() 方法发送请求。

使用 Fetch API 发送请求

Fetch API 提供了更简洁、更现代的发送 HTTP 请求的方式。以下是使用 fetch 发送 GET 请求的示例：javascriptfetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('请求失败: ' + response.status); } return response.json(); // 解析 JSON 数据 }) .then(data => { console.log(data); }) .catch(error => { console.error('请求出错:', error); });

在这个例子中：

1. 我们使用 fetch 函数发送 GET 请求。2. 使用 .then 方法处理响应，并检查响应是否成功。3. 使用 response.json() 方法将响应解析为 JSON 数据。4. 使用 .catch 方法捕获并处理请求错误。

总结

无论是使用 XMLHttpRequest 还是 Fetch API，发送 HTTP 请求都是 Web 开发中必不可少的技能。 Fetch API 提供了更简洁和现代的语法，而 XMLHttpRequest 则提供了更细粒度的控制。选择哪种方法取决于你的项目需求。

请记住，以上代码示例仅供参考，实际应用中你需要根据具体 API 和数据结构进行调整。