Présentation des navigations AJAX

  • Article

Nouveautés de Windows Internet Explorer 8

Internet Explorer 8 prend maintenant en charge les navigations AJAX (Asynchronous JavaScript And XML). Ces fonctionnalités sont conçues pour faciliter la navigation des utilisateurs sur les sites Web compatibles AJAX pour lesquels les boutons Précédent et Suivant ne peuvent pas être utilisés, et qui ne mettent pas à jour l'historique de navigation. Quelques lignes de script suffisent à ajouter des navigations AJAX à votre site Web pour permettre aux utilisateurs de naviguer dans les contenus compatibles AJAX aussi facilement que sur les autres sites.

Cette rubrique comprend les sections suivantes :

  • Introduction
  • Illustration du problème
  • Fonctionnement
  • Exemple de code
  • Voir aussi

Introduction

L'un des principaux avantages de l'implémentation d'AJAX (et l'une des principales raisons de son existence) est qu'il permet aux utilisateurs de mettre à jour le contenu des pages Web sans devoir naviguer sur une autre page. Cependant, il existe également certains inconvénients pouvant entraîner une certaine confusion chez les utilisateurs. Par exemple, dans une page Web comprenant de nombreux éléments AJAX, la barre d'adresses n'est pas modifiée à chaque mise à jour, ce qui signifie que l'historique de navigation n'est pas mis à jour non plus.

Les navigations AJAX modifient ce comportement en permettant aux utilisateurs d'accéder aux pages précédente et suivante sans quitter l'application AJAX. Un site Web sur lequel les navigations AJAX sont activées déclenche la mise à jour de certains composants du navigateur tels que la barre d'adresses. Pour ce faire, il définit la valeur de window. location. hash, génère un événement afin d'envoyer une alerte aux composants de la page Web et crée une entrée dans l'historique de navigation.

Illustration du problème

Prenons par exemple un site de cartographie tel que Windows Live Search Maps. Avec les fonctionnalités compatibles AJAX telles que le zoom et le panoramique, la barre d'adresses et l'historique de navigation ne sont pas mis à jour. Les utilisateurs habitués à ce que la barre d'adresses change chaque fois qu'ils accèdent à une nouvelle page ou à utiliser les boutons Précédent et Suivant du navigateur risquent donc d'être gênés par ce mode de fonctionnement. Certains sites Web contournent cette limitation à l'aide d'un iframe masqué lorsqu'ils mettent à jour des contenus via AJAX, mais cette technique peut entraîner une dégradation des performances.

Fonctionnement

Pour activer les navigations AJAX, Internet Explorer 8 en mode IE8 (mode de compatibilité par défaut, consultez Définition de la compatibilité des documents (page éventuellement en anglais)) traite les mises à jour de la propriété window.location.hash comme des navigations individuelles classiques. Lorsque la propriété hash est mise à jour, l'URL du document précédent, qui peut éventuellement provenir du fragment de hachage précédent, est mise à jour dans la barre d'adresses et dans l'historique de navigation (et par conséquent également dans le bouton Précédent). Simultanément, un nouvel événement onhashchange est généré et le fragment URL de hachage est enregistré avant que les utilisateurs naviguent vers une autre page Web.

Lorsque le contenu AJAX est modifié sur des pages Web compatibles avec cette nouvelle fonctionnalité, la navigation se fait aussi facilement que sur des sites classiques, mais l'utilisateur peut également utiliser les boutons Précédent et Suivant comme au cours d'une navigation « traditionnelle ».

Exemple de code

L'exemple suivant présente une utilisation de cette nouvelle fonctionnalité. Dans le cas présent, la propriété hash a pour valeur l'événement onendzoom du contrôle de carte Microsoft Virtual Earth. En d'autres termes, chaque fois que l'utilisateur fait un zoom avant ou arrière, la barre d'adresses et l'historique de navigation sont mis à jour, ce qui permet à l'utilisateur de passer d'un niveau de zoom à l'autre à l'aide des boutons Précédent et Suivant.

<!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>

Chaque fois que l'utilisateur fait un zoom avant ou arrière, l'identificateur de fragment est mis à jour dans la barre d'adresses, comme indiqué dans l'image suivante. Dans le cas de cette page Web, cela signifie simplement que le chiffre entier indiqué après le signe dièse (#) est incrémenté.

Image de la barre d'adresses montrant un identificateur de fragment

Voir aussi