Ajax is great but…
June 28th, 2006It has a lot of the same challenges that you have to deal with when developing in flash. In one of my current projects, we load an array of images from the database without refreshing the page. It “seems” as though you are paginating from page to page but you are not. Instead, you are clicking on icons (page 1, page 2, page 3 and so on) and Ajax handles the content processing without the post back. We thought that was an elegant solution in this case.
Except for the broken back button. Say you see a photo on page 3 that you like. You click on it. You get a preview. Then you decide you don’t like it so much after seeing the larger version so you hit the browsers back button. Where would you expect to go? Page 3 right? Wrong. Ajax sends you back to the originating page 1. Thus, the harsh reality about Ajax sets in. You cannot do three obvious things easily.
* Click back from an AJAX enabled page page
* Clickforward to an AJAX page
* Try bookmarking an AJAX page.
One URL refers to one page of content right? Isn’t that what we’ve learned? Not so in this modern age. Time to rethink our thinking.
In the AJAX world, unlimited documents can have the same URL and that’s the intended point! There’s the originating document as well as your newly requested information created on the fly through a DOM change. All on the same page. Lovely in most cases.
In my view, the understanding is simply that “the Back button takes me back to where I was before I clicked that last thing“ though the hard-core among us know that Back doesn’t mean “return to the state before the last click” rather it means “go back to the previous pageâ€. It’s all semantics.
Web tennants are:
* HTML and variants for rendering the client side experience (throw some flash in if you like)
* Addressing of targets is done via URLs.
* Client-server communication is done via HTTP
The major difference between Ajax applications and traditional Web applications is that Ajax applications can handle user interaction without page reloads. Loading data from the server via the XMLHttpRequest object is one example but there are many other examples as you can see from a review of the freely available Dojo classes which are very popular. Drag-and-drop tricks using java script on the client side is a pretty common example these days.
As discussed, the state changes without generation of a new URL. Therefore, clicking the back or refresh button will have unexpected effects, and there is no “deep-link URL in the address bar”.
Therefore, we need to figure out how to create a history of where we were and how we got there.
We need to save that state.
We need to create a URL that refers to that state.
We need to push that URL to the browser.
Without some event handler that creates a new URL which stores the information to recreate the previous state you cannot move forward through the surfing process. Basically, what you’re seeking to do is detect an address change from the back button and regenerate the previous state that you were expecting in the first place.
Now, you have to do this in a cross-browser way ![]()
Not fun for the developers.

















