Einführung in AJAX-Navigationen

  • Artikel

Neu für Windows Internet Explorer 8

Internet Explorer 8 führt asynchrones JavaScript und XML-Navigationen (AJAX) ein. Diese Features sind dazu gedacht, die Frustration der Endbenutzer mit AJAX-aktivierten Websites zu verringern, die nicht mithilfe der Schaltflächen "Zurück" und "Vorwärts" durchsucht werden können und den Browserverlauf nicht aktualisieren. Mit nur wenigen Skriptzeilen können Sie der Website die AJAX-Navigation hinzufügen und das Durchsuchen des AJAX-aktivierten Inhalts so problem- und übergangslos wie bei der "herkömmlichen" Navigation zu gestalten.

Dieses Thema ist in die folgenden Abschnitte gegliedert:

  • Einführung
  • Problembeispiel
  • Vorgehensweise
  • Beispielcode
  • Verwandte Themen

Einführung

Einer der großen Vorteile der Implementierung von AJAX -- und ganz gewiss einer der Hauptgründe für seine Existenz -- ist es, dass Benutzer Webseiteninhalte aktualisieren können, ohne zu einer neuen Webseite navigieren zu müssen. Mit diesem Vorteil gehen jedoch Nachteile einher, die die Benutzer verwirren können. Auf einer Webseite mit intensiver AJAX-Nutzung wird z. B. die Adressleiste nicht mit jedem Update aktualisiert. Anschließend wird der Browserverlauf ebenfalls nicht aktualisiert.

AJAX-Navigationen ändern dieses Verhalten, indem sie es Benutzern ermöglichen, vor und zurück zu navigieren, ohne die AJAX-Anwendung zu verlassen. Eine Website mit aktivierten AJAX-Navigationen löst für solche Browserkomponenten wie die Adressleiste ein Update aus, indem der Wert window.location.hash festgelegt wird, wodurch ein Ereignis ausgelöst wird, um Komponenten auf der Webseite zu warnen und sogar einen Eintrag im Browserverlauf zu erstellen.

Problembeispiel

Betrachten Sie als Beispiel z. B. den Kartendienst von Windows Live Search. Mit den AJAX-aktivierten Funktionen dieser Anwendung -- z. B. Schwenken und Zoomen -- werden weder die Adressleiste noch der Browserverlauf aktualisiert. Benutzer, die an die Änderungen in der Adressleiste bei jeder neuen Webseite gewöhnt sind oder sich auf die Schaltflächen "Zurück" und "Vorwärts" des Browsers verlassen, könnten diesen Prozess gelegentlich als störend empfinden. Während einige Websites diese Einschränkung umgehen, indem sie ein ausgeblendetes iframe-Element navigieren, wenn sie Inhalte über AJAX aktualisieren, kann dieses Verfahren die Leistung verringern.

Vorgehensweise

Um AJAX-Navigationen zu ermöglichen, behandelt Internet Explorer 8 Updates zur Eigenschaft "window.location.hash" im IE8-Modus (der Standardkompatibilitätsmodus; weitere Informationen finden Sie unter Definieren der Dokumentkompatibilität, möglicherweise in englischer Sprache) wie einzelne, "herkömmliche" Navigationen. Wenn die Eigenschaft "hash" aktualisiert wird, erfolgt die Aktualisierung der vorherigen Dokument-URL, die möglicherweise vom vorherigen hash-Fragment stammt, in der Adressleiste, im Browserverlauf und somit für die Schaltfläche "Zurück". Gleichzeitig wird ein neues onhashchange-Ereignis ausgelöst und das Hash-URL-Fragment wird gespeichert, bevor Benutzer die Webseite verlassen.

Auf AJAX-aktivierten Webseiten, die diese neue Funktionalität nutzen, erfolgt die Navigation so übergangslos wie üblich, wenn sich der AJAX-Inhalt ändert. Der Benutzer kann aber vor und zurück navigieren, wie bei der "herkömmlichen" AJAX-Navigation.

Beispielcode

Im folgenden Beispiel wird die Verwendung dieser neuen Funktionalität veranschaulicht. In diesem Fall wird die Eigenschaft "hash" mit dem onendzoom-Ereignis des Microsoft Virtual Earth-Kartensteuerelements festgelegt. Anders ausgedrückt, jedes Mal wenn der Benutzer die Ansicht vergrößert oder verkleinert, werden die Adressleiste und der Browserverlauf aktualisiert, wodurch der Benutzer mithilfe der Schaltflächen "Zurück" und "Vorwärts" zwischen Vergrößerungsstufen hin und her navigieren kann.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>

<head>
<title>AJAX Map</title>
</head>

<!-- Load the Virtual Earth map control. -->
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" type="text/javascript"></script>
<script type="text/javascript">
    var oMap = null;
    var iZoomLevel = 0;
    
    function GetMap()
    {
        oMap = new VEMap('myMap');
        oMap.LoadMap();
        
        oMap.AttachEvent("onendzoom", ZoomHandler);
        iZoomLevel = oMap.GetZoomLevel();
        window.location.hash = iZoomLevel;
    }
    
    function ZoomHandler(e)
    {
        iZoomLevel = oMap.GetZoomLevel();

        // The following declaration sets the hash property to a 
        // variable containing the URL fragment to be saved. 
        window.location.hash = iZoomLevel;
    }
    
    function HashChangeHandler()
    {
        var hash = window.location.hash;
        var iNewZoomLevel = hash.substr(1);
        
        if (iNewZoomLevel != iZoomLevel)
        {
            iZoomLevel = iNewZoomLevel;
            oMap.SetZoomLevel(iNewZoomLevel);
        }
    }
</script>
<!-- Attaching the event handler to a new onhashchange event allows
    the page to detect when the hash has changed and an AJAX 
    navigation has occurred. -->
<body onhashchange="HashChangeHandler();" onload="GetMap();" 
    style="overflow: scroll; height: 100%">

<div id="myMap" style="position: relative; width: 500px; 
    height: 500px; vertical-align: middle">
</div>

</body>

</html>

Jedes Mal, wenn der Benutzer die Ansicht vergrößert oder verkleinert, wird die Fragment-ID in der Adressleiste aktualisiert, wie in folgender Abbildung veranschaulicht. Auf dieser Webseite bedeutet dies einfach, dass die ganze Zahl hinter dem Nummernzeichen (#) inkrementiert wurde.

Abbildung der Adressleiste, die eine Fragment-ID anzeigt.

Verwandte Themen