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

Jquery django,ajax:如何有效地实时更新大量数据,jquery,ajax,Jquery,Ajax,我正在创建一个模拟证券交易市场的项目。我在一个大的html上向用户公开股票数据,其中每一行有两个单元格。其中一个是公司的象征(即AAPL),另一个是当前的市场价值(再简单不过了) 我现在要做的是使用如下javascript函数: <script type="text/javascript"> $(function(){ setInterval(loadTable, 10000) }); function loadTable(){ $("#se_table").load

我正在创建一个模拟证券交易市场的项目。我在一个大的html
上向用户公开股票数据,其中每一行有两个
单元格。其中一个是公司的象征(即AAPL),另一个是当前的市场价值(再简单不过了)

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

<script type="text/javascript">

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

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

</script>

$(函数(){
设置间隔(可加载,10000)
});
函数loadTable(){
$(“#se_table”).load(“/load/table/?ajax&user={{user.username}”);
}

这是最好的方式吗?当仅更改一个值时,是否应加载整个表

网页如何知道是否只有一个值已更改?这将涉及获取所有数据,然后将新数据与当前数据进行比较,然后设置单元格内容。当你这样做的时候,也许载入整个表格会更快

表格加载是否会导致任何明显的问题,如浏览器重新格式化时页面闪烁?我会一直坚持。直到它成为一个问题。但还有更多


您看过jQuery插件表的各种增强功能吗?jQuery中包含了各种各样的魔法,用于排序、过滤、从源中获取数据等等。学习如何使用这些功能并用类似的东西开始你的项目总是比手工完成然后在你意识到你想要所有这些功能后再转换它更容易。用谷歌搜索“jquery表格”或者“数据”或者“ajax”,你会发现一些东西。

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

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

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

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

    根据你的评论,我只想补充几点

  • 对于轮询,您可能会使用jQuery方法。您说过您正在使用Django,所以我建议使用json,这意味着在您的视图中,您将返回json数据。让你开始吧
  • 在成功的回调函数中,检查是否有从Django视图返回的带有布尔值的新数据,如果有,则调用一个函数来进行新的ajax调用以检索相关数据(同样是JSON对象)
  • 使用此JSON对象,检查每个必须更新的项,并使用jquery
    text
    函数或jquery表插件之一更新行

  • 如果你是新手,这是一个相当多的口吃和大量的谷歌搜索,但这是一个很好的、干净的方法。

    当“引发事件”中的值发生变化并编写类似的处理程序时

    $("td").live("yourCustomTrigger",function(){
    
    var $td=$(this);
    $("$td").val("updated value")
    //here update your td only
    
    })
    
    但是你仍然需要弄清楚一些问题,比如如何确定td中的值已经改变??正如Spacedman所指出的那样


    有一些有用的插件

    可以考虑使用WebSosiks

    属性的广泛使用。在最初的

    GET
    页面请求期间,让包含值的列看起来像:

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

    再干净不过了。

    谢谢。JSON不是我知识的一部分。你说的似乎很有趣。我会读更多关于它的内容。你知道如何检查数组中是否有新值吗?您是检查服务器端还是客户端?非常感谢你。表中的数据将从数据库中提取。每个都有自己的时间戳,所以我可能会使用一个请求参数来保存用户加载页面的时间戳,然后我会比较这些时间戳。然而,我的问题是这句话“每10秒轮询一次页面,该页面仅在数据发生变化时返回”。例如,我只知道如何将.load()与jQuery一起使用来更改div元素的内容。我想我需要读更多关于这个…完美的答案!任何地方有更实用的指南来指导如何做到这一点?
    $('td[data-for-symbol=' + obj.symbol + ']').text(obj.value);