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

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

在web开发中，使用JavaScript发送HTTP请求是与服务器交互、获取数据和动态更新网页内容的关键。本文将介绍两种常用的发送HTTP请求的方法：XMLHttpRequest对象和Fetch API。

1. 使用XMLHttpRequest对象

XMLHttpRequest对象是浏览器内置的用于发送HTTP请求的API。以下是使用XMLHttpRequest对象发送GET请求的示例代码：javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://example.com/api/endpoint', 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. 如果请求成功，解析响应数据并进行处理。6. 使用send()方法发送请求。

其他请求方法和配置:

• open()方法的第一个参数可以是其他HTTP请求方法，例如'POST', 'PUT', 'DELETE'等。- 可以使用setRequestHeader()方法设置请求头，例如： javascript xhr.setRequestHeader('Content-Type', 'application/json'); - 对于POST请求，可以在send()方法中传递请求体数据。

2. 使用Fetch API

Fetch API是更现代化的发送HTTP请求的API，它返回Promise对象，使用更简洁。以下是使用fetch函数发送GET请求的示例代码：javascriptfetch('https://example.com/api/endpoint') .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log(error); });

代码解释:

1. 调用fetch()函数并传入请求URL，返回一个Promise对象。2. 使用.then()方法处理响应，第一个.then()方法解析响应数据 (例如，使用response.json()解析JSON数据)。3. 第二个.then()方法处理解析后的数据。4. 使用.catch()方法捕获和处理错误。

其他请求方法和配置:

• 可以使用fetch()函数的第二个参数配置请求，例如： javascript fetch('https://example.com/api/endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });

总结

XMLHttpRequest和Fetch API都是发送HTTP请求的有效方法，选择哪种方法取决于个人偏好和项目需求。 Fetch API更加简洁易用，而XMLHttpRequest提供了更细粒度的控制。