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

Question

大家晚上好， 这是我的第一个问题，我希望我最多已经在堆栈的存档中完成了搜索! 我需要通过查询 mysql 数据库来监视多个设备并收集一些信息。然后这些信息以 html 表格的形式呈现给运算符(operator)。

我编写了一个 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>

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

<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>

以上代码在wordpress环境中运行。

事实证明，当设备太多并且互联网连接速度不是那么快时，即使我大幅增加超时时间，脚本也会超时。所以第一次加载页面是不可能的...

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

我希望我已经足够详细地描述了我的问题。

目前我感觉自己走进了死胡同。 有人可以告诉我从哪里开始吗？

Answer 1

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

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

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

这主要是我会选择的路线，但您仍然需要做出一些决定，如果您需要精确地了解我的建议，请发表评论。