Confused about jQuery $ .get and $ .load

Question

On my site, I would like to load an AJAX page, as shown on Facebook, Twitter and the relatively small Kotaku Gaming site.

Basically, this is what I want to do: a header that remains static on all pages in the domain and only loads content into a specific container using AJAX and jQuery.

jQuery $. load () is almost perfect, but only almost. This is basically the code I would use:

$("#content").load("site.html"); 

However, when another page is "loaded" with this function, the URL does not change. This will lead to the destruction of bookmarks, as well as to binding, and therefore unacceptable. URL must be changed.

Problem with $. get () is that the title changes along with the rest of the page, which of course is not what I'm looking for.

Can someone help me with this? If the sites mentioned above can do this, why can't I?

Answer 1

First answer to How do I change the page URL without refreshing the page? should do the trick for you - use pushstate to push the new address. Please note that this will not work in older browsers, I would suggest that the best theory is to go back to traditional methods.

Answer 2

If you want the URL to change each time the page loads, but the title should remain the same, you might just want to create a template for the title and then change the content section of each page.

If you are using something like a PHP link, it should be pretty simple with include / require or similar.