changing page url without refreshing page

Question

Is this even possible?

Here\'s the problem:

I have a keyword search with this URL(after searching) : http://localhost/thi/search?keyword=key

Then I h

Answer 1

You can use hash urls (search#price=100) with window.location.hash methods. These will get bookmarked and user can navigate through these with back and forward buttons.

Usage sample:

<a href="#">100</a>

$('a').click(function() {
    window.location.hash = 'price='+$(this).html();
    return false;
});

Will set the url to search#price=100 without refreshing.

Answer 2

The best thing I can suggest for this would be to use the hash in the url. This will allow users to bookmark the url and still keep state when they come back. The other benefit is that you can change the hash without refreshing the page.

So your url would look something like...http://localhost/thi/search?keyword=key#price=100

The JQuery Address plugin would work really well for this.

http://www.asual.com/jquery/address/

Answer 3

With HTML5 it's possible. Use window.history.pushState().

Example :

if(currentHref!=window.location){
    window.history.pushState({path:currentHref},'',currentHref);    
}

Details and explanations : http://tinywall.info/2012/02/22/change-browser-url-without-page-reload-refresh-with-ajax-request-using-javascript-html5-history-api-php-jquery-like-facebook-github-navigation-menu/