JavaScript发送HTTP请求教程：XMLHttpRequest与Fetch API实战

在Web开发中，使用JavaScript发送HTTP请求是与服务器交互和动态更新网页内容的关键。本文将介绍两种常用的发送HTTP请求的方法：XMLHttpRequest对象和Fetch API。

1. 使用XMLHttpRequest对象

XMLHttpRequest对象是浏览器提供的原生API，允许您在JavaScript中发送HTTP请求。

以下是使用XMLHttpRequest对象发送GET请求的示例代码：

var 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();

代码解释：

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

2. 使用Fetch API

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

以下是使用Fetch API发送GET请求的示例代码：

fetch('https://api.example.com/data')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log('Error:', error);
  });

代码解释：

使用fetch()函数发送请求，传入请求URL。
fetch()函数返回一个Promise对象，可以使用.then()方法处理响应。
第一个.then()方法接收Response对象，并使用response.json()方法将其解析为JSON格式。
第二个.then()方法接收解析后的JSON数据。
.catch()方法用于捕获请求过程中的错误。

总结

本文介绍了两种常用的JavaScript发送HTTP请求的方法：XMLHttpRequest对象和Fetch API。XMLHttpRequest对象是传统的API，功能强大但使用起来较为繁琐。Fetch API则更加简洁易用，是现代Web开发中的首选方案。选择哪种方法取决于您的具体需求和项目环境。

希望本文能够帮助您了解如何在JavaScript中发送HTTP请求。如果您想了解更多关于XMLHttpRequest对象和Fetch API的详细信息，请参考相关的官方文档。

JavaScript发送HTTP请求教程：XMLHttpRequest与Fetch API实战