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

使用JavaScript发出HTTP请求是网页交互的核心。本文将介绍两种常用的方法：XMLHttpRequest对象和现代的fetch函数，并提供示例代码和详细说明。

使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是传统发送HTTP请求的方式，它提供了更大的灵活性和控制权。以下是一个使用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);
    console.log(response);
  }
};
xhr.send();

代码解释：

1. 创建一个XMLHttpRequest对象。
2. 使用open()方法初始化请求，指定请求方法('GET'), URL和是否异步(true)。
3. 设置onreadystatechange事件处理程序，当请求状态改变时触发。
4. 在事件处理程序中，检查readyState是否为4(请求完成)以及status是否为200(请求成功)。
5. 如果请求成功，解析响应数据并进行处理。
6. 使用send()方法发送请求。

使用fetch API发送HTTP请求

fetch API是更现代的发送HTTP请求的方式，它返回一个Promise对象，使用更简洁的语法。以下是一个使用fetch发送GET请求的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

代码解释：

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

发送其他类型的请求

以上示例都是发送GET请求，如果需要发送POST等其他类型的请求，可以通过设置请求方法和请求头来实现。

使用XMLHttpRequest发送POST请求：

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

使用fetch发送POST请求：

fetch('https://api.example.com/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。 XMLHttpRequest提供了更底层的控制，而fetch API则更简洁易用。 选择哪种方法取决于你的具体需求。