jQuery Twitter/Facebook like navigation de la page

Question

J'ai vraiment aimé comment le nouveau Twitter et Facebook ont ​​sauvé des charges de page en chargeant le contenu dynamiquement par ajax. Je veux commencer à déployer cela sur mes sites, mais je ne sais pas par où commencer.

Twitter et Facebook ont ​​maintenant des années uri comme ceci: 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); 
}); 

}); 

Le code HTML pour le menu que j'ai:

<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> 

Toute idée Facebook ou Twitter ce que cela?

Answer 1

Ce sera le meilleur answer

espoir va aider les autres aussi.

Answer 2

On dirait que vous demandez simplement comment fonctionne Ajax. La meilleure façon de commencer à utiliser Ajax est avec jQuery et le meilleur type de chargement de pages que vous pouvez faire sont des fichiers texte. Essayez quelque chose comme ceci

1) créez un fichier contenant une seule lettre "A". Nommez le fichier "A.txt". 2) créer un fichier contenant une seule lettre "B". Nommez le fichier "B.txt". 3) créer une page HTML complète qui charge jQuery et nommez-la Test.htm. Dans ce fichier, créez ce code:

<input type="button" class="LoadMyDiv" id="ButtonA" value="load A"> 
<input type="button" class="LoadMyDiv" id="ButtonB" value="load B"> 


$(document).ready(function() { 
     $(".LoadMyDiv").click(function() { 
     $("#Adiv").load("A.txt"); 
     $("#Bdiv").load("B.txt"); 
}); 
}); 
<div id="ThisDiv"></div>