Ajax con jquery: la chiamata perfetta. Locale e cross domain, SEO friendly.

Pubblicato da Davide, Aggiornato venerdì 18 luglio 2014 2 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

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:

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. ;)

2 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

Vuoi essere il primo a lasciare un commento per questo articolo? Utilizza il modulo sotto..

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi