AJAX back button implementations: how do they work?

Question

My page so far loads once, and then it's all AJAX from there, baby :D. So obviously, back/forward/reload/history/bookmarking seriously breaks it. I'm researching some solutions (I'm eyeballing jQuery plugins, aka BBQ or Address) and I'm curious to how they are implemented.

All that I am seriously interested in is Back/Forward functionality, as this is a true "app" for the usage of maybe 5-6 people to help coordinate their jobs and is in no way shape or form a "web document". I'm trying to prevent an average user's accustomed window manipulation habits from breaking my app.

So far I haven't come across a situation where more than one state could enter another state, and therefore my return functionality has been fairly simple to implement. None of the return functionality has been implemented using the "Back" feature, however, just through Cancel, Back and other buttons.

But I digress... So far I really like the idea of a simple URL fragment identifier system to allow for backwards/forwards functionality and I would really like to avoid throwing other people's code at the problem (this is my first webapp and I'm trying to do everything as painfully as possible in order to learn).

Ok, no more digressing... I got the impression from this article at Content with Style that I could use a timer to poll my window URL and trigger the appropriate AJAX actions.

What I am interested to know is:

1. If the common plugins for fixing AJAX's back/forward breakage use a similar method and if not, what methods do they use?
2. What are the pros. and cons. of the polling method, as well as any of the alternative methods.
3. Could I implement a simple version of these methods that will accomplish my goals? (say under 150 lines).
4. Is it worth it to do it myself? Am I going to learn anything valuable if I implement this? Will my (in theory) simpler version really be that much less code than a comprehensive plugin?

Answer 1

If the common plugins for fixing AJAX's back/forward breakage use a similar method and if not, what methods do they use?

They use both polling and the hashchange event.

What are the pros. and cons. of the polling method, as well as any of the alternative methods.

• Pros of polling: Not all browsers support hashchange so it's cross-browser
• Cons of polling: More expensive in terms of performance

Could I implement a simple version of these methods that will accomplish my goals? (say under 150 lines).

If you are writing the application for only 5 people, might as well force them to use a modern browser that supports the hashchange event. Then you can write the hash change detection in just 2-3 lines :)

window.onhashchange = function(event) {
    var url = event.newURL;
    // do something with new url
};

Is it worth it to do it myself? Am I going to learn anything valuable if I implement this? Will my (in theory) simpler version really be that much less code than a comprehensive plugin?

Yes, see above. You could write a much better implementation yourselves in very few lines of code. For example, Rails uses a router to dispatch requests to controllers. The routes are defined like:

"/signup"           -> (UsersController, new)
"/user/(id)/photos" -> (PhotosController, index)

You could define your own routing API to register routes and their handler functions/objects in JavaScript and do a lot more cooler things than may be possible with existing plugins, just limited by your imagination :)