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

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

在Web开发中，经常需要使用JavaScript发送HTTP请求，与服务器进行数据交互。本文将介绍两种常用的发送HTTP请求的方法：传统的XMLHttpRequest对象和现代的Fetch API。

1. 使用XMLHttpRequest对象

XMLHttpRequest对象是浏览器提供的用于发送HTTP请求的传统方法。

**代码示例：**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和是否异步（true）。3. 设置onreadystatechange事件处理函数，该函数在请求状态发生改变时被调用。4. 在事件处理函数中，检查readyState属性是否为4（请求已完成）以及status属性是否为200（请求成功）。5. 如果请求成功，使用JSON.parse()方法将响应解析为JSON格式，并进行后续处理。6. 使用send()方法发送请求。

2. 使用Fetch API

Fetch API是现代浏览器提供的一种更简洁、更灵活的发送HTTP请求的方式。

**代码示例：**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对象，可以使用then()方法链式调用处理响应。3. 第一个then()方法接收Response对象，并使用json()方法将响应解析为JSON格式。4. 第二个then()方法接收解析后的JSON数据，并进行后续处理。5. catch()方法用于捕获请求过程中的错误。

总结

本文介绍了使用JavaScript发送HTTP请求的两种方法：XMLHttpRequest对象和Fetch API。 Fetch API更加简洁易用，建议优先使用。根据实际需求选择合适的方法，可以更有效地进行网络数据交互。