Come funziona la navigazione AJAX con jQuery?

Come funziona la navigazione AJAX con jQuery?

Ecco una domanda che mi è stata rivolta qualche tempo fa. Si tratta di una domanda molto interessante che tocca un aspetto molto usato di jQuery.

Abbiamo una serie di pagine (about, contatti, news eccetera). Ciascuna di queste pagine ha nel codice HTML una sezione con lo stesso ID che si trova alla fine dell'URL, ossia del suo hash:

http://sito.it/news/#news

E nella pagina News avremo:


<div id="news">...</div>

Come prima cosa occorre estrarre l'hash dall'URL:


var target = location.hash; // #news

Quindi lo si usa con AJAX:


$( "a", "#navigation" ).click(function( e ) {
    e.preventDefault();
    var $content = $( "#content" );  // nella pagina corrente
    var targetURL = $( this ).attr( "href" ) + " " + target; // URL della pagina collegata più l'hash
    $target.load( targetURL );
});

In pratica l'hash ci permette di selezionare l'elemento con lo stesso ID nella pagina collegata e caricarne il contenuto tramite il metodo .load().

Torna su