How to update page html and url without actual page refresh

Question

I am wondering if anyone can point me in the direction of learning how to update the page html and url without refreshing the page.

Are there any existing javascript libs that handle this or it there a good book that covers this sort of thing.

Here is an example site using that effect.

http://onedesigncompany.com/

Notice the actual html is update when the section is changed as well as the url while maintaining a smooth transition with no visible page refresh. The site also works properly without javascript.

Also if anyone sees any downside to using this approach I am all ears.

Answer 1

If you need to re-load a portion of a page, without reloading the entire page, I would highly recommend using jQuery.Load():

http://api.jquery.com/load/

With jQuery.load() you can select a div and reload content into it from another webpage. For example:

$(".myDiv").load("/myOtherwebpage.html");

You can also specify content from a particular element on that other page:

$(".myDiv").load("/myOtherwebpage.html .myOtherClass");

However, if you need to reload all the content from another page, and change the URL to a different page, then I would just recommend linking to that page. Theres no performance benefit from doing this through jQuery.