django，ajax：如何有效地实时更新一堆数据

Posted 2023-02-23

【中文标题】django，ajax：如何有效地实时更新一堆数据

【英文标题】：django, ajax: how to live update a bunch of data effectively

【发布时间】：2011-06-19 21:30:13

【问题描述】：

我正在创建一个模拟证券交易所市场的项目。我在一个大的 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>

这是最好的方法吗？当只更改一个值时，我应该加载整个表吗？

【参考方案1】：

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

表格加载是否会导致任何明显的问题，例如浏览器重新格式化时页面闪烁？我会坚持使用 .load 直到它成为问题。但还有更多……

您是否见过广泛的 jQuery 插件表增强功能？ jQuery 中包含了各种魔法，用于排序、过滤、从源中获取数据等等。学习如何使用这些并以类似的方式开始您的项目总是更容易，而不是手动完成，然后在您意识到自己喜欢所有这些功能时进行转换。谷歌搜索“jquery table”，也许还有“data”或“ajax”，你会发现一些东西。

【参考方案2】：

首先，如果有人忙于对表格做一些事情，例如突出显示文本，而突然重新渲染，这可能会导致糟糕的用户体验。如果您必须重新加载所有数据，至少只更新更改的行。您可以使用 javascript 内置表格操作或任意数量的 jQuery plugins 来实现此目的。

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

我最喜欢做这种事情的方式（没有彗星）如下：

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

更新

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

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

如果您不熟悉此功能，这将是一大堆内容并且需要大量的谷歌搜索，但这是一种很好、干净的方式。

【讨论】：

非常感谢。表中的数据将从数据库中获取。每个都有自己的时间戳，所以我可能会使用一个请求参数来保存用户加载页面的时间戳，然后我将比较这些时间戳。但是我的问题是这句话“每 10 秒轮询一次只返回数据是否已更改的页面”。你看，我只知道如何使用 .load() 和 jQuery 来更改 div 元素的内容。我想我需要阅读更多关于这方面的内容..

完美答案！任何地方有关于如何做到这一点的更实用的指南？

【参考方案3】：

当值发生变化时引发事件.trigger() 并编写类似的处理程序

$("td").live("yourCustomTrigger",function()

var $td=$(this);
$("$td").val("updated value")
//here update your td only

)

但是您仍然需要弄清楚一些问题，例如如何确定 td 中的值已更改？正如 Spacedman

所指出的

here 是一些有用的插件

【参考方案4】：

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

【参考方案5】：

广泛使用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);

再干净不过了。

【讨论】：

谢谢。 JSON 不是我知识的一部分。你说的似乎很有趣。我会阅读更多关于它的内容。

关于如何检查数组中是否有新值的任何想法？你检查它是服务器端还是客户端？谢谢