I have really liked how the new Twitter and Facebook have saved page loads by instead loading the content dynamically through ajax. I want to start rolling this out to my sites, but I have no idea where to even start.
Twitter and Facebook now have uri's like this: http://twitter.com/#!/messages
$(document).ready(function () {
// Check if a hash exists already and if so load that page instead.
if(window.location.hash) {
$("div#content").load(window.location.hash);
} else {
// load the home page.
$("div#content").load("http://localhost/home/");
}
// Allow menu to change url hash and load new content.
$('ul#menu li a').click(function() {
$("div#content").load(window.location.hash);
});
});
The html for the menu I have:
<ul id="menu">
<li>< a href="#">logout</a></li>
<li>< a href="#!/settings">settings</a></li>
<li>< a href="#!/messages" class="notify">messages <span>3</span></a></li>
<li>< a href="#!/profile">profile</a></li>
<li>< a href="#!/" class="selected">home</a></li></ul>
Any idea how Facebook or Twitter does this?