AJAX - Introducing AJAX Navigations
Windows Internet Explorer 8 introduces Asynchronous JavaScript and XML (AJAX) Navigations. These features are designed to help alleviate the frustration of end users with AJAX-enabled Web sites that are not navigable through the Back and Forward buttons, and that do not update the browsing history. With just a few simple lines of script, you can add AJAX Navigations to your Web site, making the navigation of your AJAX-enabled content as smooth and seamless as "traditional" navigation.
This topic is organized into the following sections:
- Introduction
- An Example of the Problem
- How It Works
- Example Code
- Related topics
Introduction
One of the great benefits of implementing AJAX—indeed, one of the main reasons for its existence—is that it enables users to update Web page content without having to navigate to a new Web page. With this convenience, however, come drawbacks that can confuse users. On an AJAX-heavy Web page, for instance, the Address bar is not updated with each update. Subsequently, the "travelog" (the browsing history) is not updated either.
AJAX Navigations change this behavior by enabling users to navigate back and forth without leaving the AJAX application. A Web site with the enabled AJAX Navigations will trigger an update to such browser components as the Address bar, by setting the window.location.hash value, raising an event to alert components in the Web page, and even creating an entry in the travelog.
An Example of the Problem
As an example, consider a mapping Web site such as Live Search Maps. With the AJAX-enabled features of that application—such as pan and zoom—neither the Address bar nor the travelog is updated. Users who are accustomed to the changes in the Address bar with each new Web page, or who rely on the browser's Back and Forward buttons might sometimes find this process jarring. While some Web sites work around this limitation by navigating a hidden iframe when they update content through AJAX, this technique can decrease performance.
How It Works
To enable AJAX navigations, Internet Explorer 8 in IE8 Standards mode (the default compatibility mode; for more information, see Defining Document Compatibility) treats updates to the window.location.hash property like individual, "traditional" navigations. When the hash property is updated, the previous document URL, which might be from the previous hash fragment, is updated in the Address bar, travelog, and thus the Back button. At the same time, a new onhashchange event is raised and the hash URL fragment is saved before users navigate away from the Web page.
On AJAX-enabled Web pages that take advantage of this new functionality, when AJAX content changes, navigation is as seamless as usual but the user can back up and go forward as if the AJAX navigation was "traditional."
Example Code
The following example demonstrates one use of this new functionality. In this case, the hash property is set with the onendzoom event of the Microsoft Virtual Earth map control. In other words, every time the user zooms in or out, the Address bar and travelog are both updated, enabling the user to navigate back and forth between zoom levels by using the Back and Forward buttons.
<!DOCTYPE html>
<html>
<head>
<title>AJAX Map</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<!-- Load the Virtual Earth map control. -->
<script src="https://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>
</head>
<!-- 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>
Every time the user zooms in or out, the fragment identifier in the Address bar is updated, as shown in the following image. On this Web page, that simply means that the integer after the number sign (#) is incremented.
.gif "Address bar showing a fragment identifier")