AJAX: How to handle bookmarks and back buttons

This article will showcase an open source JavaScript library that brings bookmarks and back button support to AJAX applications. After completing this tutorial, developers will be able to get solutions to an AJAX problem (not even Google Maps and Gmail now offer the solution): A powerful, available bookmark and back forward feature that behaves like any other Web application.

This article describes the serious problems that AJAX applications face in using bookmarks and back buttons, and displays the Really simple History (RSH) Library-an open source framework that addresses the above issues, and provides several examples of running.

The main inventions of the framework shown in this paper are divided into two parts. The first is a hidden HTML form that caches client information for a large number of short sessions; This caching feature provides strong support for page navigation. followed by the combination of hyperlink anchors and hidden iframe, which are embedded in the back and forward buttons to intercept and record browser history events. Both of these techniques are packaged in a simple JavaScript library to simplify development.

Problem

Bookmarks and Back buttons work very well in traditional, multiple-page Web applications. When a user browses to a Web site, its browser's address bar record is updated with the new URL, which can be pasted into an e-mail or bookmark for later use. The back and Forward buttons also work properly, allowing the user to flip forward or backward through the visited pages.

But Ajax applications are not the same, they are complex programs that run on a single Web page. Browsers are not built for such programs-such web applications are obsolete, and they need to refresh the entire page every time the mouse clicks.

In this Ajax-like software, the browser's address bar stays the same when users select features and change the state of the program, making it impossible to use bookmarks in a particular application view. In addition, if the user presses the back button to "undo" the last action, they will be surprised to find that the browser will completely leave the application's Web page.

Solution

The open source Rsh framework solves these problems by providing the ability to bookmark and control the back and forward buttons for AJAX applications. RSH is currently in beta and can run on browsers such as Firefox 1.0, Netscape 7+, Internet Explorer 6+, and Safari (for instructions, see my article Coding in Paradise: Safari:no DHTML History Possible ").

There are several AJAX frameworks that help with bookmarks and history issues, but these frameworks now have a few major bugs that are due to implementation (see "Coding in Paradise:ajax History libraries" for more details). In addition, many Ajax history frameworks are bound to larger libraries, such as Backbase and Dojo, which introduce a completely different programming model for AJAX applications, forcing developers to use a new way to gain historical functionality.

By contrast, rsh is a simple module that can be included in an existing AJAX system. In addition, the RSH library employs techniques to avoid bugs that affect other historical frameworks.

The RSH framework consists of two JavaScript classes: Dhtmlhistory and Historystorage.

The Dhtmlhistory class provides a history abstraction for AJAX applications. Ajax pages use the Add () method to add historical events to the browser, specifying new addresses and related historical data. The Dhtmlhistory class uses an anchor hash (such as #new-location) to update the current URL of the browser, associating the history data with the new URL. The AJAX application registers itself as a history listener, and when the user browses using the back and Forward buttons, the history event is triggered, providing a new location for the browser and any historical data saved with the Add () call.

Second class: Historystorage, which allows developers to save any number of saved history data. In a normal web page, when a user navigates to a new Web site, the browser unloads and clears all applications and JavaScript state on the Web page, and if the user returns with the Back button, all the data is lost. The Historystorage class solves such problems by using an API that contains simple hash-table methods such as put (), get (), Haskey (). The above method allows the developer to save any amount of data after the user leaves the Web page, and the history data can be accessed through the Historystorage class when the user presses the Back button back. Internally, we do this by using hidden form fields because the browser automatically saves the values in the form field, even when the user leaves the Web page.