Ajax history, Stateful Applications

The biggest problem with Ajax applications is saving state and accomodating the familiar progression of the history controls (Back/forward buttons). Ajax allows the document to become stateful, but when the user instinctively goes for the history controls in the browser window, things go wrong. The user expecting to see the previous state of the document is suprised to see a webpage they were on 20 minutes ago, before they arrived on your application.

Theories and the like

This problem has been addressed by many developers including myself.

• DHTML Nirvana an interesting approach using IFRAMES, it had some shortcomings for me in FF 2.0 but a good effort at the problem.
• Brad Nuremburg describes a method using window.location, a polling interval and a structured HashMap object.
• Aaron Swartz talks about the issue, wasn't able to find his implementation or a demo of his approach in action.
• Ajax.Service.History my prototypejs extension to handle the history controls.
• Method for saving state my approach for handling state restoration in ajax applications.

The Clash of Coupling

As you can see above I have an article addressing each fundamental issue with the overall problem with "ajax history". The problem still exists because I cannot combine these methods. When using the IFRAME approach the user can't quickly say "Bookmark this Page" as the URL of the window hasn't changed. Modifying the URL will ruin the IFRAME approach for Gecko browsers as it registers as a new page in the history array. Strictly modifying the window.location has two disadvantages, one it requires polling as there is no proper DOM event to capture this. Two it won't work in IE and despite my passionate hatred for the browser I still work to accomodate those users.

An Interface to Accomodate

Although the most convienent and ideal interface isn't quite achievable I believe the "fail over" is still sufficient. The idea is very similar to Google Maps, maintain history privately but allow a control for the user to easily access the URL to rebuild the current state. The control being a "Bookmark Link", a link placed prominently on the page that contains the URL information for state restoration.

Straight to the Implementation

I could profess this idea a lot more but writing English to describe Javascript is a situation begging for plenty to be lost in translation. Please visit my project site to see a demonstration of this technique. It is a page showing off a very simple technique for updating content from a navigation component.

Conclusion

• TiteSite, a concrete approach to an ajax history solution
• Ajax.Service.History my prototypejs extension to handle the history controls.
• Method for saving state my approach for handling state restoration in ajax applications.
• EventDispatcher a class to implement custom events, a core superclass of Ajax.Service

Comments

Name
Site
Comment
	Reload Captcha Image
Captcha