Google AJAX Library: differenze tra jsapi e chiamata diretta

Da molto tempo, in ogni mio progetto, utilizzo la Google AJAX Library. Questo fantastico servizio consente di richiamare jQuery, Prototype, jQueryUI ecc… direttamente dai server di Google con un notevole risparmio di banda, spazio e aumento della sicurezza. Vi consiglio una lettura interessante direttamente dal sito ufficiale!

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

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

script diretto

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!

Approfondisci

jQuery: eseguire una chiamata ajax di un form

Prosegue il mio cammino alla scoperta di jQuery.
La prima cosa che mi ha stupito di questa libreria è la semplicità con cui posso effettuare chiamate in Ajax.
A differenza della classica definizione di uno script javascript per effettuare chiamate asincrone, jQuery mi consente, con pochissime righe di codice, di farlo in maniera pulita e veloce.
Solitamente includevo un file javascript per creare l’istanza del XMLHttpRequest. All’interno poi definivo un’altra funzione per il recupero dei dati da passare in POST o in GET ad una pagina .php in maniera asincrona.
Tutto questo mi portava via all’incirca un centinaio di righe di codice per un peso complessivo di 2Kb.

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! :)

Approfondisci

La cache nei risultati Ajax

Se almeno una volta nella vita avete creato una piccola applicazione ajax vi sarete accorti che certi browser non conformi agli standard (Internet Explorer 6 ? Si proprio lui …) hanno dei piccoli problemi di cache quando si eseguono delle direttive javascript onload.

Mi spiego con un piccolo esempio.

Mettiamo caso di avere una pagina la_mia_pagina.php dove al suo interno ho questo codice :

<body onload=’javascript:carica_contenuto_ajax()’>
</body>

La direttiva qui sopra non fa altro che chiamare una funzione javascript (che avremo definito nell’head) che a sua volta esegue una semplice chiamata Ajax.

La stessa cosa molti di voi potrebbero farla in questa maniera :

<img src=/images/onload.gif’ onload=’javascript:carica_contenuto_ajax()/>

L’immagine onload.gif non è altro con un immagine trasparente 1px x 1px sfruttata per richiamare la funzione javascript una volta caricata dal browser.

Questo metodo sinceramente è il mio preferito ma alcuni browser metteranno (come giusto che sia) in cache l’immagine per caricarla istantaneamente al prossimo refresh.

(altro…)

Approfondisci