javascript - 如何随着服务器端任务的进展多次更新网页？

Question

我想创建一个页面，允许 IT 人员从列表中选择一些服务器并对其执行操作，然后单击“开始”。然后，页面上的文本区域会在每个操作完成时更新其状态。每个服务器维护任务可能需要一两分钟。他们希望在每台服务器完成所选任务时看到页面上的更新。

不确定在前端使用哪些技术。后端根本不是问题。我可以轻松获取服务器的完整列表，在每个服务器上执行操作，然后返回完整列表以及每个服务器的结果。但是，没有人愿意等待所有服务器完成后再获取更新。

通常我会使用 ajax 来更新页面的一部分，但这仅适用于单个调用/响应。我认为如果我使用 javascript 循环通过 ajax 为每个服务器调用 php 脚本，那么 javascript 循环将阻止 UI 更新，直到 javascript 函数完成。

有什么想法吗？

Answer 1

Jquery 有一个方法来执行异步 HTTP Ajax 请求 ( http://api.jquery.com/jquery.ajax )。创建一个递归 javascript 函数来进行 ajax 调用。获得服务器列表和用户在 UI 上选择的所需操作后，调用 RecursiveAjax 函数。对于每个结果，调用另一个函数来更新 UI。

function RecursiveAjax(serverArray, currentIndex, operation)
{
  var operationResult = "";
  $.ajax({
         type: "GET"
         url:  "ServerOperation.php",
         data: {Operation: operation, Server: serverArray[currentIndex]},
         success: function (result) {
             operationResult = JSON.stringify(result);
             UpdateUI(operationResult);
         }
     });
     var nextIndex = currentIndex + 1;
     if(nextIndex < serverArray.length) {
       RecursiveAjax(serverArray, nextIndex, operation);
     }
}