首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >django,ajax:如何有效地实时更新大量数据

django,ajax:如何有效地实时更新大量数据
EN

Stack Overflow用户
提问于 2011-02-02 18:45:13
回答 5查看 8K关注 0票数 4

我正在创建一个项目,模拟股票交易市场。我在一个很大的html <table>上向用户公开股票数据,其中每个<tr>行都有两个<td>单元格。一个是公司的标志(即AAPL),另一个是当前的市场价值(不能再简单了)。

我现在要做的是使用如下的javascript函数:

代码语言:javascript
代码运行次数:0
运行
复制
<script type="text/javascript">

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

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

</script>

这是最好的方法吗?当只有一个值改变时,我应该加载整个表吗?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-02-02 18:56:08

首先,当表格突然重新呈现时,如果有人忙于处理表格,比如突出显示文本,这可能会导致糟糕的用户体验。如果必须重新加载所有数据,则至少只更新已更改的行。你可以通过javascript内置的表操作或者任意数量的jQuery plugins来实现这一点。

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

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

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

更新

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

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

如果你是新手,这是一个相当冗长和大量的good搜索,但这是一个很好的,干净的方式。

票数 10
EN

Stack Overflow用户

发布于 2011-02-02 19:45:10

广泛使用data属性。在初始GET页面请求期间,使包含值的列如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<td data-for-symbol="GOOG">+256.00</td>

/load/table/?ajax&user={{user.username}}返回一个JSON响应,其中包含自用户上次获取表以来的更新的对象,然后逐个应用它们:

代码语言:javascript
代码运行次数:0
运行
复制
$('td[data-for-symbol=' + obj.symbol + ']').text(obj.value);

没有比这更干净的了。

票数 5
EN

Stack Overflow用户

发布于 2011-02-02 19:09:29

您可以考虑使用websockets What browsers support HTML5 WebSocket API?

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4873452

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档