随着服务器端任务的进行，如何多次更新网页？答案

【问题标题】：How to update web page multiple times as server-side task progresses?随着服务器端任务的进行，如何多次更新网页？
【发布时间】：2026-01-07 20:25:02
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

您可以使用EventSource 将数据流式传输到浏览器。见*.com/questions/42512572/…、*.com/questions/42475492/…
我认为 EventSource 方法用于一遍又一遍地对服务器进行相同的调用（传递相同的参数）以获取更新。我看到的大多数示例都是获取服务器日期/时间。在这个用例中，IT 人员将转到该页面，选择一些服务器并发出 1 个请求来处理整个列表（一次）。
您可以使用Promise.all() 处理异步函数数组，并在所有Promise 传递完成或函数被调用或完成时返回响应数组。见*.com/questions/42180299/…
另见*.com/questions/31424561/…
也许我可以使用一个承诺，但 promise.all 听起来并不适用。完成所有任务后，我无需做任何事情。相反，我需要在每个服务器完成其任务时对页面进行更新。用户不想等到所有服务器都完成了请求的任务后才看到网页上的任何输出。

标签： javascript php lamp

【解决方案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);
     }
}

【讨论】：

【解决方案2】：

您可以为此使用两种技术。

1- websocket https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

2- 推送通知https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/

在 websocket 中，浏览器选项卡必须保持打开状态。在推送通知中没有。 Websocket支持很多浏览器，推送通知只有chrome和chromium。

【讨论】：

1.我得再调查一下。它将托管的站点是 Linux/Apache/PHP 5.4，因此不确定开箱即用支持什么或我可以升级什么。只支持桌面/Chrome 就可以了。
2.推送仅适用于移动应用程序吗？这里的用例是浏览器选项卡保持打开状态，直到所有服务器完成任务