The Problem

In my previous post, Don’t Break The Back Button, I explained the difference between URL changing “horizontal” links and Ajax’s non-URL changing “vertical” links. If you haven’t already read that post, I encourage you to do so before reading this one.

In addition to potentially breaking the back button, Ajax’s vertical links can ruin a browser’s ability to link to the current resource. This is very similar to the way in which HTTP POST requests can’t be bookmarked in the same way as HTTP GET requests since they don’t include any query data in the URL.

Not only will this problem frustrate users who are interested in coming back to your web site; it will also make it difficult or impossible for search engines to properly link to your second-tier resources.

Solution #1: Use an Ajax History Library

The same libraries discussed in the previous post that solve the back button problem can also be used to solve Ajax’s bookmarking problem. I’ll re-list those resources here for convenience:

• The Mike Stenhouse approach. - A pretty simple solution that works in most, but not all browsers. Demo his code in action and watch what happens to the URL as you click the links on the side.
• Really Simple History - Created by Brad Neuberg, this library strives to be complete without being complex. Better yet, it’s available under a BSD open source license. Brad’s created a walk-through of his code as well as an online demo.
• Plex - Plex is an open source Ajax framework that supports many features, including back button support.
• Dojo - Dojo is another open source Ajax toolkit that supports a number of Ajax functionality, including support for the back button.

Solution #2: Create Bookmark Quick Links

Although not a perfect solution, providing the user with a link to the current page (with its current state information in the query string) can partially make up for the lack of bookmarking support. This is the approach that Google Maps uses. When a user queries an address at Google Maps, the URL initially remains the same. (http://maps.google.com) However, when clicking “Link to this page”, the URL is reformatted to include the street address in the query string. (http://maps.google.com/maps?f=q&hl=en&q=pittsburgh,+pa&btnG=Search)

This technique is essentially creating a horizontal representation of the otherwise vertical link that led to the page with its current state. Implementing this solution requires a few considerations:

• Premature Bookmarking - The approach won’t work if a user bookmarks the page before clicking the bookmark quick link.
• URL Encoding - If the state data contains special characters (such as tabs, percents, ampersands, etc.) they will need to be URL encoded when the quick link is created.
• Data Exposure - If the state data contains sensitive information such as a password, you might not want to expose this data in the query string. (Then again, if the state data contains sensitive information you might not want to allow bookmarking in the first place.)