///Maintaining history in AJAX applications

Maintaining history in AJAX applications

For client-side web developers, maintaining history – and working with the default “back” and “forward” browser buttons – can be a major challenge for building an effective AJAX web application. As HTTP is fundamentally stateless, the current URL has long been the standard for recording a user’s current “location”. With the Really Simply History library, developers can embrace this concept using a simple Javascript library to maintain history for their AJAX applications.

Ever noticed some of the URLs in Gmail? Here’s a few samples:

https://mail.google.com/mail/#inbox
https://mail.google.com/mail/#sent
https://mail.google.com/mail/#(some long string) – for a message

Gmail uses the in-page anchor part of the URL to identify a particular section of the page. In this case, the client-side JavaScript then handles any events relating to the URL to show the appropriate content. Javascript includes events that can be fired when a new anchor within the current page is requested. As an upside, links on a Gmail page are real links – <a> tags with URIs, not onclick handlers or the like.

The most commonly used library to achieve this is Really Simple History, by Brad Neuberg and Brian Dillard. Really Simple History maintains an internal data store of the current history, so that you can implement your own back and forward buttons. Most importantly, however, it provides a simple API to handle your events, such as adding an item to history or responding to a new location request.

Using Really Simple History is easy; after including two .js files, the library is ready to go. It doesn’t jump into action automatically – you initialize it in your code to control when and where it’s used. There’s also a version for Prototype users, which cleanly integrates with the namespaces. Two JavaScript classes, DhtmlHistory and HistoryStorage, provide access to the library’s functionality. The project even provides complete demo files to get you started, with samples demonstrating all common usage scenarios.

Head over to the project page and check it out.

2010-05-19T21:59:31+00:00 June 29th, 2008|JavaScript|1 Comment

About the Author:

One Comment

  1. Constantine "c69" Vesna March 5, 2010 at 9:09 PM

    Simple, yet elegant solution!

Leave A Comment