php - 使用多个 Ajax 调用更新页面内容，这些调用取决于先前调用的输出

Question

我需要使用按特定顺序调用的外部 php 脚本中的数据来更新页面内容。

页面上有许多 div，我想在其中放置通过 php 脚本 (getdata.php) 收集的数据。由于数据发生变化，因此会不断地不断收集数据。

问题是我需要以正确的顺序获取数据，因为每个调用都依赖于前一个调用的输出，所以

• 首先使用 getdata.php?id=1 获取 div1 的数据

• 回复将包含 data1 和 xid

• 在 div 1 中显示 data1 并

• 使用 getdata.php?id=xid(第一次调用的 id)获取 div 2 的数据

• 回复将包含 data2 和新的 xid2

• 在 div2 中显示 data2 并

• 使用 getdata.php?id=xid2(第二次调用的 ID)获取 div 3 的数据

• 等等

页面上的 div 数量可能有所不同，因此调用次数也可能有所不同。当页面第一次加载时，div 的数量是“已知的”，因此可以通过 onload javascript 调用发送

尝试使用 XMLHttpRequest 但无法使其同步工作

我也不确定这是否是一个好主意，因为如果同步，它可能会锁定浏览器，并且每次调用可能需要 10-15 秒

所以我认为最好的解决方案是使用标准异步 XMLHttpRequest 以便不锁定浏览器，然后在 onreadystatechange 函数中的 readState == 4 时启动下一个调用，但如何使其成为循环？

请指教

Answer 1

您不应该使用同步 XMLHttpRequest。这确实会使浏览器 UI 无响应。

您可以做的是在前一个请求的成功回调中调用一个新的 XMLHttpRequest。这实际上是一个接一个地链接 Ajax 请求的常见模式。

$.ajax({
   type: 'GET',
   url:  '/getdata.php?id=1',

   success: function (data) {
      // update div 1 ...

      $.ajax({
         type: 'GET',
         url:  '/getdata.php?id=' + data.id,

         success: function (data) {
            // update div 2 ...

            // and so on ...
         }
      });
   }
});

根据下面的评论，这是重构上述内容的一种方法，以便您可以“递归”多次重复该过程(在加载页面时确定)。

function callAjax (id, n) {
   $.ajax({
      type: 'GET',
      url:  '/getdata.php?id=' + id,

      success: function (data) {
         // update div
         $(data.id).text(data.content);

         // loop recursively
         if (n > 0) callAjax(data.id, n - 1);
      }
   });
}

callAjax(1, 50);  // this will start the process which will "loop" 
                  // for 50 times. The id of the first request 
                  // will be 1, and subsequent ones will be obtained
                  // from the previous request.