JavaScript发送HTTP请求：XMLHttpRequest和Fetch API详解

如何用JavaScript发送HTTP请求？

在Web开发中，经常需要使用JavaScript发送HTTP请求来获取或发送数据。JavaScript提供了两种主要的API来实现这一目标：传统的XMLHttpRequest对象和现代的Fetch API。

1. 使用XMLHttpRequest对象

XMLHttpRequest对象允许您在不刷新页面的情况下，通过JavaScript发送HTTP请求和接收响应。

以下是使用XMLHttpRequest发送GET请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true); // 设置请求方法、URL和异步标志

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和是否异步（true）。3. 设置onreadystatechange事件处理程序，该程序在请求状态发生变化时触发。4. 在事件处理程序中，检查readyState是否为4（请求完成）以及status是否为200（请求成功）。5. 如果请求成功，使用JSON.parse()解析响应数据。6. 使用send()方法发送请求。

2. 使用Fetch API

Fetch API提供了一种更简洁、更现代的发送HTTP请求的方式。它使用Promise来处理异步操作，使代码更易于阅读和维护。

以下是使用fetch()发送GET请求的示例：javascriptfetch('https://api.example.com/data') .then(response => response.json()) // 解析响应数据 .then(data => console.log(data)) .catch(error => console.log(error));

代码解释:

1. 使用fetch()函数发起请求，并传入请求URL。2. fetch()函数返回一个Promise对象。3. 使用.then()方法处理成功响应，并使用response.json()解析JSON数据。4. 使用另一个.then()方法处理解析后的数据。5. 使用.catch()方法捕获并处理任何错误。

总结

XMLHttpRequest和Fetch API都可以用于发送HTTP请求。Fetch API更加现代，使用Promise提供了更简洁的语法，建议在项目中优先使用。 但是，XMLHttpRequest仍然被广泛使用，尤其是在需要支持旧版浏览器的项目中。

无论您选择哪种方法，了解如何使用JavaScript发送HTTP请求都是Web开发中的一个重要技能。