Is there a way to change the browser's address bar without refreshing the page?

Question

I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.

After the user clicked the category I want to change the browser's address bar url from

www.mysite.com/products 

to something like

www.mysite.com/products/{selectedCat} 

without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?

Answer 1

With HTML5 you can modify the url without reloading:

If you want to make a new post in the browser's history (i.e. back button will work)

window.history.pushState('Object', 'Title', '/new-url');

If you just want to change the url without being able to go back

window.history.replaceState('Object', 'Title', '/another-new-url');

The object can be used for ajax navigation:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Read more here: http://www.w3.org/TR/html5-author/history.html

A fallback sollution: https://github.com/browserstate/history.js