JavaScript发送HTTP请求指南：从 XMLHttpRequest 到 Fetch

想要在你的JavaScript应用中与服务器交互、获取数据或发送更新吗？你需要掌握发送HTTP请求的技巧。本指南将带你了解两种常用的方法：传统的 XMLHttpRequest 对象和现代的 Fetch API。

使用 XMLHttpRequest 发送请求

XMLHttpRequest 对象是 AJAX 应用的基石。让我们看一个使用它发送 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 (完成) 且状态码为 200 (成功) 时处理响应。4. 使用 send() 方法发送请求。

使用 Fetch API 发送请求

Fetch API 提供了更简洁、更现代的发送请求的方式。以下是使用 Fetch 发送 GET 请求的例子：javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error(error); });

代码解析：

调用 fetch() 函数，传入目标URL。2. fetch() 返回一个 Promise，使用 .then() 方法处理成功响应。3. 使用 response.json() 将响应解析为 JSON 格式。4. 使用 .catch() 方法捕获并处理错误。

总结

无论是使用 XMLHttpRequest 还是 Fetch API，你都可以轻松地使用 JavaScript 发送 HTTP 请求。选择哪种方法取决于你的项目需求和编码风格。记住，这只是 HTTP 请求的冰山一角，还有许多高级主题需要探索，例如：

发送 POST 请求和处理表单数据* 设置请求头* 处理不同类型的响应* 错误处理和超时机制

希望本指南能帮助你开启 JavaScript HTTP 请求的大门！

JavaScript发送HTTP请求指南：从 XMLHttpRequest 到 Fetch