JavaScript发送HTTP请求：完整指南（附代码示例）

JavaScript发送HTTP请求：完整指南

想要用JavaScript与服务器交互并获取数据？你需要了解如何发送HTTP请求。本指南将带你学习两种常用的方法：XMLHttpRequest和Fetch API，并提供详细的代码示例。

使用`XMLHttpRequest`发送GET请求

XMLHttpRequest是一个强大的API，允许你控制请求的各个方面。以下是如何使用它发送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();

这段代码执行以下操作：

创建一个新的XMLHttpRequest对象。
使用open()方法初始化一个GET请求，目标URL为'https://api.example.com/data'，并将async设置为true以进行异步请求。
设置onreadystatechange事件处理函数，该函数在请求状态发生变化时被调用。
在事件处理函数中，检查readyState是否为4（请求完成）以及status是否为200（请求成功）。
如果请求成功，使用JSON.parse()方法将响应文本解析为JavaScript对象并打印到控制台。
最后，使用send()方法发送请求。

使用`Fetch API`发送GET请求

Fetch API提供了一种更简洁的方式来发送HTTP请求。以下是如何使用它发送相同的GET请求：

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

这段代码执行以下操作：

使用fetch()函数发送GET请求到'https://api.example.com/data'。
fetch()函数返回一个Promise，该Promise解析为Response对象。
使用then()方法链接一个函数，该函数将响应转换为JSON对象。
另一个then()方法链接一个函数，该函数接收解析后的JSON数据并将其打印到控制台。
使用catch()方法处理请求过程中发生的任何错误。

发送POST请求和其他请求类型

要发送POST请求或设置其他请求头，你需要修改XMLHttpRequest或Fetch API的调用方式。例如，要使用Fetch API发送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);
  });

这段代码与之前的GET请求示例类似，但是它添加了一个method属性设置为'POST'，并设置了headers和body来发送数据。

总结

你现在已经了解了如何使用JavaScript发送HTTP请求！你可以使用XMLHttpRequest或Fetch API来实现此目的，选择哪种方法取决于你的个人偏好和项目需求。请记住查阅相关文档以获取有关这些API的更多信息和高级用法。

JavaScript发送HTTP请求：完整指南（附代码示例）