In the past year, many sites have upgraded to use AJAX, loading dynamic content to their sites with JavaScript and some server side data format. This is a huge boon, to the UI as it is no longer the click and wait paradigm of Web 1.0. However, the downside of JavaScript loaded, dynamic content is that is not bookmarkable and breaks the history flow the client browser.

At the end of last year, we saw many companies competing to produce the best JavaScript history manager, including big names like Google and YAHOO. In the coming year, I believe most AJAX sites will start including a history mechanism. I am putting my support behind Really Simple History (RSH). As, I have mentioned before, RSH is simple, clean, and easy to use. It is also getting continued support by Brian Dillard of Agile Ajax.

RSH is easy to use, and I believe Brian does a good job at explaining how it works. For the rest of this article, I will assume, you have everything included properly and understand basically how RSH works. You might have written code that looks something like the following for managing history on a page:

This example shows a complete template for using RSH included in a page controller. Modify this to your liking and include it as the last file on your page (if not the end, then at least after rsh.js is included) to get RSH to work. Now lets discuss how to use JSON with RSH:

First, prefix all locations with a unique string; in this example we use location: as the prefix. The prefix is important for filtering "window.hash" changes so they do not break your code, as your history code path wont execute if the location prefix is not present. It also, helps for readability of the location portion of the URL.

Second, when we use the history (add and update) we convert our parameters to a JSON object in String format. "json.js" will be included in the project anyway (or an equivalent package) for use with RSH, so you can leverage it to convert JSON objects to and from strings, otherwise, you can do it manually as I have in the add function. It is important to unescape the retrieved location in the history callback function as the history code will have escaped it before adding it to "window.hash".

Using these techniques you can now store your RSH location history as a JSON object, which is helpful if you typically use JSON objects to store JavaScript data or you were simply confused how this worked. If you prefer JSON objects, then you will have to do one less conversion in your code, and JSON objects are a robust and well-known format.

Hopefully, you also now have the understanding of RSH to modify this code to support storing the history as a query string or some other mechanism. Feel free to comment if you have any questions.