Browsen mit Pfiff

Teil 5: Ajax Tipps und Tricks

Sie entwickeln eine Internet-Applikation, mit der Sie eine virtuelle Postkarte mit eigenen Bildern und Texten füllen und verschicken. Ähnlich könnte ein Planungswerkzeug für räumlich oder zeitlich verstreute Mitarbeiter eines Teams funktionieren, selbst grafische Wikis lassen sich so realisieren.

Ajax Tipps und Tricks

© Archiv

Die erste Stufe muss noch ohne Back- und Forward-Button und somit ohne UNDO/REDO auskommen. Der Anwender kann also nur auf den letzten Stand seiner Postkarte zugreifen. Sie stricken also das funktionelle Grundgerüst der Anwendung zusammen, behalten aber die Anforderung im Hinterkopf, im nächsten Schritt Ihre Anwendung um UNDO und REDO zu erweitern.

Es bietet sich an, die Bilder, Texte, Objekt-Positionen und -Größen (später zusätzliche Objekt- Eigenschaften wie Farbe, Schriftgröße etc.) auf dem Server zu speichern und über eine Postkartennummer (ähnlich einer Session- ID) in der URL darzustellen. Dann können Sie den letzten Stand der Postkarte als Bookmark speichern und die Karte über die Weitergabe der URL per E-Mail verschicken.

Ajax Tipps und Tricks

© Archiv

Drag&Drop: Im Test-Beispiel ziehen Sie Bilder aus der Toolbox mit der Maus in die Postkarte.

In der ersten Stufe ziehen Sie die laufende Arbeit an der Applikation ständig per AJAX auf dem Server mit, d.h. jede Veränderung im Browser schicken Sie auch an den Server, der sein Spiegelbild der Browser-Applikation entsprechend auf dem Laufenden hält. So können Sie die Arbeit jederzeit unterbrechen. Wenn Sie die Seite neu vom Server laden, erhalten Sie den letzten Stand.

Die zweite Ausbaustufe (im folgenden AJAXArtikel) wird dann auf dem Server alle Änderungen hintereinander speichern. Das bedeutet, dass Sie auf dem Server ein Änderungs- Journal führen. Da Sie bei jeder Änderung vorher und nachher speichern, lassen sich die UNDO- und REDO-Funktionen leicht einbauen. Mit UNDO gehen Sie die vorher- Daten schrittweise rückwärts, und für REDO nehmen Sie die nachher-Werte der Einzel- Änderungen eine nach der anderen. Sie müssen dann noch die Verarbeitungs-Historie auf dem Browser wie erläutert so nachvollziehen, dass Sie sich per Back- und Forward- Button auf der Änderungs-Zeitlinie bewegen können.

Dazu werden Sie dann den zuvor beschriebenen Hash der URL benutzen. Sie betreten dabei (fast) jungfräuliches technisches Neuland, selbst so umfangreiche Spiel-Beispiele wie ajaxWrite, die schon ein eigenes UNDO und REDO realisiert haben, steuern das nicht über den Back- und Forward-Button des Browsers. Daher muss ajaxWrite auch die Standard-Toolbar desBrowsers ausblenden.

Mehr zum Thema

Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Whatsapp auf PC
Mit oder ohne Download

Mit Whatsapp Web oder der Whatsapp Desktop-App nutzen Sie den Messenger bequem am PC. Wir erklären Download, Installation und Einrichtung.
Spam-Mails
6 Tipps gegen E-Mail Betrug

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing E-Mails erkennen und sich schützen.
DSL-Symbolbild
Umzug, Ausfall & Co.

Sie wollen Ihren Provider für Internet und Telefon wechseln? Wir verraten, welche Rechte Sie bei Ausfall, Unterbrechung und Umzug haben.
Steve Jobs - Film
Vorschau auf Film- und Serien-Highlights

Amazon Prime Video lockt im Juli 2017 mit Film-Highlights wie "The Expandables 3", "Steve Jobs" und weiteren Highlights.