Bookmarking Ajax/Flash

Das Pro­blem ist bekannt: Web­an­wen­dun­gen die ihre zen­tra­len Inhal­te mit­tels Ajax-Technologie ändern, müs­sen zusätz­lich dafür Sor­ge tra­gen, dass ihre dyna­misch geän­der­ten Inhal­te eben­falls in der URL-Leiste des Brow­sers refe­ren­zier­bar blei­ben. Die­se Auf­ga­be muss auch von Flash-/Flex-Anwendungen durch­ge­führt wer­den. Wird im Flash-Plugin ein neu­er Inhalt nach­ge­la­den, ändert sich nor­ma­ler­wei­se nichts an der URL im Brow­ser­fens­ter. Somit gibt es ohne Eigen­in­itia­ti­ve kei­ne Mög­lich­keit direkt an den neu ange­zeig­ten Inhalt zu springen.
Die Lösung ist bekannt und an sich ein­fach. Wird mit­tels Ajax / Flex / Flash dyna­misch ein neu­er Inhalt ange­zeigt, muss mit­tels Java-Script die URL des Brow­sers ent­spre­chend geän­dert wer­den. Der Haken dabei: der Brow­ser lädt die Sei­te neu! Dies kann aber mit einem Trick ver­hin­dert werden.
Hier spielt das Hash-Zeichen (#) in der URL eine wich­ti­ge Rol­le. Es dient zur Anga­be eines Anker­punk­tes (sie­he W3C-Syntax of anchor names) in der aktu­ell ange­zeig­ten Web­sei­te. Eine Ankerpunkt-Angabe gehört streng genom­men nicht mehr zur URL, da sie nicht an den Web- / Appli­ka­ti­ons­ser­ver gesen­det wird. Der Brow­ser ver­sucht den mit dem Hash-Zeichen ange­ge­be­nen Anker­punkt inner­halb der aktu­el­len Sei­te zu fin­den und scrollt dann direkt an die­sen Punkt. Fin­det der Brow­ser kei­nen pas­sen­den Anker, bleibt die Posi­ti­on unver­än­dert. Eine Web­sei­te kann somit ein Inhalts­ver­zeich­nis am Anfang prä­sen­tie­ren, deren Links nur rei­ne Anker­wer­te ent­hal­ten. Ein Klick auf solch einen Link sorgt dafür, dass der Brow­ser an die Anker­stel­le des gewünsch­ten Kapi­tels  springt. Dabei wird die Web­sei­te nicht neu gela­den. Und genau die­sen Effekt macht man sich hier zu Nutze.
Wird der ange­zeig­te Inhalt mit­tels Ajax oder in einer Flash-Anwendung aktua­li­siert, so muss der Anker­wert, wel­cher für den ange­zeig­ten Inhalt steht, mit­tels Java-Script in der URL ange­passt wer­den. Hier­für gibt es zwei Mög­lich­kei­ten. Ent­we­der man setzt den Wert in window.location.hash oder man ver­wen­det die Location-Methode window.location.Replace() mit exakt der aktu­el­len URL, die nur am Anker­wert geän­dert wur­de (unter­schei­det sich die URL vor dem Anker-Hash von der aktu­el­len URL, star­tet der Brow­ser eine neue Anfra­ge und lädt die ent­spre­chen­de Sei­te nach!). Der Unter­schied zwi­schen die­sen bei­den Mög­lich­kei­ten liegt in der Browser-History. Wird die URL mit­tels der Metho­de Replace() ersetzt, wird die über­schrie­be­ne URL-Angabe im Brow­ser nicht als “besuch­te Sei­te” ver­merkt, was dazu führt, dass eine Navi­ga­ti­on “zurück” mit­tels des Back-Buttons nicht mög­lich ist. Dies kann ein gewünsch­ter Effekt sein, wenn eine Anwen­dung ohne die Browser-Navigations-Buttons arbei­ten, aber Book­mar­king unter­stüt­zen will.
Da der Web- / Appli­ka­ti­ons­ser­ver bei einer Anfra­ge der Art http://somedomain.com/path/to/site/#document-id nur die Anga­be http://somedomain.com/path/to/site/ vom Brow­ser zuge­sen­det bekommt, also kei­ne Anker-Angaben, muss mit­tels Ajax oder Flash/Flex (für Flex sie­he: Acces­sing Flex from Java­script und Acces­sing Java­script from Flex) zu Beginn zusätz­lich eine neue Anfra­ge für den Dokumenten-Inhalt gestar­tet wer­den. Hier­zu wer­tet ein Java-Script nach­dem die Web­sei­te 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 einer Flash-Anwendung auf.  Die Adres­se könn­te dafür bei­spiels­wei­se http://somedomain.com/path/to/document/document-id/ lau­ten. Die­se Akti­on muss ein Java­script auch dann durch­füh­ren, wenn sich durch den Back-Button oder durch eine “sei­ten­in­ter­ne” Navi­ga­ti­on der Anker-Wert änder­te. Um die­se Ände­run­gen zu über­wa­chen bie­tet es sich an, einen Timer zu imple­men­tie­ren, der in regel­mä­ßi­gen Abstän­den über­prüft, ob die URL im Brow­ser noch zu dem aktu­ell ange­zeig­ten Inhalt passt. Wenn nicht, wird hier wie­der per Ajax-Request bzw. inner­halb der Flash-/Flex-Anwendung der Inhalt ange­passt. Eine detail­lier­te Beschrei­bung zu die­sem “Ajax-Pattern” kann unter ajaxpatterns.org nach­ge­le­sen wer­den. Hier fin­det man auch pas­sen­de Codebeispiele.
(updating url for book­mar­king AJAX or Flash app­li­ca­ti­ons using the anchor syntax)

0

Schreibe einen Kommentar


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.