如何在没有实际页面刷新的情况下更新页面html和url

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.

Answer 2

There is, and it's called PushState .

It's a newer technology which most of the newest browsers (internet explorer excluded :P) support. Basicly it alters the adressbar through javascript.

I might seem as nothing but it's really neat! Usually you'd do this through the hash www.example.com#/contact for example.

The latest project that I've used this technology I've used a js plugin called History.js whcih can determine if your browser supports PushState or not.

Depending on this I either bind an event to relevant links which does a pushstate and some ajax instead of loading the new site, or let the <a href=""> act normally.
That makes all browsers rather happy.

Basicly my script creates the same result with refresh as with pushstate and ajax.

EDIT:
Just a side note on that example of yours. It's quite smartly made :)
It loads new pages through ajax and gets it's HTML, but if you browse that page again it redisplay the fetched results so no unneeded ajax calls are being made.