Are Github and Amazon using AJAX to simulate transitioning to a different page?

Question

My testing environment:

• Latest Chrome and Firefox
• Javascript enabled

On amazon.com, across both Chrome and Firefox while changing to the different pages of a search result or best sellers list, I notice that an AJAX action is performed. The header and footer stay the same while the middle content changes. I know this can be done through AJAX but I also notice that the url changes from

www.amazon.com/stuffs/#1

to

www.amazon.com/stuffs/#2

The back button is also working properly to switch back to the last page. Is javascript being used to tell the browser to store those dynamic pages? Or is the back button caught through javascript to display the proper pages through AJAX?

You can also observe a similar behaviour across any repositories on github. It seems to be working on Chrome while logged into my account. Can someone shed some light on how this is done?

Answer 1

The GitHub guys are testing something new from HTML5 and CSS3 (HTML5 History API). They have described the process in their blog:

https://github.com/blog/760-the-tree-slider

Nice you notice those details.

Answer 2

I think Amazon's is pretty standard AJAX history. There are multiple techniques for monitoring the hash (the part after #) in older browsers (primarily polling and hidden iframes). In new browsers, you just use onhashchange.

You can see this question for an intro, and this search for more information.

Answer 3

If you like jQuery, see the jQuery BBQ plugin for a convenient set of tools to do this yourself.

I've also written a simple no-library version that you can see here: http://phrogz.net/JS/hashstate_test.html

On complex sites you can store a lot of page state variables in the hash; in my simple example above I'm using a single ID to indicate the state the page should be in.

Answer 4

github uses the HTML5 history API; see their blog entry.