<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>
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>
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.
<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>
setImage(url)
serve a caricare nel segnaposto 2 l'immagine all'indirizzo url
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.
<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>
<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>
<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>
g_images
usando il metodo push
.
json
per trasferire dati ad applicazioni Ajax.I dati in questo formato sono passati automaticamente attraverso la funzione Javascript eval
.
API_KEY = ''
<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>
(top,left)
di posizionamento.
La rivoluzione riguarda contemporaneamente due ambiti completamente diversi
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.
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.