HTML表格的差异AJAX更新？

Question

我有一个基于25x20HTML表(游戏板)的游戏。用户可以每隔3秒“移动”一次，这将向服务器发送一个AJAX请求，此时服务器将呈现整个HTML表并将其发送给用户。

这很容易编写，但它浪费了大量带宽。是否有任何库，客户端(最好是jquery)或服务器端，可以帮助为大型表发送差异更新而不是完整更新？通常一次重新加载只有5-10个瓦片改变，所以我觉得我可以通过每3秒发送这些瓦片而不是所有500个瓦片来减少带宽使用一个数量级。

我也对“你这个笨蛋，为什么要用超文本标记语言表格”的-type评论持开放态度，如果你能推荐一个更好的替代方案的话。例如，有没有什么CSS/DOM操作技术是我应该考虑的而不是使用HTML表？我是不是应该使用一个表格，给每个td坐标一个id (比如"12x08")，然后用jquery用id替换单元格？

需要说明的是:这些磁贴是文本，而不是图像。

Answer 1

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

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

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

这个模型可以是您通过ajax以JSON形式发送给服务器的“契约”。服务器计算相同的数组，并将其发送回UI。您可以将该数组呈现为表、div或您喜欢的任何形式。Prototype.js和jQuery使得创建动态超文本标记语言变得非常简单。

这种数组格式将比充满标记的整个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" }
]

压缩它(删除多余的空格等)，对其进行压缩，然后将其发送到您的Javascript。令人惊讶的是，读取它的Javascript代码并不是那么复杂(简单的DOM操作)。

Answer 3

不考虑增量：

您可以很容易地使用JSON来做这类事情。你也可以推出你自己的压缩格式。

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