Per utilizzare questo servizio esistono due modalità: la chiamata tramite jsapi o tramite il classico richiamo “script”

Oggi ho dedicato 5 minuti per un semplice confronto delle prestazioni ottenute con i due metodi. E il risultato è stato veramente interessante!
Ho creato una pagina html completamente vuota, solo head e body con i richiami alle tre librerie che utilizzo quotidianamente: jquery, jqueryui e swfobject.

Sono infatti abituato ad utilizzare il metodo seguente (JSAPI):

<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
  google.load("jquery", "1.4.2");
  google.load("jqueryui", "1.8.0");
  google.load("swfobject","2.2");
</script>
</script>

Grazie al nostro Firebug ho ottenuto questi dati (vi allego uno screenshot):

Caricamento tramite JSAPI

Dimensione della pagina: 84.2 KB
Tempo di caricamento: 795ms

Fatto questo ho provato a modificare il richiamo alle librerie con il classico richiamo “script” come segue:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Ho svuotato la cache e ricaricato il tutto. Questi sono i miei risultati ottenuti:

Caricamento tramite classico richiamo script

Dimensione della pagina: 76.9 KB
Tempo di caricamento: 462ms

La differenza secondo me è notevole!
Il caricamento classico è infatti più leggero di 7.3 KB e la chiamata totale è più veloce di 333ms.
Dobbiamo infatti considerare che queste differenze sembrano minime, ma moltiplicate per “n” visitatori possono fare la differenza.

Ovviamente dobbiamo anche considerare che non tutte le chiamate avranno lo stesso peso e tempo grazie alla cache, ma posso comunque dire che da oggi utilizzerò di sicuro il classico richiamo script!

<a href="#/" id="mylink">click me</a>

$('#mylink').click(function() {
  // azione da fare al click del link con id 'mylink'
  alert('clicked!!');
});

Al click del link con id mylink verrà visualizzato un semplice alert.
Come vedrete però nella barra degli indirizzi verrà visualizzato il “#/”, e non è elegante.

Con jQuery abbiamo la possibilità di prevenire le azioni di default dei nostri elementi, nel nostro caso il link. Sarà sufficiente scrivere:

$('#mylink').click(function(event) {
  // Prevent default
  event.preventDefault();
  // azione da fare al click del link con id 'mylink'
  alert('clicked!!');
});

Attenzione: ho passato come parametro della funzione l’event per poterlo richiamare.

Firefox, Chrome, Safari accettano la sintassi:

$('#mydiv').animate({
  padding: '5px 5px 15px 0'
});

Internet Explorer, ovviamente no Utilizzate quindi la sintassi:

$('#mydiv').animate({
  paddingTop: '5px',
  paddingRight: '5px',
  paddingBottom: '15px',
  paddingLeft : '0',
});

Con jQuery tutto questo posso farlo in una decina di righe pulite e senza problemi cross-browser.

Iniziamo con includere la libreria jQuery (scaricabile direttamente da http://jquery.com/)

<script src="/js/jquery-1.3.1.js" type="text/javascript"></script>

La nostra pagina sarà costruita semplicemente così:

<form id="mio_form" name="mio_form" method="post">
   <input type="text" name="nome" id="nome" />
   <input type="text" name="email" id="email" />
 
   <input type="button" id="invia_form" value="Invia chiamata ajax" />
</form>
 
<div id="ajax_result"></div>

Come vedete c’è un div “ajax_result” dove stamperemo la risposta del server.

Il codice jQuery che si occuperà della chiamata Ajax sarà costruito così:

<script type="text/javascript">
   $(document).ready(function() {
      $("#invia_form").click(function(event){
         var email = $("input#email").val();
         var nome = $("input#nome").val();
 
         var dataString = 'nome='+ nome + '&amp;email=' + email;
 
      $.ajax({
         type: "POST",
         url: "ajax_result.php", //pagina che viene chiamata in ajax
         data: dataString,
         success: function(data) {
            $('#ajax_result').html(data);
      }
      });
   });
});
</script>

Creeremo poi una semplicissima pagina php “ajax_result.php” (a tal proposito: Il modello per iniziare una pagina Ajax) che si occuperà di inviare la richiesta al server. Un esempio semplicissimo:

<?php
   $nome = $_POST['nome'];
   $email = $_POST['email'];
 
   echo "Ho ricevuto ".$nome." e ".$email;
?>

Come vedete in 10 minuti abbiamo creato quello che, senza jQuery, ci avrebbe fatto perdere tempo prezioso e righe di codice inutili.

Ovviamente il precedente esempio ha bisogno di molte cose; in primis bisogna effettuare una validazione dei campi sia lato client che lato server… ma questo spetta a voi!

Masticando javascript ho sempre scritto codice con jQuery che non mi soddisfaceva, molto probabilmente perchè mi piace conoscere ogni singola riga del codice che scrivo.

Ed ecco quindi che è necessario, ancora una volta, studiare.

La prima mossa è stata studiare gli esempi, i tutorial dell’ottimo sito di jQuery. Ora è arrivato il momento di un buon libro.

Dopo l’apprezzato “AJAX e PHP:Sviluppare applicazioni web dinamiche” della Packt ho acquistato “Learning jQuery” dagli stessi autori del buon sito http://www.learningjquery.com.

Vi lascio il link diretto al sito della Packt: http://www.packtpub.com/jQuery/book