AJAX History Libraries

I know of the the following AJAX libraries and techniques which address bookmarking and the back button in AJAX applications: Backbase, Dojo, Mike Stenhouse's "Fixing the Back Button and Enabling Bookmarking for AJAX Apps" article, Erik Arvidsson's Hash Listener library, and the Really Simple History framework I created recently. I will be fully describing the Really Simply History library in a forth-comming article from the O'Reilly Network.

The following major issues affect all of the AJAX history libraries I have evaluated, other than the Really Simple History framework.

First, some history frameworks, such as Dojo, use JavaScript objects to store an internal representation of the state of an AJAX application's history; unfortunately, browsers completely clear out all JavaScript objects when a user leaves a page. If a user interacts with an AJAX application, navigates to Google, and then returns to their original AJAX page, the AJAX history framework's internal state is erased and becomes confused.

Another bug that affects many frameworks is that they do not differentiate between the first time a page truly loads versus "fake" page loads. In many browsers, when a user first loads an AJAX application, the browser will throw an onload event. Later, if the user navigates to a different web site and then returns using the back button, the browser will throw a new onload event even though the page already loaded the first time. Many subtle bugs can occur in AJAX history frameworks unless these two kinds of load events are differentiated.

Finally, I have not seen an AJAX history framework that will detect when a user has manually entered a new hash location in Internet Explorer.

The Really Simple History framework, available here, uses several techniques to solve these bugs. The primary mechanism is achieved using DhtmlHistory, a JavaScript class that allows developers to store history state after the browser has left a web page. This data is persisted between page loads using the auto save capability of web forms; see my blog post "AJAX Tutorial: Saving Session Across Page Loads Without Cookies, On The Client Side" for implementation details. DhtmlHistory wraps the auto save trick with an easy hash table API for developers, and the main RSH framework then uses the DhtmlHistory class to implement stateless tracking of history; variables that allow the detection of fake versus real page load events; and more.


Matt Raible said…
I gave your download a 5 minute spin and couldn't get it to work. It seems like all I should need to do is call dhtmlHistory.initialize(); when my page first loads. Do I need to call dhtmlHistory.add("uniqueId", "doesntmatter") whenever I execute a DHTML request?
Ricardo Antunes said…
Brad Neuberg wrote an article on how to use this framework on onJava.com -
AJAX: How to Handle Bookmarks and Back Buttons
Brad Neuberg said…
Matt, you must make sure that you are working from a local web server when you are using RSH (you should do this in your DHTML work in general, since browsers behave quite differently for file:// URLs versus http:// ones).

You also need to call dhtmlHistory.add to register history events, or else they won't be registered.

Uncle Stinky, thanks for finding that.
wvtechs said…
I have tried downloading the "latest.zip" several times and it appears to be corrupt. I managed to get a copy of dhtmlhistory.js from another source and had the "line 512" problem as well. After fixing that I am still unable to get it to store the history in IE 6.
tenero said…
I find some problem with asp.net.
when i use the library, if working in page(.html),it works ok.
but if working in page(.aspx),it’s wrong.
when i refresh the page(.aspx),it can't back incorrectly.
Unknown said…
Hi Brad,

I have tried using RSH on my website but without luck can you give me step by step instruction in setting up the same.
Matt said…

Brad, a very good approach, I enjoy seeing how other forward thinkers continue to develop solutions. I have also created a solution that involves a new HTML Microformat and doesn't require
polling, two features I thought were particularly appealing. If
you're interested in a method for handling the infamous back/forward
buttons in Ajax applications the full article can be read here.


E. P. Hertzog said…
It appears no one has ever actually gotten this thing to work. Does anyone have a working example online to see before I waste anymore time on this?
Brad Neuberg said…
@Ed: RSH works; the comments are of various forms, from "Can you help me with your homework?" basically, where someone wants me to do the hard work for them so I don't respond, to people having issues with the download link (it turns out many corporate firewalls and proxies corrupt the ZIP file, so they have a TAR file they can download). RSH currently has issues with IE 7, because I haven't been able to maintain the library for the last year, but has been used for many years by many sites to reliably help with history. If you search online you will find an easy patch that makes RSH work with IE 7.

balupton said…
Other fantastic libraries include jQuery History which provides nice tracking of hash changes for your website. And jQuery Ajaxy which allows you to have a rich ajax website while still supporting the back and forward buttons and no server side changes.
jQuery History: http://www.balupton.com/projects/jquery-history
jQuery Ajaxy: http://www.balupton.com/projects/jquery-ajaxy