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

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

在Web开发中，经常需要使用JavaScript发送HTTP请求与服务器交互，例如获取数据、提交表单等。本文将介绍两种常用的方法：传统的XMLHttpRequest对象和现代的Fetch API，并提供示例代码帮助你快速上手。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest对象是浏览器内置的用于发送HTTP请求的API。以下是使用XMLHttpRequest发送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请求的API，它提供了更简洁、更语义化的语法。以下是使用fetch函数发送GET请求的示例：javascriptfetch('https://api.example.com/data') .then(function(response) { if (response.status === 200) { return response.json(); } else { throw new Error('Error: ' + response.status); } }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log(error); });

代码解释：

1. 调用fetch()函数并传入请求URL，返回一个Promise对象。2. 使用.then()方法处理响应。第一个.then()方法接收一个Response对象，检查响应状态码是否为200，如果是则调用response.json()方法解析JSON数据，否则抛出一个错误。3. 第二个.then()方法接收解析后的数据，并将其打印到控制台。4. 使用.catch()方法捕获任何错误并将其打印到控制台。

3. 修改请求方法和设置请求头

以上示例演示了如何发送GET请求，你也可以根据需要修改请求方法（POST、PUT等），设置请求头，发送数据等。

例如，要发送POST请求并设置请求头，可以使用以下代码：javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}).then(response => { // 处理响应}).catch(error => { // 处理错误});

总结

本文介绍了使用JavaScript发送HTTP请求的两种常用方法：XMLHttpRequest对象和Fetch API。XMLHttpRequest是传统的API，功能强大但使用较为复杂；Fetch API语法更简洁易懂，推荐在现代浏览器中使用。选择哪种方法取决于你的项目需求和个人偏好。