Javascript 使用php脚本的输出以非顺序方式更新表行

各位晚上好,， 这是我的第一个问题，我希望我已经在stack的存档中完成了我的搜索！！！ 我需要通过查询mysql数据库来监视几个设备，并收集一些信息。然后这些信息以html表格的形式呈现给操作员

我编写了一个php脚本，它从多维数组加载设备，在数组中循环，收集数据并创建表

表结构如下所示：

<table id="monitoring" class="rt cf">
  <thead class="cf">
    <tr>
      <th>Device</th>
      <th>Company</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
      <th>Data4</th>
      <th>Data5</th>
      <th>Data6</th>
      <th>Data7</th>
      <th>Data8</th>
      <th>Data9</th>
    </tr>
  </thead>
  <tbody>
    <tr id="Device1">
      <td>Devide 1 name</td>
      <td>xx</td>
      <td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="Device2">
      <td>Devide 1 name</td>
      <td>xx</td>
      <td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="DeviceN">
      <td>Devide 1 name</td>
      <td>xx</td>
      <td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

装置
单位
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
设备1名称
xx
设备1名称
xx
设备1名称
xx

当我第一次加载页面时，直接填充上表；然后，通过一个非常简单的函数，我每分钟更新一次此表，而不重新加载页面：

<script>

var auto_refresh = setInterval(
function() {
    jQuery("#monitoring").load('/overview.php').fadeIn("slow");

    var UpdateTime= new Date();
    var StrUpdateTime;
    StrUpdateTime= 
               ('0' + UpdateTime.getHours()).slice(-2) + ':'
             + ('0' + UpdateTime.getMinutes()).slice(-2) + ':'
             + ('0' + UpdateTime.getSeconds()).slice(-2);

    jQuery("#progress").text("Updated on: " + StrUpdateTime);
}, 60000);

</script>

var auto_refresh=setInterval(
函数（）{
jQuery（“#monitoring”）.load（'/overview.php'）.fadeIn（“slow”）；
var UpdateTime=新日期（）；
var-StrUpdateTime；
StrUpdateTime=
（'0'+UpdateTime.getHours（））.slice（-2）+'：'
+（'0'+UpdateTime.getMinutes（））.slice（-2）+'：'
+（'0'+UpdateTime.getSeconds（））.slice（-2）；
jQuery（“#progress”）.text（“更新日期：”+StrUpdateTime）；
}, 60000);

上述代码在wordpress环境中运行

结果表明，当设备太多且互联网连接速度不够快时，脚本会超时，即使我大幅增加了超时时间。所以即使是第一次加载页面也是不可能的

因此，我想更改我的代码，这样我就可以将每一行作为一个单独的实体处理，并有自己的刷新周期。因此，当用户第一次加载页面时，他看到n行（每个设备一行）带有ajax加载程序图像。。。然后一个更新周期应该为每一行独立启动，以便用户看到从每个数据库收集的数据。。。然后在脚本试图检索数据时使用ajax loader，然后在收集数据后使用ajax loader，或者出现一条错误消息，说明自xx:yy:zz小时以来无法收集数据。 因此，行更新应该在某种程度上独立于其他行，就像每个行更新是一个单独的封闭过程一样。因此，行更新不是从第一行到最后一行顺序进行的

我希望我已经详细说明了我的问题

现在我觉得我已经走到了死胡同。

---

有人能告诉我从哪里开始吗？

这里有两个问题：服务器对受监控服务的查询，以及前端用户页面和服务器之间的请求

您需要解决的第一个问题是服务器和不同服务之间的监控。您不应该在用户请求时调用每个服务。服务器应自行选择每隔x秒或分钟查询一次服务，并将此数据保存在自己的数据库中。然后，要将数据发送到客户机，该服务器只需要查询自己的数据库，这几乎应该立即完成。这项技术使您能够保留历史记录或在诊断故障时发送电子邮件

第二个问题是更新你的前端页面你有很多可能，但是你应该保持低请求数量。我建议您创建一个类似于通知的请求：您的ajax请求请求自上次请求以来的所有更新值（您在请求中发送时间戳），然后服务器用自上次请求以来更新的所有数据进行应答。收到响应后，您可以通过映射ID来更新表中收到的数据

---

这主要是我要走的路线，但你仍有一些决定要做，如果你需要我建议的精确性，请回复。

是的，祝贺你第一篇文章描述了一个很好的问题（这是一件罕见的事情；）。也许你陷入了一场争吵，让每一排的人都耳目一新听起来不是个好主意。。。我做了一个小调查，也许你可以调查一下，jQuery的和。你的请求不应该超时。可能需要升级服务器或进行一些优化？从长远来看，你试图做的不会解决问题。对不起，我本应该花一些时间来更好地描述我的系统，但我不想写下我的问题的大图表！：让我简单描述一下：想象一下脚本在Web服务器上运行；想象一下，它必须查询位于不同网络某处的许多嵌入式PC，每个PC都有自己的公共ip，通过这些ip提供不同的服务，例如CCTV。即使我将查询超时时间减少到3秒，如果我必须查询30多台嵌入式PC，这意味着脚本加载时间可能很容易提高到90秒以上……希望这能让我更轻松。