django,ajax:如何有效地更新一堆数据

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插件来实现此目的.

其次,如果它在计算上是合理的,那么如果您可以计算哪些行发生了变化,那么在数据传输和用户体验方面会更有效,并且只发送这些行.为表id中的每一行分配全局唯一,因此您可以使用jQuery轻松更新该行.使用这种技术,还可以轻松添加特定行已更新的某些视觉提示,例如轻微的颜色更改,这通常很好(如果适用).

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

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

更新

根据您的评论,我只需添加一些额外的注释.

1. 对于轮询,您可能会使用jQuery .get()方法.你说你正在使用Django,所以我建议使用json,这意味着在你的视图中你将返回JSON数据.这是一个简单的教程,可以帮助您入门.
2. 在成功的回调函数中,检查是否存在从Django视图返回的布尔值的新数据,如果存在,则调用一个函数进行新的ajax调用以检索相关数据(同样,JSON对象).
3. 使用此JSON对象,遍历每个必须更新的项目,并使用jquery text函数或其中一个jQuery表插件来更新行.

如果你是新手,这是相当满口的和大量的谷歌搜索,但这是一个很好,干净的方式.

Answer 2

广泛使用数据属性.在初始GET页面请求期间,让包含值的列看起来像:

<td data-for-symbol="GOOG">+256.00</td>

已经/load/table/?ajax&user={{user.username}}返回与包含自上次用户获取的表更新对象的JSON响应,然后单独应用它们:

$('td[data-for-symbol=' + obj.symbol + ']').text(obj.value);

不能比那更清洁.