AJAX and back button

Question

How can I save history with AJAX just how github or google+ do. I use jQuery and I do not want to use some kind of hack like the # and #! tricks, because if I do, I'll need to change my whole project and make my life much more complicated?

Answer 1

Github and Google+ are using history.pushState.

You can change the current url like this:

history.pushState(null, null, '/the-new-url');

This is supported by Firefox, Chrome, Opera, Safari; not IE.

See https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState%28%29.c2.a0method

Answer 2

There are basically two options when it comes to AJAX and history.

1. The # method (which isn't a hack btw). Since you don't want that one you only have option 2 left.

2. Use PushState. This is what Facebook, GitHub and a few others use. It's not supported by all browsers though and if you want complete cross-browser compatibility you will have to use a system which can degrade to option 1.

A very simple way to implement this is Backbone.js Router class.

Answer 3

There is a simple jQuery hashchange plugin that is designed to solve this specific problem.

I haven't used it; I don't know how it keeps track of the url history.