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

Ultimamente sono mancato un po’ su queste pagine, solo perchè sono stato preso da questo lavoro. Marina Remi è un’attrice genovese, che mi ha contattato per creare ex novo un blog su wordpress: ecco fatto. Non è stato semplice ma alla fine ho imparato molto.. Devo ringraziare lei e tutti coloro che hanno collaborato nella realizzazione: in bocca al lupo!

In queste poche righe voglio riassumere i plugin utilizzati e le tecniche implementate per realizzare il sito di Marina.

Menu con icone che zoomano al passaggio del mouse

Noterete subito il menù stile mac che raccoglie le pagine del blog. E’ stato realizzato utilizzando il framework jQuery e la sua utilissima estensione grafica Interface. Lo script deve essere configurato e si può personalizzare via CSS, lo potete vedere in azione nelle demo di Interface: Fisheye Menu.

Il form dei commenti

A volte si può essere eleganti anche con un semplice javascript.. Lo so, i puristi diranno che son meglio i tag <label>, ma ogni tanto anche l’occhio vuole la sua parte.

Le foto da Flickr

FAlbum è un plugin per wordpress che si collega ad un account Flickr e pubblica le foto sul proprio blog.
Se vogliamo inserire la visualizzazione delle immagini in una pagina bisogna creare un template di pagina. Per farlo è sufficiente inserire questo codice all’inizio della nuova pagina falbum.php

<?php
/*
Template Name: FAlbum
*/
?>


Mentre nel corpo della pagina dovremo inserire questo codice dove si vogliono far apparire le foto


<!--<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/falbum.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/overlib.js"></script
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/prototype.js"></script>-->
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<?php $falbum->show_photos(); ?>


Per utilizzare gli effetti di visualizzazione dovremo togliere i commenti all’inclusione del codice javascript.

Per mettere qualche immagine nella sidebar invece si può usare questa funzione


<?php require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php');
global $falbum; ?>
<?php echo $falbum->show_recent($num = 3, $style = 0, $size= 's'); ?


Tutta la documentazione circa il plugin la si trova qui, ben fatta e dettagliata.

All in One SEO Pack

E’ un utilissimo plugin per l’ottimizzazione delle proprie pagine in ottica SEO (Search Engine Optimization). Da un comodo pannello di amministrazione è possibile inserire una descrizione globale del sito e le parole chiave. Per ogni post o pagina è possibile inserire descrizioni specifiche e parole chiave diverse. L’utilità non si vede ad occhio nudo, ma trattare bene i motori di ricerca aiuta sempre a generare visite.