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

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

在网页开发中，经常需要使用JavaScript发送HTTP请求与服务器进行数据交互。本文将介绍两种常用的发送HTTP请求的方式：XMLHttpRequest对象和Fetch API，并提供详细的代码示例和解释。

1. 使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是浏览器内置的用于发送HTTP请求的API。以下是一个使用XMLHttpRequest发送GET请求的示例：

const 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);
        // 处理返回的数据
    }
};
xhr.send();

代码解释：

1. 创建一个XMLHttpRequest对象。
2. 使用open()方法初始化请求，参数包括请求方法（'GET'）、请求URL和是否异步（true）。
3. 设置onreadystatechange事件处理函数，该函数在请求状态发生变化时被调用。
4. 在onreadystatechange事件处理函数中，检查readyState属性是否为4（请求已完成）以及status属性是否为200（请求成功）。
5. 如果请求成功，使用JSON.parse()方法将响应文本解析为JSON对象。
6. 使用send()方法发送请求。

2. 使用Fetch API发送HTTP请求

Fetch API是现代浏览器提供的一种更简洁、更灵活的发送HTTP请求的方式。以下是一个使用fetch函数发送GET请求的示例：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        // 处理返回的数据
    })
    .catch(error => {
        // 处理错误
    });

代码解释：

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

3. 发送其他类型的HTTP请求

以上示例演示了发送GET请求，如果需要发送其他类型的请求（例如POST请求），可以通过以下方式修改代码：

XMLHttpRequest:

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ key: 'value' }));

Fetch API:

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
})
    .then(response => response.json())
    .then(data => {
        // 处理返回的数据
    })
    .catch(error => {
        // 处理错误
    });

通过修改open()方法的第一个参数（XMLHttpRequest）或fetch()函数的第二个参数（Fetch API），可以设置请求方法。此外，还可以设置请求头、发送请求体等。

希望本文能够帮助您更好地理解如何使用JavaScript发送HTTP请求，并在实际开发中得心应手。