Ajax con jquery: la chiamata perfetta. Locale e cross domain, SEO friendly.
Pubblicato da Davide, Aggiornato venerdì 18 luglio 2014 2 Commenti »
I primi esempi di codice per fare una chiamata ajax erano brutti. Punto. C’era l’inevitabile if per gestire i diversi browser e qualche oggetto in più da maneggiare. Ora, grazie a jquery e a browser più umani, si riesce a gestire una chiamata ajax molto più agevolmente. Restano però alcuni aspetti critici: tra cui le chiamate cross domain e gli url SEO friendly.
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 è 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 è 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. ;)
Varie info
Articolo pubblicato venerdì 18 luglio 2014 alle 14:57
Segnala questo articolo.. e sentiti utile!
2 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
Tiziana - Pubblicato il 27 02 2015 alle 17:42
Ciao! :)
Ho scaricato i sorgenti ma non trovo la pagina “facebook.html”… puoi gentilmente inviarmela tramite e-mail o aggiungerla allo zip dei sorgenti?
Grazie mille!
Tiziana
2
Davide - Pubblicato il 03 03 2015 alle 11:30
Ciao Tiziana.. è normale che non ci sia la pagina facebook.html
Perchè il link serve solo per farlo apparire nel browser, come se l’utente stesse navigando il sito, ma in realtà non apre una pagina nuova poichè viene fatta una chiamata ajax cross-domain a facebook e riportato il contenuto nella pagina stessa.
Per vedere un esempio in azione puoi andare qui: http://lab.diplod.it/ajaxcall/