如何按顺序依次调用AJAX以避免服务器过载？

你完全可以实现AJAX请求的串行执行，避免同时发起大量请求导致服务器过载，下面提供两种实用方案：

方案一：递归函数实现 #

先将后端的$data数组转换为前端可访问的JS数组，再通过递归函数逐个发起请求：

<script>
// 把后端数据转为前端数组
const urlList = @json($data);
const apiUrl = "/get-data-test-res";

// 递归处理请求
function processRequest(index) {
  // 所有请求处理完成则终止
  if (index >= urlList.length) return;

  $.ajax({
    url: apiUrl,
    data: { url: urlList[index] },
    type: "get"
  }).done(function(res) {
    // 更新对应DOM内容
    $(`.${index}`).html(res.title);
    // 处理下一个请求
    processRequest(index + 1);
  }).fail(function() {
    // 请求失败时的处理，这里选择继续下一个请求，可按需调整
    console.error(`第${index+1}个请求失败`);
    processRequest(index + 1);
  });
}

// 启动第一个请求
processRequest(0);
</script>

原理：递归函数每次仅处理一个请求，当前请求完成（成功或失败）后，再调用自身处理下一个请求，确保同一时间只有一个AJAX请求在运行。

方案二：Promise链式调用（现代JS写法） #

利用jQuery的$.ajax返回Promise对象的特性，通过reduce构建串行请求链：

<script>
const urlList = @json($data);
const apiUrl = "/get-data-test-res";

// 构建串行Promise链
urlList.reduce((chain, url, index) => {
  return chain.then(() => {
    return $.ajax({
      url: apiUrl,
      data: { url: url },
      type: "get"
    }).done(function(res) {
      $(`.${index}`).html(res.title);
    }).fail(function() {
      console.error(`第${index+1}个请求失败`);
    });
  });
}, Promise.resolve()); // 初始Promise，立即进入链式执行
</script>

原理：reduce从一个已完成的Promise开始，每个后续请求都等待前一个请求完成后才发起，实现严格的串行执行。

为什么之前的循环会导致过载？ #

你之前的循环会在页面加载时立即发起所有AJAX请求，浏览器会同时建立多个HTTP连接，服务器瞬间收到大量请求，超出处理能力导致过载；而串行请求是逐个处理，服务器压力会大幅降低。

内容的提问来源于stack exchange，提问作者sawyer