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)