Der Internet Explorer 9 aus Entwicklersicht (Teil 7)
Kommentare

Ajax-Navigation (HTML5)
Die Unterstützung für die Ajax-Navigation wurde schon mit dem IE8 eingeführt und wird fortgesetzt. Mithilfe dieser Funktion wird es möglich, Sprungmarken für die Browsernavigationsschaltflächen

Ajax-Navigation (HTML5)

Die Unterstützung für die Ajax-Navigation wurde schon mit dem IE8 eingeführt und wird fortgesetzt. Mithilfe dieser Funktion wird es möglich, Sprungmarken für die Browsernavigationsschaltflächen (vor/zurück) zu setzen. Bei Ajax-Anwendungen ist die korrekte Steuerung der Vor- und Zurückschaltfläche ein häufiges Problem. Typische Ajax-Anwendungen aktualisieren die Seite clientseitig und rufen Daten im Hintergrund ab, ein Neuladen der Seite soll möglichst vermieden werden. Für den Browser ändert sich demnach der Status der Seite nicht, so werden auch bei Änderungen des Seitenstatus keine Historieneinträge zur Navigation erzeugt. Das muss durch den Entwickler der jeweiligen Anwendung manuell geschehen. Wie auch der IE8 ermöglicht der IE9 weiterhin das einfache Setzen von Historienpunkten zur Steuerung der Navigation. Die Verwendung des API hat sich im IE9 nicht verändert. Um einen Historienpunkt zu setzen, muss der Eigenschaft window.location.hash bei jedem gewünschten Navigationspunkt ein Wert zugewiesen werden. Dadurch wird ein Historieneintrag im Browser erzeugt und eine Navigationsmarke gesetzt. Benutzt nun der Anwender die Vor- oder Zurückschaltfläche, muss das Ereignis onhashchange des Dokuments behandelt und der angeforderte Seitenstatus aus den window.location.hash-Informationen wieder hergestellt werden. Listing 5 zeigt die Verwendung anhand einer HTML-Datenliste (HTML-Tabelle). Die Tabelle stellt auf der Seite drei Datensätze dar, bei Klick auf eine Zeile wird die ausgewählte Zeile selektiert, eine eventuell vorher markierte Zeile wird wieder deselektiert. Der Anwender erwartet bei der Nutzung der Zurückschaltfläche, dass die letzte Selektion wieder hergestellt wird. Ohne spezielle Behandlung würde der Browser zur vorherigen Seite zurückkehren. Bei jedem Klick auf eine Tabellenzeile wird daher die window.location.hash-Eigenschaft gesetzt: window.location.hash = source.id;.

Listing 5



  


  
HansMeier Steingasse 341564 Irgendwo
PeterSchmidt Feldgasse 24312554 Nirgendswo
SabineFeldmaus Rotenstr. 2154511 Anderswo

Gespeichert wird nur die ID des selektierten Elements (die Methode enthält darüber hinaus die nötige Logik zur Deselektion des letzten Eintrags). Wird nun die Vor- oder Zurückschaltfläche betätigt, wird das Ereignis onhashchange erzeugt und die Eigenschaft window.location.hash wird automatisch mit der dazugehörigen Information aktualisiert. Der gespeicherte window.location.hash-Wert, der zuvor manuell gesetzt wurde, wird innerhalb der Ereignismethode HashChangeHandler ausgelesen und zur Wiederherstellung des korrekten Seitenzustands genutzt. Somit kann eine korrekte clientseitige Steuerung der Navigationsschaltflächen für Ajax-Anwendungen umgesetzt werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -