javascript - AJAX and the Browser Back Button

Question

I run a browser based game at www.darknovagames.com. Recently, I've been working on reformatting the site with CSS, trying to get all of its pages to verify according to the HTML standard.

I've been toying with this idea of having the navigation menu on the left AJAX the pages in (rather than taking the user to a separate page each time, requiring a reload of the title and nav bar, which almost never change) and I know that if I do so, I will probably break the Forward/Back buttons in the browser. My question I guess is, should I go ahead and AJAX the site, thus requiring the user to use the sites navigation to play the game, or should I leave the site as it currently stands, and use standard hyperlinks and things for navigation?

The reason I ask I guess is that I built a forums system into the site, and a lot of times I would want to link say to a particular topic within the forums.

I'm also open to suggestions. Is there a standard (preferably without traditional frames) way to make only the body area of the site reload, while still changing the URL so that users can bookmark and forward/back, etc? That could potentially solve my problem as well. I'm just asking for the best solution here, not an answer to a specific question. ^_^

Thanks

Answer 1

Use ajax for portions of the page that needs to update, not the entire thing. For that you should use templates.

When you want to still preserve the back button for your various state changes on the page, combine them with # achors to alter the url (without forcing the browser to issue another GET).

For example, gmail's looks like this:

mail.google.com/#inbox/message-1234

everything past the # was a page state change that happened via ajax. If I press Back, I'll go to the inbox again (again, without another browser GET)