Introducción a la navegación AJAX

  • Artículo

Novedad para Windows Internet Explorer 8

Internet Explorer 8 incorpora la navegación Asynchronous JavaScript and XML (AJAX). Esta característica está diseñada para ayudar a aliviar la frustración de los usuarios finales con los sitios web habilitados para AJAX en los que no se puede navegar mediante los botones Atrás y Adelante, ni se actualiza el historial de exploración. Simplemente con unas cuantas líneas de script, se pueden agregar elementos de navegación al sitio web, de tal forma que navegar por el contenido habilitado para AJAX resulte tan cómoda y fluida como la navegación "tradicional".

Este tema está estructurado en las secciones siguientes:

  • Introducción
  • Ejemplo del problema
  • Cómo funciona
  • Código de ejemplo
  • Temas relacionados

Introducción

Una de las grandes ventajas de implementar AJAX (en realidad, una de las principales razones de su existencia) es que permite a los usuarios actualizar el contenido de una página web sin tener que navegar hasta una nueva página web. Sin embargo, esta comodidad trae consigo inconvenientes que pueden confundir a los usuarios. En una página web que incluya gran cantidad de código de AJAX, por ejemplo, la barra de direcciones no se pone al día con cada actualización. En consecuencia, el "registro de visitas" (el historial de exploración) tampoco se actualiza.

Los elementos de navegación de AJAX modifican este comportamiento permitiendo a los usuarios navegar de un sitio a otro sin salir de la aplicación AJAX. Un sitio web con elementos de navegación de AJAX activados desencadenará una actualización de algunos componentes del explorador como la barra de direcciones; para ello, establece el valor de window.location.hash, provoca un evento para alertar a los componentes de la página web e, incluso, crea una entrada en el registro de visitas.

Ejemplo del problema

A modo de ejemplo, imaginemos un sitio web de mapas como Windows Live Search Maps. Con las características habilitadas por AJAX de esa aplicación (tales como la panorámica y el zoom), no se actualizan la barra de direcciones ni el registro de visitas. A los usuarios acostumbrados a que la barra de direcciones cambie con cada nueva página web, o que utilicen los botones Atrás y Adelante del explorador, este proceso puede resultarles desagradable. Si bien algunos sitios web eluden esta limitación navegando a un objeto iframe oculto cuando actualizan el contenido a través de AJAX, esta técnica puede disminuir el rendimiento.

Cómo funciona

Para habilitar los elementos de navegación de AJAX, Internet Explorer 8 en modo IE8 (el modo de compatibilidad predeterminado; para obtener más información, vea Definir la compatibilidad de documentos) trata las actualizaciones de la propiedad window.location.hash como elementos de navegación individuales "tradicionales." Cuando se actualiza la propiedad hash, la dirección URL del documento anterior, que podría corresponder al fragmento hash anterior, se actualiza en la barra de direcciones, en el registro de visitas y, por consiguiente, en el botón Atrás. Al mismo tiempo, se provoca un nuevo evento onhashchange y el fragmento hash de la dirección URL se guarda antes de que el usuario navegue fuera de la página web.

En las páginas web habilitadas para AJAX que sacan partido de esta nueva funcionalidad, cuando cambia el contenido de AJAX, la navegación resulta tan fluida como de costumbre, pero el usuario puede retroceder y avanzar como si la navegación de AJAX fuese "tradicional."

Código de ejemplo

En el ejemplo siguiente se muestra un uso de esta nueva funcionalidad. En este caso, la propiedad hash se establece con el evento onendzoom del control de mapas de Microsoft Virtual Earth. En otras palabras, cada vez que el usuario acerca o aleja la imagen, la barra de direcciones y el registro de visitas se actualizan, de forma que el usuario puede navegar entre los distintos niveles de zoom mediante los botones Atrás y Adelante.

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

Cada vez que el usuario acerca o aleja la imagen, el identificador de fragmento de la barra de direcciones se actualiza, como se muestra en la imagen siguiente. En esta página web, esto significa simplemente que se incrementa el entero que aparece después del signo de número (#).

Imagen de la barra de direcciones que muestra un identificador de fragmento.

Temas relacionados