Share via

Introduzindo as navegações AJAX

  • Artigo

Novidade no Windows Internet Explorer 8

O Internet Explorer 8 introduz as navegações AJAX (Asynchronous JavaScript and XML). Esses recursos foram desenvolvidos para ajudar a aliviar a frustração de usuários finais com sites habilitados para Ajax que não são navegáveis por meio dos botões Voltar e Avançar e que não atualizam o histórico de navegação. Com apenas algumas linhas simples de script, você pode adicionar as navegações AJAX em seu site, tornando a navegação de seu conteúdo habilitado para Ajax tão suave e uniforme quanto a navegação "tradicional".

Este tópico está organizado nas seguintes seções:

  • Introdução
  • Um exemplo do problema
  • Como funciona
  • Exemplo de código
  • Tópicos relacionados

Introdução

Um dos maiores benefícios de implementar o AJAX - na verdade, uma das principais razões para a sua existência - é que ele permite que os usuários atualizem o conteúdo da página da Web sem ter de navegar até uma nova página da Web. Entretanto, essa conveniência pode apresentar desvantagens que podem confundir os usuários. Em uma página da Web com uso intensivo do Ajax, por exemplo, a barra de endereços não é atualizada a cada atualização. Consequentemente, o "travelog" (o histórico de navegação) também não é atualizado.

As navegações AJAX alteram esse comportamento habilitando os usuários a navegar de um lado para outro sem deixar o aplicativo AJAX. Um site com as navegações AJAX habilitadas disparará uma atualização para os componentes do navegador, como a barra de endereços, definindo o valor de window.location.hash, acionando um evento para alertar os componentes da página da Web e, até mesmo, criando uma entrada no travelog.

Um exemplo do problema

Como um exemplo, considere um site de mapas como Mapas do Windows Live Search. Com os recursos habilitados para Ajax desse aplicativo, como panorâmica e zoom, nem a barra de endereços nem o travelog são atualizados. Os usuários que estão acostumados às alterações na barra de endereços a cada nova página da Web ou que dependem dos botões Voltar e Avançar do navegador talvez considerem esse processo desagradável. Apesar de alguns sites resolverem essa limitação navegando em um iframe oculto quando atualizam conteúdos por meio do AJAX, essa técnica pode diminuir o desempenho.

Como funciona

Para habilitar as navegações AJAX, o Internet Explorer 8 no modo IE8 (o modo de compatibilidade padrão; para obter mais informações, consulte Definindo a compatibilidade de documentos) trata as atualizações da propriedade window.location.hash como navegações "tradicionais" individuais. Quando a propriedade hash é atualizada, a URL do documento anterior, que pode ser do fragmento de hash anterior, é atualizada na barra de endereços, no travelog e, portanto, no botão Voltar. Ao mesmo tempo, um novo evento onhashchange é acionado e o fragmento de URL de hash é salvo antes de os usuários saírem da página da Web.

Em páginas da Web habilitadas para AJAX que aproveitam essa nova funcionalidade, quando o conteúdo AJAX é alterado, a navegação é uniforme e comum, e o usuário pode voltar e avançar como se a navegação AJAX fosse "tradicional".

Exemplo de código

O exemplo a seguir demonstra um uso dessa nova funcionalidade. Nesse caso, a propriedade hash é definida com o evento onendzoom do controle de mapeamento do Microsoft Virtual Earth. Em outras palavras, sempre que o usuário aplicar zoom para ampliar ou reduzir, a barra de endereços e o travelog serão atualizados, permitindo que o usuário volte e avance entre os níveis de zoom usando os botões Voltar e Avançar.

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

Sempre que o usuário aplicar zoom para ampliar ou reduzir, o identificador de fragmento na barra de endereços será atualizado, conforme mostrado na imagem a seguir. Nessa página da Web, isso simplesmente significa que o valor inteiro depois do sinal de número (#) é incrementado.

Imagem da barra de endereços mostrando um identificador de fragmento.

Tópicos relacionados