ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

AJAX: How to Handle Bookmarks and Back Buttons

by Brad Neuberg

This article presents an open source JavaScript library that finally brings bookmarking and back button support to AJAX applications. By the end of this tutorial, developers will have a solution to an AJAX problem that not even Google Maps or Gmail possesses: robust, usable bookmarking and back and forward behavior that works exactly like the rest of the Web.

"AJAX: How to Handle Bookmarks and Back Buttons" explains the significant issues that AJAX applications currently face with bookmarks and the back button; presents the Really Simple History library, an open source framework that solves these problems; and provides several working examples.

The principal discoveries of the framework presented in this article are twofold. First, a hidden HTML form is used to allow for a large transient session cache of client-side information; this cache is robust against navigation to and away from the page. Second, a combination of hyperlink anchors and hidden iframes is used to intercept and record browser history events, tying into the back and forward buttons. Both techniques are wrapped with a simple JavaScript library to ease development.

The Problem

Bookmarks and the back button work great for traditional, multi-page web applications. As users surf websites, their browsers' location bars update with new URLs that can be pasted into emails or bookmarked for later use. The back and forward buttons also function correctly and shuffle users between the pages they have visited.

Related Reading

XML Hacks
100 Industrial-Strength Tips and Tools
By Michael Fitzgerald

AJAX applications are unusual, however, in that they are sophisticated programs that live within a single web page. Browsers were not built for such beasts--they are trapped in the past, when web applications involved pulling completely fresh pages on every mouse click.

In such AJAX software as Gmail, the browser's location bar stays exactly the same as users select functions and change the application's state, making bookmarking into specific application views impossible. Further, if users press their back buttons to "undo" a previous action, they will find to their surprise that the browser completely leaves the application's web page.

The Solution

The open source Really Simply History framework (RSH) solves these issues, bringing bookmarking and control over the back and forward buttons to AJAX applications. RSH is currently in beta and works with Firefox 1.0, Netscape 7+, and Internet Explorer 6+; Safari is not currently supported (for an explanation, see my weblog entry " Coding in Paradise: Safari: No DHTML History Possible").

Several AJAX frameworks currently exist to help with bookmarking and history issues; all of these frameworks, however, suffer from several important bugs due to their implementations (see " Coding in Paradise: AJAX History Libraries" for details). Further, many AJAX history frameworks are monolithically bundled into larger libraries, such as Backbase and Dojo; these frameworks introduce significantly different programming models for AJAX applications, forcing developers to adopt entirely new approaches to gain history functionality.

In contrast, RSH is a simple module that can be included into existing AJAX systems. Further, the Really Simple History library uses techniques to avoid the bugs that affect other history frameworks.

The Really Simple History framework consists of two JavaScript classes, named DhtmlHistory and HistoryStorage.

The DhtmlHistory class provides a history abstraction for AJAX applications. AJAX pages add() history events to the browser, specifying new locations and associated history data. The DhtmlHistory class updates the browser's current URL using an anchor hash, such as #new-location, and associates history data with this new URL. AJAX applications register themselves as history listeners, and as the user navigates with the back and forward buttons, history events are fired that provide the browser's new location and any history data that was persisted with an add() call.

The second class, named HistoryStorage, allows developers to store an arbitrary amount of saved history data. In normal pages, when a user navigates to a new website, the browser unloads and clears out all application and JavaScript state on the web page; if the user returns using the back button, all data is lost. The HistoryStorage class solves this problem through an API containing simple hash table methods such as put(), get(), and hasKey(). These methods allow developers to store an arbitrary amount of data after the user has left a web page; when the user returns using the back button, the data can be accessed through the HistoryStorage class. We internally achieve this using a hidden form field, taking advantage of the fact that browsers autosave the values in form fields even after a user has left a web page.

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow