jquery - Django、ajax : how to live update a bunch of data effectively

Question

我正在创建一个模拟证券交易所市场的项目。我在一个大的 html <table> 上向用户公开股票数据其中每个 <tr>行有两个 <td>细胞。其中之一是公司的标志(即 AAPL)，另一个是当前的市值(再简单不过了)。

我现在所做的是使用这样的 JavaScript 函数:

<script type="text/javascript">

$(function(){
    setInterval(loadTable, 10000)
});

function loadTable(){
  $("#se_table").load("/load/table/?ajax&user={{user.username}}");
}

</script>

这是最好的方法吗？仅更改一个值时是否应该加载整个表？

Answer 1

首先，如果有人正忙于对表格执行某些操作(例如突出显示文本)，而当表格突然重新呈现时，这可能会导致糟糕的用户体验。如果必须重新加载所有数据，至少只更新发生更改的行。您可以通过 javascript 内置表操作或任意数量的 jQuery plugins 来实现此目的.

其次，如果计算上可行，那么如果您可以计算哪些行发生了更改并仅发送这些行，那么在数据传输和用户体验方面会更加高效。为表中的每一行分配一个全局唯一的id，这样您就可以使用 jQuery 轻松地仅更新该行。通过这种技术，还可以轻松添加一些特定行已更新的视觉提示，例如轻微的颜色变化，这通常很好(如果适用)。

我最喜欢做这类事情的方式(没有 Comet)如下:

1. 每 10 秒轮询一次页面，仅返回数据是否已更改。检查这一点比一直发送所有数据要有效得多。您只需要存储一个包含最后一个值更改时间的日期时间字段，并检查浏览器收到的最后一个日期时间(与请求一起发送)。
2. 如果已更改，请使用 jQuery 的 trigger 方法发送另一个 ajax 请求，这次需要一个自该日期时间以来已更改的行列表。
3. 更新受影响的行。

更新

根据您的评论，我将添加一些额外的注释。

1. 对于轮询，您可能会使用 jQuery .get()方法。你说你使用的是Django，所以我建议使用json，这意味着在你看来你将返回JSON数据。这是a simple tutorial让您开始。
2. 在成功的回调函数中，检查是否有从 Django View 返回的 bool 值的新数据，如果有，则调用一个函数，该函数进行新的 ajax 调用以检索相关数据(同样是一个 JSON 对象) )。
3. 使用此 JSON 对象，检查必须更新的每个项目，并使用 jquery text 函数或 jQuery 表插件之一来更新行。

如果您是新手，这会很拗口，而且需要大量谷歌搜索，但这是一种很好、干净的方法。