Tuesday, September 13, 2005
AJAX: DhtmlHistory and HistoryStorage
Today and yesterday I've been working on an article for the O'Reilly Network named "Fixing Bookmarking and Back Buttons in AJAX Applications." All the research and coding I've been doing the last few weeks on these two issues has come together; I finished a HistoryStorage class that has nice, simple hashtable-like methods such as put(), get(), etc., and which store an arbitrary amount of data after the user has left the page. If the user returns to the page the data is still present in the history; under the covers we are using a hidden form that saves its data using the autocomplete functionality in the browser. Even better, I use some JSON code to serialize arbitrary JavaScript objects into the form, which means you can persist entire objects and logic, including XML.
I also finished the DhtmlHistory class, which creates a history abstraction for AJAX applications. AJAX applications can add() history events to the page, specifying a new location and history data. DhtmlHistory will then add this location to the browser location bar using an anchor hash, such as #new-location, and persist the history data with that particular location. Applications can also register themselves as history listeners, so that as the user moves around the page using the back and forward buttons and changing the page, they will receive a history event with the new location and any history data that was persisted before. The DhtmlHistory class uses the HistoryStorage class to persist history data and also to detect some important edge cases.
The article will cover how to fully use these two classes, which are open source under a BSD license, as well as a full example showing their use, but for now you can see the frameworks and two example test files using both here. Check out testHistoryStorage.html, which tests loading and saving complex data into the history; navigate away from the page and then back using your back and forward buttons, and you will see that all the data is saved, including an entire OPML XML file that was loaded before. Also see testDhtmlHistory.html, which tests updating the browsers AJAX location several times; press the back and forward buttons to see the history events printed out; leave the page by going to Google, and then return; all of the history data is persisted and saved.
The classes work in Internet Explorer/Windows and Firefox; Safari is a lost cause, unfortunately. They differ from some other frameworks that solve the history/bookmarking problem in AJAX apps by handling alot of edge cases these other apps don't solve, such as leaving the page and returning, including allowing the history data to be entire JavaScript objects that persist after you leave the page.
Download the latest version.
I also finished the DhtmlHistory class, which creates a history abstraction for AJAX applications. AJAX applications can add() history events to the page, specifying a new location and history data. DhtmlHistory will then add this location to the browser location bar using an anchor hash, such as #new-location, and persist the history data with that particular location. Applications can also register themselves as history listeners, so that as the user moves around the page using the back and forward buttons and changing the page, they will receive a history event with the new location and any history data that was persisted before. The DhtmlHistory class uses the HistoryStorage class to persist history data and also to detect some important edge cases.
The article will cover how to fully use these two classes, which are open source under a BSD license, as well as a full example showing their use, but for now you can see the frameworks and two example test files using both here. Check out testHistoryStorage.html, which tests loading and saving complex data into the history; navigate away from the page and then back using your back and forward buttons, and you will see that all the data is saved, including an entire OPML XML file that was loaded before. Also see testDhtmlHistory.html, which tests updating the browsers AJAX location several times; press the back and forward buttons to see the history events printed out; leave the page by going to Google, and then return; all of the history data is persisted and saved.
The classes work in Internet Explorer/Windows and Firefox; Safari is a lost cause, unfortunately. They differ from some other frameworks that solve the history/bookmarking problem in AJAX apps by handling alot of edge cases these other apps don't solve, such as leaving the page and returning, including allowing the history data to be entire JavaScript objects that persist after you leave the page.
Download the latest version.
Subscribe to Posts [Atom]
