我正在创建一个项目,模拟股票交易市场。我在一个很大的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>
这是最好的方法吗?当只有一个值改变时,我应该加载整个表吗?
发布于 2011-02-02 10:56:08
首先,当表格突然重新呈现时,如果有人忙于处理表格,比如突出显示文本,这可能会导致糟糕的用户体验。如果必须重新加载所有数据,则至少只更新已更改的行。你可以通过javascript内置的表操作或者任意数量的jQuery plugins来实现这一点。
其次,如果它在计算上是合理的,如果您可以计算哪些行发生了更改,并且只发送这些行,那么在数据传输和用户体验方面将会更加有效。为表中的每一行分配一个全局唯一的id
,因此您可以使用jQuery轻松地仅更新该行。使用这种技术,还可以很容易地添加特定行已更新的一些视觉提示,例如轻微的颜色更改,这通常很好(在适用的情况下)。
我最喜欢的这种方式(没有Comet)如下:
trigger
方法发送另一个ajax请求,这一次需要一个自该日期时间以来发生变化的行的列表。更新
根据您的评论,我将添加一些额外的注释。
text
函数或某个jQuery表插件来更新行。如果你是新手,这是一个相当冗长和大量的good搜索,但这是一个很好的,干净的方式。
发布于 2011-02-02 11:45:10
广泛使用data属性。在初始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);
没有比这更干净的了。
发布于 2011-02-02 11:09:29
您可以考虑使用websockets What browsers support HTML5 WebSocket API?
https://stackoverflow.com/questions/4873452
复制相似问题