Imparare a programmare AJAX in un'ora usando Prototype!


Prima di cominciare una breve precisazione. AJAX non e' un linguaggio di programmazione e quindi non si puo' programmare AJAX! Inoltre in un'ora e' impossibile imparare a programmare in qualsiasi linguaggio! E allora? AJAX e' una serie di tecniche che servono a migliorare l'utilizzo del Web da parte dell'utente, rendendolo simile a quella dei normali programmi desktop. Riguarda per lo piu' modifiche al livello del cliente (cioe' introdotte direttamente nel codice HTML della pagina) ed anche (in alcuni casi) il miglioramento del colloquio col server. Supponendo che gia' conosciate Javascript, il DOM, XML, e come si fa a programmare in Javascript per modificare il DOM; allora questa pagina vi fornira' alcuni semplici esempi di pagine AJAX realizzate utilizzando una libreria detta Prototype e capirete in un'ora come fare a trasformare le vostre pagine vecchio stile in pagine AJAX. Ho preferito rendere il piu' possibile pratica questa pagina eliminando le discussioni sui grandi temi. Comunque alla fine troverete una breve introduzione al Web2
Lancio di monete Richiama il programma

<html>

  <head>
    <script  language="Javascript">
       function genera() {
          var n =document.getElementById("nmonete").value;
          if(n > 10) n= 10;
          for (i=0;i<10;i++){
             if(i<n){
                if (Math.random() < .5) 
                  document.getElementById(i+1).innerHTML = "<img src=\"fronte.jpg\" width=100 height=100>";
                else
	          document.getElementById(i+1).innerHTML = "<img src=\"retro.jpg\" width=100 height=100>";
	      } else{
	       document.getElementById(i+1).innerHTML = "<img src=\"bianco.jpg\" width=100 height=100>";
	        }
	   }
	   }
	 </script>
   <head>
   
   <body>
   
     <form id="modulo" action="#" method="get" onsubmit="return false">
 
        <b>Numero di monete (massimo 10)<b> <br>
        <input type=text id="nmonete" name="nmonete" value=5 onChange="genera()"> <br>
        <input type=button id="tasto" name="tasto" value="Nuovo lancio" onClick="genera();">

     </form>

     <span id="1"> <img src="fronte.jpg" width=100 height=100></span>
     <span id="2"><img src="fronte.jpg" width=100 height=100></span>
     <span id="3"><img src="fronte.jpg" width=100 height=100></span>
     <span id="4"><img src="fronte.jpg" width=100 height=100></span>
     <span id="5"><img src="fronte.jpg" width=100 height=100></span>
     <span id="6"><img src="bianco.jpg" width=100 height=100></span>
     <span id="7"><img src="bianco.jpg" width=100 height=100></span>
     <span id="8"><img src="bianco.jpg" width=100 height=100></span>
     <span id="9"><img src="bianco.jpg" width=100 height=100></span>
     <span id="10"><img src="bianco.jpg" width=100 height=100></span>

   <body>
   
<html>

AJAX sta per "Asynchronous JavaScript language and XML" e nel prossimo esempio vedremo dove compare in AJAX l'XML e la comunicazione asincrona col server.
Orologio Ajax :Richiama l'orologio
function buildTopicList() {
  var items = req.responseXML.getElementsByTagName("ore");
  document.getElementById("ore").innerHTML = getElementTextNS( items[0]);
  items = req.responseXML.getElementsByTagName("minuti");
  document.getElementById("minuti").innerHTML = getElementTextNS(items[0]);
  items = req.responseXML.getElementsByTagName("secondi");
  document.getElementById("secondi").innerHTML = getElementTextNS( items[0]);
}

</script>
</head>

<body onload="loadDoc(event)"\>
lt;h1>XMLHttpRequest  Demo</h1>
<hr /> 
<div id="ore">4</div>
<div id="minuti">4</div>
<div id="secondi">4</div>
</body>

</html>

Da questi due primi esempi potete intravedere come avviene la programmazione AJAX. Si crea una pagina HTML con degli elementi generici div o span tutti dotati di nome. Questi comandi servono solo come segnaposto nella pagina HTML. Il loro contenuto viene caricato ed eventualmente modificato periodicamente usando delle funzioni Javascript. Queste funzioni prendono i dati per caricare il contenuto da file xml (dal server di origine) e/o da moduli html inseriti nella stessa pagina.


Slideshow :Richiama

<html>

  <head>
     <script src="prototype.js"></script>
  </head>

  <body>

     <div id="imageList"> </div>

     <div id="imageHost"> </div>
     
     <script>
     
        function setImage( url )
          {
          $('imageHost').innerHTML='';
          var elImg = document.createElement('img');
          elImg.src = url;
          $('imageHost').appendChild(elImg);
          }
	  
        new Ajax.Request('images.xml', {
           method:  'get',
           onSuccess: function(transport) {
             var imagesTags = transport.responseXML.getElementsByTagName('image');
            $('imageList').innerHTML='';
            var bFirst=true;
            for (var b = 0; b < imagesTags.length; b++) {
               var url = imagesTags[b].getAttribute('url');
               var title = imagesTags[b].getAttribute('title');
               if(bFirst)
                 {
	         setImage(url);
	         bFirst = false;
	         }
               var html = '<a href="javascript:void setImage(\''+url+'\');">';
               html += title+'</a><br/>';
               $('imageList').innerHTML += html;
               }
            }
         });
      </script>
      
  </body>

</html>

In questa prima pagina prototype abbiamo fatto conoscenza con la potente funzione prototype $('nomeelementoDOM') che permette di estrarre/modificare i valori di attributi dello stesso elemento.


Controlla l'esistenza e il contenuto del file xml :Richiama
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>


<div id="xmlcontent">
</div>

<script>
new Ajax.Request('images.xml', {
 onComplete: function(req) {
    $('xmlcontent').innerHTML='';
      var html = '<h1>xml file content</h1><pre>'+req.responseText+'</pre>';
      $('xmlcontent').innerHTML += html; },
      on404: function(req) { alert("file not found"); },
      on500: function(req) { alert("something went wrong");}
     });
</script>
</body>
</html>
  1. Questo semplicissimo programma permette di controllare il contenuto del file che vi viene inviato.
  2. Mostra la maniera come si definiscono le funzioni di callback per i vari eventi che si possono avere.

Ed ora l'orologio del primo esempio realizzato con prototype :Richiama
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>


<div id="clock">
</div>

<script>
   new Ajax.PeriodicalUpdater('clock','clockxml.php',
      {
           frequency:10
	        });

</script>
</body>
</html>
    

Ora uno slideshow piu' perfezionato :Richiama

<html>

   <head>
     <script src="prototype.js"></script>
   </head>

   <body>

      <div style="text-align:center;">
         <div id="title" style="color:white;font-family:arial;font-size:24pt;"> </div>
         <img id="slide" src="" style="display:none;"><br>
      </div>
      
      <script>
      
          var g_images = [];
          var g_slideIndex = 0;

          function showSlide()
             {
             $('title').hide();
             $('slide').hide();

             var height = 600;
             var width = ( height / g_images[ g_slideIndex ].height ) * 
                  g_images[ g_slideIndex ].width;
             $('slide').src = g_images[ g_slideIndex ].src;
             $('slide').width = width;
             $('slide').height = height;
             $('title').innerHTML = g_images[ g_slideIndex ].title;
             $('title').show();
             $('slide').show();
             g_slideIndex++;
             if ( g_slideIndex >= g_images.length )
                g_slideIndex = 0;
	     }

          new Ajax.Request( 'images1.xml', { 
             method: 'get',
             onSuccess: function( transport ) {
             var imageTags = transport.responseXML.getElementsByTagName( 'image' );
             for( var b = 0; b < imageTags.length; b++ ) {
                 g_images.push( {
                     src: imageTags[b].getAttribute('url'),
                     title: imageTags[b].getAttribute('title'),
                     width: imageTags[b].getAttribute('width'),
                     height: imageTags[b].getAttribute('height')
		} );
	     }

          showSlide();

          window.setInterval( showSlide, 5000 );
      }
      } );
      </script>
      
  </body>
</html>
		      
  1. I dati sono in images1.xml. Questo e' un piccolo data base di immagini che contiene 4 campi per immagine.
  2. Guardando il codice potete constatare come sia facile caricare questo database in un vettore Javascript g_images usando il metodo push.
  3. Oltre al formato xml si usa anche un formato json per trasferire dati ad applicazioni Ajax.I dati in questo formato sono passati automaticamente attraverso la funzione Javascript eval.





Ora uno slideshow sulle foto pubbliche di un qualsiasi utente di flickr :Richiama
  1. Qui il file html e' quasi identico al precedente e non lo riportiamo.
  2. Cio' che e' cambiato e' il file xml che ora riporta molte piu' informazioni. Ad esempio una descrizione e una lista di tags. Questo file e' stato creato dal programma python listflickr1.py.
  3. Per ottenere la lista delle foto di un'altro utente basta cambiare "gzito" nel codice col nome dell'altro utente.
  4. Questo programma usa la libreria python flickr.py scaricata da Internet. Notate che in questa libreria va impostata la vostra chiave. Questa si puo' ottenere gratis e permette di usare il servizio Web di flickr. L'impostazione va fatta alla riga:
    API_KEY = ''





Sovrapporre un'immagine trasparente su un'altra :Richiama


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PNG Overlay Test</title>
<style type="text/css">
.base
{
	margin: 0 auto 15px;
	position: relative;
	width: 1496px;
	height: 772px;
}
.overimg
{
	background: url(svgmapov1.png) no-repeat;
        display: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 1496px;
	height: 772px;
}

<style>
<script  language="Javascript">
       function overlay() {
          var transparent =document.getElementById("overlay");
          if(transparent.style.display=="block")transparent.style.display="none" ; else transparent.style.display="block";
	   }
	 </script>
</head>
<body>
<form id="modulo" action="#" method="get" onsubmit="return false">
 
        <input type=button id="tasto" name="tasto" value="Overlay on/off" onClick="overlay();">

     </form>
<div class="base">
	<img src="svgmap1.png"  />
	<div id="overlay" class="overimg"> </div>
</div>
</body>
</html>
  1. Questo semplice demo e' tutto basato sulla manipolazione della specifica di stile "display"
  2. Il programma Javascript richiamato dall'utente quando preme il tasto, non fa che modificare questa specifica da "none" a "block" facendo scomparire/ricomparire immagine trasparente da sovrapporre
  3. Notate come quest'immagine va posizionata in maniera "assoluta" (rispetto al div dell'immagine di sfondo) definendo oltre a width e height anche le coordinate (top,left) di posizionamento.




Breve introduzione al Web 2
La rivoluzione AJAX ha fatto fare un salto di qualita' al Web tanto che si parla ormai di Web 2 o Web di seconda generazione per i siti come flickr o Google Maps basati sui nuovi principi.

La rivoluzione riguarda contemporaneamente due ambiti completamente diversi

  1. Come l'utente fruisce la pagina Web. La pagina Web deve assomigliare sempre piu' ad un'applicazione desktop. Quando si clicca su un tasto il risultato deve comparire nella stessa pagina aggiornando una parte di essa.

    Realizzare dei tasti, dei campi da riempire, etc .. non e' molto difficile, perche' questi gadgets esistevano gia' nei moduli Web1 , anche se provocavano l'apertura di altre pagine. Invece altri gadgets comuni nelle applicazioni desktop mancano ancora nell'hTML (anche se si sta lavorando ad essi a livello W3c):e' il caso dei tab(linguette) e slider(cursori). Questi possono comunque essere realizzati a partire dal normale html. Qui abbiamo visto la realizzazione dei tab che sono essenziali per evitare di dover saltare pagina. Online esistono numerose implementazioni di gadget ad alto livello per AJAX. Se riuscite a trovare esattamente cio' che fa al caso vostro, allora usatele. Ma se avete bisogno di adattarle alla vostra applicazione, allora e' forse meglio partire da zero come si fa in questo tutorial.

  2. La possibilita' di accedere con facilita' in un formato standard (XML e servizi web) alle innumerevoli sorgenti di informazioni disponibili su Internet. Ad esempio poter usare nella propria pagina foto pubbliche di flickr su una mappa di Google. Per dimostrare la semplicita' con cui si puo' accedere a queste risorse Web abbiamo usato in questo tutorial il linguaggio python. Questo ha il vantaggio di poter essere usato dopo qualche minuto e di essere interattivo. Per questo si presta ad un uso didattico come in questo tutorial.

    Se volessimo implementare le stesse cose viste nel tutorial in una maniera piu' "professionale", probabilmente useremmo al posto dei programmini python degli script php lato server collegati a database mysql.





Bibliografia
  1. Ajax for media:IBM tutorial
  2. prototype/scriptacoulos crash course
  3. prototype site


INDIETRO a Seminario su Xml
Maintained by : info@zitogiuseppe.com Last modified: