HTML表的差异AJAX更新？

Question

我有一个基于25x20 HTML表格（游戏板）的游戏。用户可以每3秒“移动”一次。它向服务器发送一个AJAX请求，此时服务器重新呈现整个HTML表并将其发送给用户。

这很容易编写，但它浪费了很多带宽。是否有任何库，客户端（最好是jquery）或服务器端，有助于为大型表发送差异而不是完整更新？通常在给定的重新加载时只有5-10个磁贴发生变化，所以我觉得我可以通过仅发送这些磁贴而不是每3秒发送500个来减少一个数量级的带宽使用。

如果你能提出更好的选择，我也会对“你这个白痴，你为什么要使用HTML表格”这类评论持开放态度。例如，我应该考虑使用CSS / DOM操作技术而不是使用HTML表吗？我应该使用一个表但是给每个td坐标一个id（比如“12x08”），然后使用jquery用id替换单元格吗？

澄清：瓷砖是文字，而不是图像。

Answer 1

您可以将游戏板建模为多维javascript数组：

[[x0, x1, x2, x3 ... xn],
.....
.....]

每个条目都是一个表示一行的数组。每个单元格保存游戏块/方块的数值。

这个模型可以是“契约”。您通过ajax作为JSON发送到服务器。服务器计算相同的数组并将其发送回UI。您可以将该数组渲染为表格，div或任何您喜欢的内容。 Prototype.js和jQuery使得创建dhtml非常容易。

此数组格式将比带有标记的整个HTML响应小得多。它还可以让您以自己喜欢的方式自由渲染电路板。

您可以进一步压缩此格式并只发送增量。例如：保存用户更改的切片坐标并将其发送到服务器：

[(x1, y2),.....(xn, yn)]

或者你可以反过来做：将完整的模型数组发送到服务器，并让服务器计算增量。

查看Sponty，每隔几分钟左右观看一次ajax流量，我们会做类似的事情： http： //www.thesponty.com/ 客户端将完整模型发送到服务器，服务器发送差异。

Answer 2

如果您知道服务器端刷新之间的状态（请参阅问题评论），您可以使用JSON发送数据（不确定语法准确）：

[
    { x: 3, y: 5, class: "asdf", content: "1234" },
    { x: 6, y: 5, class: "asdf", content: "8156" },
    { x: 2, y: 2, class: "qwer", content: "1337" }
]

压缩（删除额外的空格等），gzip，并将其发送到您的Javascript。令人惊讶的是，阅读这个的Javascript代码并不复杂（只是DOM操作）。

Answer 3

不考虑增量：

您可以非常轻松地使用JSON来执行此类操作。您也可以推出自己的压缩格式。

我认为使用gzip压缩数据会有很大帮助。现在大多数浏览器都支持它，它会大大减少你的回复。