Ajax Requests Saved on Browser's History

Question

Is there an easy way to save ajax requests into a browser's history so that when you use the back button it will preserve the last state of the DOM?

Websites like twitter and digg that use an ajax pager have a usability flaw where if you click next page several times then click away from the site and then return using the back button, you lose your place in the viewport since the DOM is restored to the first initial request.

I noticed safari actually preserves the dom after a few ajax requests on some sites.
Here is an example, Goto http://13gb.com, Click next a few times then click on an image and then click your back button. On webkit it preserved the last DOM state, but on gecko and ie it does not.

What would be the easiest way to replicate this functionality on other browsers?

Answer 1

I'm not the first person to tackle this type of problem. I've drawn inspiration and know-how from several places to get this up and running:

The original bookmark/back button fix, as used by Flash developers for a little while now:

http://robertpenner.com/experiments/backbutton/flashpage.html

I've not actually looked at how they implemented their solution but this is where I got the idea for replacing Robert Penner's frames with iframes:

http://dojotoolkit.org/intro_to_dojo_io.html#so-about-that-thorny-back-button

Rich Rutter's use of the hash for bookmarking:

http://clagnut.com/sandbox/slideshow.html#5

For this little experiment I've used Harry Fuecks' JPSpan

It's a fantastic framework that makes the methods you define in your server-side PHP classes available to your Javascript via XmlHttpRequest.

It's the simplest way I've come across to get started with AJAX. I had the guts of my demo up and running in about 10 minutes! I'm using Algorithm's Timer object:

http://codingforums.com/archive/index.php/t-10531.html

And Scott Andrew's cross-browser event handler: http://scottandrew.com/weblog/articles/cbs-events

Source: http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

For jQuery: http://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin

Answer 2

You may be interested in the jQuery History plugin: http://tkyk.github.com/jquery-history-plugin/

Mark.