Ajax:Change browser url and page content without refreshing the page [Facebook style]

Have you noticed the way how Facebook changes URLs in address bar without reloading the entire page? To check it, go to your Facebook wall and click on any photograph shown in the stream, the photo is displayed as a popup with AJAX techniques on the same page but the URL in address bar changes. Close the photograph, address bar points back to the URL of your wall without reloading the page.  Would you like to implement such features on your website? Continue reading.

The trick to implement this feature on any website is to make use of HTML5 history APIs – pushState() & replaceState(). These APIs lets you change the URLs in address bar without actually reloading the entire page. Mozilla developer network has a great tutorial on HTML 5 history API.  The history APIs makes it very easy to change the URLs of address page in ajax mode.

As most of the browsers are catching up with HTML 5 specifications, each browser has followed it’s own way to implement history API and that resulted in the age old problems web -inconsistent behaviour and cross-browser compatibility issues. So if you directly use HTML 5 history APIs in javascript, your code may not work consistently across all the browsers or at least to make it work you have write a lot of code.

In order to avoid cross browser compatibility issues, jQuery has a nice plugin – History.js. History.js ensures all HTML5 browsers work as expected with History API and also optionally provides a hash-fall back for HTML 4 browsers.

Demo & Resource Links

Here are few useful links on HTML 5 history API

• Demo: Change page url without refreshing the page
• History.js plugin on github
• Mozilla developer network  history API tutorial
• Popular sites that use history API: http://facebook.com , http://lifehacker.com, http://gizmodo.com/ (try in chrome or firefox)