Bookmarking Ajax/Flash

Das Problem ist be­kannt: Webanwendungen die ih­re zen­tra­len Inhalte mit­tels Ajax-Technologie än­dern, müs­sen zu­sätz­lich da­für Sorge tra­gen, dass ih­re dy­na­misch ge­än­der­ten Inhalte eben­falls in der URL-Leiste des Browsers re­fe­ren­zier­bar blei­ben. Diese Aufgabe muss auch von Flash-/Flex-Anwendungen durch­ge­führt wer­den. Wird im Flash-Plugin ein neu­er Inhalt nach­ge­la­den, än­dert sich nor­ma­ler­wei­se nichts an der URL im Browserfenster. Somit gibt es oh­ne Eigeninitiative kei­ne Möglichkeit di­rekt an den neu an­ge­zeig­ten Inhalt zu sprin­gen.
Die Lösung ist be­kannt und an sich ein­fach. Wird mit­tels Ajax / Flex / Flash dy­na­misch ein neu­er Inhalt an­ge­zeigt, muss mit­tels Java-Script die URL des Browsers ent­spre­chend ge­än­dert wer­den. Der Haken da­bei: der Browser lädt die Seite neu! Dies kann aber mit ei­nem Trick ver­hin­dert wer­den.
Hier spielt das Hash-Zeichen (#) in der URL ei­ne wich­ti­ge Rolle. Es dient zur Angabe ei­nes Ankerpunktes (sie­he W3C-Syntax of an­chor na­mes) in der ak­tu­ell an­ge­zeig­ten Webseite. Eine Ankerpunkt-Angabe ge­hört streng ge­nom­men nicht mehr zur URL, da sie nicht an den Web- / Applikationsserver ge­sen­det wird. Der Browser ver­sucht den mit dem Hash-Zeichen an­ge­ge­be­nen Ankerpunkt in­ner­halb der ak­tu­el­len Seite zu fin­den und scrollt dann di­rekt an die­sen Punkt. Findet der Browser kei­nen pas­sen­den Anker, bleibt die Position un­ver­än­dert. Eine Webseite kann so­mit ein Inhaltsverzeichnis am Anfang prä­sen­tie­ren, de­ren Links nur rei­ne Ankerwerte ent­hal­ten. Ein Klick auf solch ei­nen Link sorgt da­für, dass der Browser an die Ankerstelle des ge­wünsch­ten Kapitels  springt. Dabei wird die Webseite nicht neu ge­la­den. Und ge­nau die­sen Effekt macht man sich hier zu Nutze.
Wird der an­ge­zeig­te Inhalt mit­tels Ajax oder in ei­ner Flash-Anwendung ak­tua­li­siert, so muss der Ankerwert, wel­cher für den an­ge­zeig­ten Inhalt steht, mit­tels Java-Script in der URL an­ge­passt wer­den. Hierfür gibt es zwei Möglichkeiten. Entweder man setzt den Wert in window.location.hash oder man ver­wen­det die Location-Methode window.location.Replace() mit ex­akt der ak­tu­el­len URL, die nur am Ankerwert ge­än­dert wur­de (un­ter­schei­det sich die URL vor dem Anker-Hash von der ak­tu­el­len URL, star­tet der Browser ei­ne neue Anfrage und lädt die ent­spre­chen­de Seite nach!). Der Unterschied zwi­schen die­sen bei­den Möglichkeiten liegt in der Browser-History. Wird die URL mit­tels der Methode Replace() er­setzt, wird die über­schrie­be­ne URL-Angabe im Browser nicht als „be­such­te Seite“ ver­merkt, was da­zu führt, dass ei­ne Navigation „zu­rück“ mit­tels des Back-Buttons nicht mög­lich ist. Dies kann ein ge­wünsch­ter Effekt sein, wenn ei­ne Anwendung oh­ne die Browser-Navigations-Buttons ar­bei­ten, aber Bookmarking un­ter­stüt­zen will.
Da der Web- / Applikationsserver bei ei­ner Anfrage der Art http://somedomain.com/path/to/site/#document-id nur die Angabe http://somedomain.com/path/to/site/ vom Browser zu­ge­sen­det be­kommt, al­so kei­ne Anker-Angaben, muss mit­tels Ajax oder Flash/Flex (für Flex sie­he: Accessing Flex from Javascript und Accessing Javascript from Flex) zu Beginn zu­sätz­lich ei­ne neue Anfrage für den Dokumenten-Inhalt ge­star­tet wer­den. Hierzu wer­tet ein Java-Script nach­dem die Webseite ein­ge­la­den wur­de (Event-Funktion in window.onload) den Inhalt von window.location.hash aus und ruft die ent­spre­chen­de Nachlade-Funktion für Ajax oder in ei­ner Flash-Anwendung auf.  Die Adresse könn­te da­für bei­spiels­wei­se http://somedomain.com/path/to/document/document-id/ lau­ten. Diese Aktion muss ein Javascript auch dann durch­füh­ren, wenn sich durch den Back-Button oder durch ei­ne „sei­ten­in­ter­ne“ Navigation der Anker-Wert än­der­te. Um die­se Änderungen zu über­wa­chen bie­tet es sich an, ei­nen Timer zu im­ple­men­tie­ren, der in re­gel­mä­ßi­gen Abständen über­prüft, ob die URL im Browser noch zu dem ak­tu­ell an­ge­zeig­ten Inhalt passt. Wenn nicht, wird hier wie­der per Ajax-Request bzw. in­ner­halb der Flash-/Flex-Anwendung der Inhalt an­ge­passt. Eine de­tail­lier­te Beschreibung zu die­sem „Ajax-Pattern“ kann un­ter ajaxpatterns.org nach­ge­le­sen wer­den. Hier fin­det man auch pas­sen­de Codebeispiele.
(up­dating url for book­mar­king AJAX or Flash ap­p­li­ca­ti­ons using the an­chor syn­tax)

0

Schreibe einen Kommentar