AJAX - Introducing AJAX Navigations
This topic is organized into the following sections:
- An Example of the Problem
- How It Works
- Example Code
- Related topics
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."
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.
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.