L’articolo introduttivo su Ajax e jQuery é servito a focalizzare l’argomento soprattutto per coloro che di Ajax avevano solo sentito parlare.
Entriamo nel vivo del discorso e proviamo a vedere un esempio di gestione di Ajax con jQuery. In particolare, parliamo di come gestire gli Hyperlinks con Hijax, ovvero un termine e relativa tecnica coniata da J.Keith per la gestione degli Hyperlinks con Ajax.
Gestire gli Hyperlinks con Ajax e jQuery
Supponiamo di avere una lista di personaggi famosi e su ogni nome presente in elenco vogliamo inserire un link che porta alla pagina della biografia del personaggio. Il classico metodo prevede che l’utente, dopo aver cliccato sul nome del personaggio, attenda di essere condotto alla pagina della biografia.
E se caricassimo, invece, la biografia stessa direttamente sotto il link evitando un caricamento di una nuova pagina? Inutile dire come ne guadagnerebbe l’utente in termini di tempo d’attesa, usabilità e anche impatto grafico, probabilmente.
jQuery mette a disposizione il metodo load() per gestire , con Ajax, proprio questo tipo di situazioni.
Vediamo il codice. La parte html principale contiene l’elenco di alcuni personaggi :
<div id=”vip”>
<h2 class=”heading”>Eccovi alcuni VIP</h2>
<ul id=”biografie”>
<li><a href=”robertoBenigni.html”>Roberto Benigni</a></li>
<li><a href=”paoloBonolis.html”>Paolo Bonolis</a></li>
<li><a href=”diegoMaradona.html”>Diego Maradona</a></li>
</ul>
<div id=”biography”>
Cliccate su un personaggio per visualizzare qui la sua biografia!
</div>
</div>
Vediamo, ora, di cosa si compone il semplice file robertoBenigni.html che, nella nostra idea iniziale dovrebbe contenere la biografia specifica da caricare via Ajax sotto il link specifico.
<body>
<h1>Roberto Benigni</h1>
<p id=”description”>
Roberto Remigio Benigni è un attore, comico, regista italiano. Fra i numerosi riconoscimenti per il suo lavoro, vanta il ricevimento del premio Oscar per il film La vita è bella, come attore protagonista.
</p>
</body>
Vediamo ora la parte decisamente più importante, ovvero quella che consente l’effettivo caricamento della biografia.
$(document).ready(function(){
$(‘#biografie a’).click(function(e) {
var url = $(this).attr(‘href’);
$(‘#biography’).load(url);
e.preventDefault();
})
});
Commentiamo le parti più salienti. Dopo aver selezionato tutti i link presenti nell’elenco ( ‘#biografie a’ ), salviamo nella variabile url proprio il valore dell’attributo href del link cliccato. Infine, carichiamo nel div sottostante ( $(‘#biography’).load(url); ) la biografia specifica.
La domanda potrebbe nascere spontanea, a questo punto : ma quale parte di codice carichiamo esattamente all’interno della pagina di origine?
Bene, ad esempio l’istruzione
$(‘div:first’).load(‘test.html’);
carica nel primo div della pagina di origine tutto il codice presente il test.html
La domanda, quindi, era pertinente perché, a noi, in fin dei conti, del file robertoBenigni.html serve solo il paragrafo con id pari a description.
jQuery pensa anche a questo e, banalmente, nell’esempio di prima bastava scrivere :
var url = $(this).attr(‘href’) + ‘#description’ ;
In tal modo, solo la parte del paragrafo contenente la descrizione é inglobata nella pagina di origine.
Eccovi una Demo :
Ma le domande non son finite qui, immagino. E se l’elenco contenesse centinaia di record? Dovrei creare centinaia di file html, ma, in tal caso, meglio memorizzare tutte le biografie in un database e utilizzare uno script lato server cui passare in query string il necessario per caricare la biografia corretta.
Anche perché, proprio restando in tema, tra le tante opzioni offerte dal metodo load, esiste quella di passare il parametro data.
Eccovi un esempio nel caso in cui abbiamo una funzione invocata che restituisce dei dati e noi ne vogliamo visualizzare solo 20 :
$(‘div:first’).load(‘ricerca.php’, ‘q=jQuery&maxRisultato=20’);
Questo é solo un primo assaggio delle possibilità di interazione tra jQuery ed Ajax. Nei prossimi articoli approfondiremo l’argomento.
