Making Browser Back button work while using AJAX requests

Question

I am writing a web application which retrieves a lot of data using AJAX which substantially modifies the loaded page depending on what button the user clicked (Let's say that clicking on button1 takes the page from state0 to state1 and so on..)

Further, if the button number is passed to the server as a GET variable, the server returns the page in the correct state.

Needless to say, the back / forward browser buttons do not work because the URL is not changed during state changes accomplished through AJAX.

So, my question is, how can I make the browser back / forward buttons work?

Is it possible to supply the browser with the correct URL every time the state changes; but stop the page from reloading?

Please note that this question is only about browser back / forward buttons. I can create custom back / forward buttons but that is not what I want to do.

Answer 1

Take some time to go through some. of. the. previous. questions. on. this. topic.

Hint: use the hash man! (window.location.hash that is)

Answer 2

You will have to use # capabilities of your URL to store your intermediate Ajax requests in browser history. If you use any Javascript library there will probably be a solution in the library itself or in a form of a community extension/plugin.

For instance there's a plugin for jQuery here.

Google for browser history ajax