Change URL in browser address bar without reload e

Question

Possible Duplicate:
Modify the URL without reloading the page

I'm looking for a way to make my internal links functional using my current javascript animations, without causing the page to reload when you click on them - but I would like the URL to update in the browser.

Many websites do this, here is a good example: http://grooveshark.com/#!/search?q=adf

How do they get the URL to update without the page reloading?

---

More details:

Currently a link on my page looks like <a href="#aboutus">About Us</a>, this takes you to <div id="aboutus"></div> via javascript.

The javascript looks something like:

$("#navigation a").click(function(e){
  animate(..scroll to section..);
  e.preventDefault(); // <==========
});

I believe the "e.preventDefault()" is what is causing the URL to not be updated, but how do I prevent the browser from reloading the page when the URL is changed?

How do other websites do it? What is this method called (so I can further research it)?

thanks.

Answer 1

Here is a similar question.

Here is an example:

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState(
        {
            "html":response.html,
            "pageTitle":response.pageTitle
        },
        "",
        urlPath
   );
}

Answer 2

It looks to me like the whole thing is done with AJAX. The #! in the URL is causing the browser to interpret the remainder of the URL as an anchor -- anchors don't cause page reloads (in fact, the server will never see what anchor the browser is on in the course of a normal HTTP request). When the URL changes, Javascript takes over, inspects the querystring, and loads whatever is appropriate from the server using web services.

I haven't looked at it too much in depth, but that is what it looks like to me.