AJAX 快速发起多个AJAX请求的方法

在本文中，我们将介绍如何使用AJAX快速发起多个AJAX请求。AJAX（Asynchronous JavaScript and XML）是一种在网页中实现异步通信的技术，可以使网页在不刷新的情况下与服务器进行数据交换并更新部分页面内容。通过使用AJAX，我们可以有效地提高网页的响应速度和用户体验。

阅读更多：AJAX 教程

使用Promise对象管理多个AJAX请求

在传统的AJAX请求中，我们需要使用回调函数来处理每个请求的响应数据。当需要发起多个AJAX请求时，会出现多层嵌套回调函数，导致代码难以阅读和维护。而使用Promise对象可以很好地解决这个问题。

以下是一个使用Promise对象管理多个AJAX请求的示例代码：

function getData(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(new Error("Network error"));
    };
    xhr.send();
  });
}

Promise.all([
  getData("https://api.example.com/data1"),
  getData("https://api.example.com/data2"),
  getData("https://api.example.com/data3")
])
  .then(function(results) {
    // 处理三个请求的响应数据
    var data1 = results[0];
    var data2 = results[1];
    var data3 = results[2];
    console.log(data1, data2, data3);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的示例中，我们定义了一个名为getData的函数，用于发起一个AJAX请求，并返回一个Promise对象。在Promise.all方法中传入一个包含多个Promise对象的数组，这些Promise对象分别代表了多个AJAX请求。当所有的请求都成功返回时，.then方法会被触发，并将响应数据传递给回调函数进行处理。如果有任何一个请求失败，.catch方法会被触发，错误信息将被传递给回调函数。

这种方式可以很方便地管理多个AJAX请求，使代码更加简洁、可读性更高。

使用async/await简化异步代码

除了Promise对象，我们还可以使用async/await语法来简化异步代码。async函数是异步函数的一种声明方式，它可以使函数内部的操作变得更加具有同步的代码风格。

以下是一个使用async/await发起多个AJAX请求的示例代码：

async function getData() {
  try {
    var data1 = await getData("https://api.example.com/data1");
    var data2 = await getData("https://api.example.com/data2");
    var data3 = await getData("https://api.example.com/data3");
    console.log(data1, data2, data3);
  } catch (error) {
    console.error(error);
  }
}

getData();

在上面的示例中，我们定义了一个名为getData的async函数。在函数内部，我们使用await关键字来等待一个AJAX请求的返回结果，然后将结果赋值给相应的变量。如果请求成功，后面的代码会继续执行；如果请求失败，就会抛出一个错误，被catch代码块捕获并处理。

使用async/await可以使异步代码的编写更加简单和顺序化，更像编写同步代码一样，减少了回调函数的层级。