URL Substitution: A Hypothetical Solution to the Back Button/Bookmark Problem

html5I've talked about Ajax before, and I'm going to start talking about it more now that I'm working on a personal project revolving around it. So that means I'm going to get pretty technical here, feel free to skip these entries if you're not interested in that.

Anyhow, one of the big "problems" with Ajax is that it somewhat breaks a couple of the standard interaction models that the web is built on. Specifically, Ajax web applications have trouble with the Back button and with bookmarks. Personally I don't think either of these are particularly serious, though they do have to be dealt with and no perfect solution yet exists.

I think I've come up with what would be the correct solution, however it's not something that can be done yet, because it requires the the browser manufacturers (specifically Microsoft, Mozilla, Apple and Opera) to make a change to how the XMLHttpRequest object works.

Let me describe the general problem before I get into the solution. In traditional web applications, you generally know you can hit your back button to return to where you were previously, and you can bookmark your current page to return to it later. We all know this, and we've come to expect it. For instance, at Amazon, if I perform a search, I know I can bookmark the results page and be able to return to it at a later date, even if I've done other searches since then. Similarly, if I click on an item to go to its product details, I know I can hit the Back button and return to my search results.

However, in an Ajax application, things aren't so simple. The reason I can back-button and bookmark to my heart's content is because each of these things are unique pages. In other words, there is a specific URL for this specific search, and there is a specific URL for that specific product. Having a unique URL is what allows me to return at a later date to the same resource regardless of whatever interactions have occurred in the meantime. But the whole point of Ajax is to be able to take actions on a given web page, such as searching or viewing product details, without having to leave the page or reload it. The whole point is to not have a unique URL for any given application state.

So that means no bookmarking and no back-buttoning. For instance, if you perform a search on this page using the search box on the right, you can't bookmark the search results because there is nothing to bookmark. Similarly, if you perform one search and then perform another, hitting your back button won't take you back to the previous search. For some, this is a huge problem, but as I've said, I think it's a minor one that does need to be addressed.

Basically, Ajax works by having Javascript fetch data from a web server without loading a new page. There are actually several methods for doing this, but the most common, and the most forward thinking, is the XMLHttpRequest object. My idea, which I'll call "URL Substitution" focuses solely on this method and utilizes (but does not depend on) one of XMLHttpRequest's most underutilized features, the ability to set a custom HTTP header.