Differential AJAX-updates für die HTML-Tabelle?

Question

Ich habe ein Spiel, basierend auf einem 25x20 HTML-Tabelle (der Spielplan).Alle 3 Sekunden, der Benutzer kann "move", das sendet eine AJAX-Anforderung an den server, zu welcher Zeit die server rerenders die gesamte HTML-Tabelle und sendet es an den Benutzer.

Das war leicht zu schreiben, aber es verschwendet viel Bandbreite.Gibt es irgendwelche Bibliotheken, client (vorzugsweise jquery) oder server-Seite, die helfen, senden differential anstelle von vollständigen updates für große Tabellen?In der Regel nur 5-10 Kacheln ändern, auf einen bestimmten laden, also habe ich das Gefühl, ich könnte cut Bandbreite um ein Vielfaches durch das senden diese Fliesen anstatt alle 500 alle 3 Sekunden.

Ich bin auch offen für "du idiot, warum bist du der Verwendung von HTML-Tabellen"-geben Sie Anmerkungen ein, wenn Sie vorschlagen können, eine bessere alternative.Zum Beispiel gibt es CSS/DOM-manipulation-Techniken sollte ich in Betracht ziehen, anstatt eine HTML-Tabelle?Sollte ich eine Tabelle verwenden, aber geben Sie jedem td Koordinaten für eine id (wie "12x08") und verwenden Sie dann jquery, um zu ersetzen, die Zellen-id?

Eine Klarstellung:die Fliesen sind text, keine Bilder.

Answer 1

Sie können Modell Ihr Spiel board als ein multidimensionales javascript-array:

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

jeder Eintrag ist ein array mit einer Zeile.Jede Zelle enthält den numerischen Wert des Spiels Stück/Quadratmeter.

Dieses Modell lässt sich der "Vertrag", die Sie senden, um den server per ajax als JSON.Der server berechnet die gleiche array und sendet Sie zurück auf die Benutzeroberfläche.Sie können render-array in eine Tabelle, divs oder was auch immer Sie mögen.Prototype.js und jQuery erstellen dhtml super einfach.

Diese array-format wesentlich kleiner als eine gesamte HTML-Antwort beladen mit markup.Es gibt Ihnen auch die Freiheit, zu machen die Bord in welcher Weise auch immer Sie möchten.

Sie können weiter komprimieren dieses format und senden Sie einfach die deltas.Zum Beispiel:speichern Sie die Koordinaten der Kacheln geändert durch den Benutzer und schickt diese an den server:

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

Oder Sie können es tun, die andere Weise herum:senden Sie die komplette Modell-array auf dem server, und der server berechnet die deltas.

Check out Sponty, und beobachten Sie die ajax-Verkehr, alle paar Minuten oder so, wir tun etwas sehr ähnliches: http://www.thesponty.com/ Der client sendet die vollständige Modell an den server und der server sendet die diffs.

Answer 2

Wenn Ihnen bekannt ist der Staat zwischen den Aktualisierungen, die auf der server-Seite (siehe Kommentar auf die Frage), Sie einer senden Sie die Daten in der JSON-so (nicht sicher über die genaue syntax):

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

Kompakte, dass die (entfernen Sie zusätzliche Leerzeichen, etc.), gzip und schicken Sie es zu Ihrem Javascript.Überraschend, den Javascript-code zu Lesen, ist dies nicht weiter kompliziert (einfache DOM-Manipulationen).

Answer 3

Ohne nachzudenken deltas:

Sie können JSON verwenden sehr leicht zu tun diese Art der Sache.Sie können das roll-out Ihrer eigenen komprimierten format, zu.

Ich denke, die Daten komprimieren mit gzip würde helfen, eine Menge.Die meisten Browser heutzutage, und es wird erheblich reduzieren Sie die Größe von Ihre Antworten.