элементы навигации AJAX

Статья
01/29/2010

Новые возможности Windows Internet Explorer 8

В Internet Explorer 8 введены элементы навигации асинхронных сценариев JavaScript и XML (AJAX). Эти функции разработаны, чтобы смягчить неудовлетворенность пользователей, посещающих веб-сайты, поддерживающие технологию AJAX, на которых отсутствуют возможности навигации с помощью кнопок "Назад" и "Вперед" и не обновляется журнал браузера. Записав всего несколько простых строк сценария, можно добавить элементы навигации на веб-сайт, что позволяет сделать навигацию по содержимому, поддерживающему технологи. AJAX, такой же удобной и наглядной, как и при использовании "традиционных" средств навигации.

В этом разделе имеются следующие подразделы:

Введение
Пример проблемы
Как это работает
Пример кода
См. также

Введение

Одно из самых больших преимуществ реализации технологии AJAX (которое, фактически, является одной из основных причин ее разработки) состоит в том, что она позволяет пользователям обновлять содержимое веб-страницы, не требуя перехода на новую веб-страницу. Однако эта удобная возможность сопровождается проявлением одного недостатка, который может создавать помехи для пользователей. Например, на веб-странице, поддерживающей технологию AJAX, адресная строка не обновляется при каждом обновлении страницы. Соответственно, "журнал путешествий" (журнал браузера) также не обновляется.

Использование элементов навигации AJAX вносит изменение в такое поведение, позволяя пользователям переходить вперед и назад, не покидая приложение AJAX. Веб-сайт, на котором поддерживаются элементы навигации AJAX, будет активировать обновление таких компонентов браузера, как адресная строка, задавая значение window. location. hash, запускающее событие, уведомляющее компоненты на веб-странице и создающее соответствующую запись в журнале браузера.

Пример проблемы

В качестве примера рассмотрим сопоставление веб-сайта, такое как Windows Live Search Maps. При использовании AJAX-функций, этого приложения, таких как pan (панорама) и zoom (увеличение),— не выполняется обновление ни адресной строки, ни журнала браузера. Это может вызывать раздражение у пользователей, привыкших к изменениям адресной строки при каждом переходе на новую веб-страницу или к использованию кнопок "Назад" и "Вперед" браузера. На некоторых веб-сайтах данное ограничение обходится посредством навигации с использованием скрытого объекта iframe при обновлении содержимого средствами AJAX, однако этот способ может привести к снижению производительности.

Как это работает

Чтобы включить элементы навигации AJAX, в Internet Explorer 8 режиме IE8 (режим совместимости по умолчанию; дополнительные сведения см. в статье Определение совместимости документов (возможно, на английском языке)) обновления рассматриваются в свойстве window.location.hash как отдельные, "традиционные" перемещения. Когда свойство hash обновляется, предыдущий URL-адрес документа, который может совпадать с предыдущим хэш-фрагментом, обновляется в адресной строке, журнале браузера и соответственно в кнопке "Назад". Одновременно вызывается новое событие onhashchange, и хэш-фрагмент URL-адреса сохраняется, прежде чем пользователь покинет веб-страницу.

На веб-страницах с поддержкой технологии AJAX, на которых используется эта новая функциональность, навигация при изменении AJAX-содержимого выполняется как обычно, без проблем, однако пользователь может выполнять переходы вперед и назад как если бы AJAX-навигация была "традиционной".

Пример кода

В следующем примере показано использование этой новой функциональности. В данном случае для свойства hash задано событие onendzoom элемента управления карты Microsoft Virtual Earth. Другими словами, каждый раз, когда пользователь выполняет увеличение или уменьшение масштаба карты, происходит обновление и адресной строки, и журнала браузера, что позволяет пользователю выполнять переходы вперед и назад между уровнями масштабирования с помощью кнопок "Вперед" и "Назад".

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

Каждый раз, когда пользователь выполняет увеличение или уменьшение масштаба карты, идентификатор фрагмента в адресной строке обновляется, как показано на следующем рисунке. На этой веб-странице это просто означает, что целое число, расположенное после знака номера (#), возрастает.

Изображение адресной строки с идентификатором фрагмента.

См. также

Усовершенствования XMLHttpRequest в Internet Explorer 8 (возможно, на английском языке)
Расширенные возможности сетевых подключений в Internet Explorer 8 (возможно, на английском языке)

Поделиться через