JavaScript 发送 HTTP 请求教程：XMLHttpRequest 和 Fetch API 实例

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

想要在你的 JavaScript 项目中与服务器交互数据吗？发送 HTTP 请求是必不可少的技能！本文将为你介绍两种常用的方法：传统的 XMLHttpRequest 对象和现代的 Fetch API，并提供详细的代码示例和解释。

1. 使用 XMLHttpRequest 对象发送请求

XMLHttpRequest 对象是 AJAX 技术的核心，允许你以异步的方式发送 HTTP 请求，并在不刷新页面的情况下更新网页内容。以下是如何使用 GET 方法获取数据的示例：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 = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

代码解释:

1. 创建一个新的 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法 ('GET'), URL 和是否异步 (true)。3. 设置 onreadystatechange 事件处理函数，该函数在请求状态发生变化时被调用。4. 在事件处理函数中，检查 readyState (4 表示请求完成) 和 status (200 表示成功)。5. 如果请求成功，使用 JSON.parse() 解析响应数据。6. 使用 send() 方法发送请求。

2. 使用 Fetch API 发送请求

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式。它返回一个 Promise 对象，使你可以使用链式调用处理响应和错误。以下是使用 fetch() 函数获取数据的示例：javascriptfetch('https://api.example.com/data') .then(function(response) { if (response.ok) { return response.json(); } throw new Error('Network response was not ok.'); }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log('Error:', error.message); });

代码解释:

1. 使用 fetch() 函数发送请求，传入目标 URL。2. 使用 .then() 处理响应。如果 response.ok 为 true，则表示请求成功。3. 使用 response.json() 解析 JSON 响应数据。4. 如果 response.ok 为 false，则抛出一个错误。5. 使用 .catch() 处理错误。

总结

本文介绍了两种使用 JavaScript 发送 HTTP 请求的方法：XMLHttpRequest 和 Fetch API。Fetch API 语法更简洁，更易于使用，建议优先选择。

无论你选择哪种方法，都可以根据自己的需求进行修改，例如使用 POST 方法发送数据，设置请求头，处理不同类型的响应数据等。