Esiste quindi la chiamata perfetta? Si, ma come tutte le cose perfette, è sicuramente perfettibile.

Nell’esempio che segue c’è una pagina con due pulsanti: il primo esegue una chiamata ajax per caricare una pagina locale, il secondo esegue una chiamata cross-domain (nello specifico a Facebook) attraverso JSONP.

Sono arrivato all’esempio finale partendo da questi tre utilissimi spunti:

• 4 jQuery cross domain ajax request methods
• The perfect jquery ajax request
• Create crawlable, link-friendly ajax websites using pushState()

Ed ecco il risultato finale in funzione.

Il codice html della pagina è il seguente:

<div id="container">
<h1>Esempi Chiamate Ajax con jQuery</h1>
<a class="button" id="call" href="test.html" >Esegui chiamata normale</a>
<a class="button" id="call-cross" href="facebook.html">Esegui chiamata Cross Domain</a>
<div id="ajax-panel">Questo div contiente il risultato della chiamata</div>
</div>

Il codice javascript della chiamata locale è il seguente: di fatto viene usato il metodo $.ajax() per fare la chiamata. Nel beforeSend – codice eseguito prima di fare la chiamata vera e propria – viene eseguita una funzione che carica una immagine di cortesia; nel success – codice eseguito in caso di chiamata con esito positivo – viene elaborata la risposta, cambiando il contenuto di un div della pagina; nell’error – codice eseguito in caso di errore – viene mostrato un messaggio all’interno dello stesso div.

$("#call").click(function (e) {
//SEO friendly
url = $(this).attr('href');
//aggiorno l'indirizzo sulla barra del browser ed evito che si apra il link
history.pushState({}, '', url);
e.preventDefault();
//chiamata ajax
$.ajax({
url: 'test.html',
beforeSend: function () {
// qui mettiamo un'immagine di caricamento: appare solo se dobbiamo caricare qualcosa di pesante
$('#ajax-panel').html('<div class="loading"><img src="http://lab.diplod.it/ajaxcall/images/ajax-loader.gif" alt="Loading..." /></div>');
},
success: function (data) {
// richiesta riuscita
$('#ajax-panel').empty();
$('#ajax-panel').html(data);
},
error: function () {
// richiesta fallita
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Qualcosa &egrave; andato storto.</p>');
}
});

Il codice della chiamata cross domain differisce di poco da quello precedente, se non per l’utilizzo di JSONP (attenzione: non JSON) come dataType.

$('#call-cross').click(function (e) {
//SEO friendly
url = $(this).attr('href');
//aggiorno l'indirizzo sulla barra del browser ed evito che si apra il link
history.pushState({}, '', url);
e.preventDefault();
//chiamata ajax
$.ajax({
type: "POST",
url: "https://graph.facebook.com/emergency.ong",
dataType: "jsonp",
beforeSend: function () {
// qui mettiamo un'immagine di caricamento: appare solo se dobbiamo caricare qualcosa di pesante
console.log('loading..'); //scrivo qualcosa in console: si può omettere
$('#ajax-panel').html('<div class="loading"><img src="http://lab.diplod.it/ajaxcall/images/ajax-loader.gif" alt="Loading..." /></div>');
},
success: function (data) {
// richiesta riuscita
console.log(data); //scrivo il risultato in console: si può omettere
var obj = $.parseJSON(JSON.stringify(data));
$('#ajax-panel').html('<p>Tutto ok</p><p>Descrizione dell\'oggetto JSON restituito: ' + obj.about + '</p>');
},
error: function () {
// richiesta fallita
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Qualcosa &egrave; andato storto.</p>');
}
});
});

Vuoi provare l’esempio completo in azione e lavorarci su? Scarica tutti i sorgenti in uno zip oppure guardalo direttamente in funzione.

Commenti e suggerimenti sono ben accetti. ;)