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>

Questa pagina mostra uno dei miglioramenti introdotti da Ajax: ogni modifica nei dati introdotti produce un cambiamento immediato della pagina.
Non abbiamo ancora usato Prototype , ma una semplice funzione Javascript che provvede a modificare il DOM (l'albero del documento)
Non c'e' nessuna comunicazione col server.
Notate come ogni elemento del documento venga fornito di un nome (id="nome")e come sia necessaria una semplice istruzione: document.getElementById(i+1).innerHTML = "<img src=\"fronte.jpg\" width=100 height=100>"; per cambiare il suo contenuto.

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>

Di questo esempio non riportiamo tutto il codice (che potete guardare nel sorgente della pagina HTML) ma solo la parte finale che e' molto simile a quella dell'esempio precedente ,ma con una differenza essenziale:i nuovi dati da inserire nell'HTML vengono ora dal server. In particolare viene usata questa pagina che fornisce l'ora in formato XML.
Il collegamento col sito remoto avviene in maniera asincrona seguendo uno speciale protocollo. Questa parte che potete guardare implementata nel sorgente della pagina, sara' nei prossimi programmi, gestita da prototype e per questo non studieremo piu' in dettaglio questo esempio.
Notate la differenza di comportamento tra tag div e span. Il primo comporta un salto rigo automatico che nel secondo non c'e': possiamo avere cosi' le monete in fila.

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>

Cominciamo ad usare prototype. Si tratta di un unico file prototype.js che voi scaricate da Internet.
l'html viene dinamicamente creato a partire da un file images.xml che contiene in formato xml le url e i titoli delle immagini.
L'html contiene due div che servono come segnaposto della lista delle immagini e dell'immagine visualizzata.
La funzione Javascript setImage(url) serve a caricare nel segnaposto 2 l'immagine all'indirizzo url
Notate ora la semplicita' con la quale indicate a prototype il file da interrogare e le istruzioni da eseguire quando i dati sono arrivati (onSuccess)
transport permette di estrarre i dati dal file xml e quindi procedere a creare nel segnaposto imageList la lista delle immagini.Caricando allo stesso tempo la prima nel secondo segnaposto.

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>

Questo semplicissimo programma permette di controllare il contenuto del file che vi viene inviato.
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>

L'oggetto Ajax.PeriodicalUpdater aggiorna il contenuto del segnaposto primo argomento col contenuto del file xml secondo argomento ogni 10 secondi.

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>

I dati sono in images1.xml. Questo e' un piccolo data base di immagini che contiene 4 campi per immagine.
Guardando il codice potete constatare come sia facile caricare questo database in un vettore Javascript g_images usando il metodo push.
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

Qui il file html e' quasi identico al precedente e non lo riportiamo.
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.
Per ottenere la lista delle foto di un'altro utente basta cambiare "gzito" nel codice col nome dell'altro utente.
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>

Questo semplice demo e' tutto basato sulla manipolazione della specifica di stile "display"
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
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

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

INDIETRO a Seminario su Xml

Maintained by Zito Giuseppe: info@zitogiuseppe.com Last modified: