JavaScript发送HTTP请求教程：XMLHttpRequest和Fetch API实战指南

JavaScript发送HTTP请求：从XMLHttpRequest到Fetch API

想要在你的JavaScript项目中与服务器交互、获取数据？掌握发送HTTP请求是必不可少的技能。本文将为你详细介绍两种常用的方法：XMLHttpRequest和Fetch API，并提供简洁易懂的代码示例，帮助你快速上手。

方法一：使用XMLHttpRequest对象

XMLHttpRequest是传统的发送HTTP请求的方式，尽管现在Fetch API越来越流行，但XMLHttpRequest仍然被广泛使用。

**示例代码：**javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'http://example.com/api/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/POST等）、请求URL和是否异步。3. 设置onreadystatechange事件处理函数，该函数会在请求状态发生改变时被调用。4. 在事件处理函数中，检查readyState是否为4（请求完成）以及status是否为200（请求成功）。5. 如果请求成功，则使用responseText属性获取响应数据，并使用JSON.parse()将其转换为JavaScript对象。6. 使用send()方法发送请求。

方法二：使用Fetch API

Fetch API是现代浏览器提供的更简洁、更易用的发送HTTP请求的方式。

**示例代码：**javascriptfetch('http://example.com/api/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对象，使用response.json()方法将其转换为JavaScript对象。4. 第二个.then()方法接收解析后的数据。5. 使用.catch()方法捕获并处理请求过程中发生的错误。

发送POST请求

发送POST请求时，需要在xhr.open()或fetch()中指定请求方法为'POST'，并在xhr.send()或fetch()中传递请求体数据。

**XMLHttpRequest示例：**javascriptxhr.open('POST', 'http://example.com/api/data', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify({ key: 'value' }));

**Fetch API示例：**javascriptfetch('http://example.com/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error));

总结

本文介绍了使用JavaScript发送HTTP请求的两种常用方法：XMLHttpRequest和Fetch API。建议优先使用Fetch API，因为它更简洁易用，但也需要了解XMLHttpRequest以备不时之需。请根据实际需求选择合适的方法，并根据具体情况处理错误、设置请求头等。