Articoli Manifesto Tools Links Canali Libri Contatti ?
Tip / AJAX

Ajax ... before Ajax (2)

Abstract
Un altro semplice Tip pre-Ajax per attuare il retrieving dei dati Server-Side
Data di stesura: 08/02/2006
Data di pubblicazione: 08/02/2006
Ultima modifica: 04/04/2006
di Stefano Fago Discuti sul forum   Stampa

Nel primo Tip è stato mostrato l’uso di un IFRAME come buffer per il caricamento del contenuto di una pagina. Utiliziamo ancora un IFRAME per gestire il caricamento di un cookie e fare una piccola animazione: una tabella 4x4 in cui una cella viene scelta in maniera casuale e valorizzata, sempre in modo randomico!

L’IFRAME svolge il ruolo di loader grazie al quale viene invocata la servlet che produce un cookie il cui valore è un testo C.S.V. che esprime la tripletta (coord. x, coord. y,valore cella). Lato Client il valore dei cookie viene interpretato e grazie a DOM si modificano i contenuti! Testato con Netscape 8, FireFox 1.x, IE 5.5+, Opera 8

Buon Divertimento!

I nostri ingredienti

La pagina HTML. 

  1.   <p><a href="#" onclick="start();return false;" >START</a></p> 
  2.   <p><a href="#" onclick="stop();return false;" >STOP</a></p> 
  3.   <p> 
  4.    <table id="targetTable" border="1"> 
  5.      <tr><td>[00]</td><td>[00]</td><td>[00]</td><td>[00]</td></tr> 
  6.     <tr><td>[00]</td><td>[00]</td><td>[00]</td><td>[00]</td></tr> 
  7.     <tr><td>[00]</td><td>[00]</td><td>[00]</td><td>[00]</td></tr> 
  8.     <tr><td>[00]</td><td>[00]</td><td>[00]</td><td>[00]</td></tr> 
  9.    </table> 
  10.   </p> 
  11.   <iframe id="loader" src="" style="border:0px;visibility:hidden" 
  12. onload="checkCoordinate()" /> 
Gli scripts. 
  1.   var x = 0;  
  2.   var y = 0;  
  3.   var id = -1;  
  4.  
  5.   function start(){ id = setInterval('newValues()',1000); }  
  6.  
  7.   function stop(){ clearInterval(id); }  
  8.  
  9.   function newValues(){ var loader = document.getElementById('loader'); 
  10.  
  11. 					loader.src =''; 
  12. 					loader.src = 
  13. '/cookiesservlet?ts='+(new Date()).getTime(); } 
  14.  
  15.  function checkCoordinate(){  
  16. var value = 0; var t = document.getElementById('targetTable'); 
  17. t.rows[y].cells[x].style.backgroundColor='#FFF';  
  18. var cc = document.cookie.split(';');  
  19. for(var idx = 0; idx< cc.length; idx++){  
  20. var vv = cc[idx].split('='); 
  21.  if( vv[0].indexOf('COORD') >= 0){  
  22. var coords = vv[1].split(',');  
  23. x = parseInt(coords[0]);  
  24. y = parseInt(coords[1]);  
  25. value = parseInt(coords[2]); } }  
  26. var t = document.getElementById('targetTable');  
  27. t.rows[y].cells[x].innerHTML = '['+value+']';  
  28. t.rows[y].cells[x].style.backgroundColor='#F00';  
  29. } 
La servlet. 
  1. public class CookiesServlet 
  2.     extends HttpServlet { 
  3.  
  4.   private static final Random rnd = new Random(); 
  5.  
  6.   private static final String CONTENT_TYPE = "text/html"; 
  7.  
  8.   public void doGet(HttpServletRequest request, HttpServletResponse 
  9. response) throws 
  10.       ServletException, IOException { 
  11.     manageCookies(request, response); 
  12.     makeResponse(response); 
  13.   } 
  14.  
  15.   private void manageCookies(HttpServletRequest request, 
  16. 			     HttpServletResponse response) { 
  17.     int x = rnd.nextInt(4); 
  18.     int y = rnd.nextInt(4); 
  19.     int value = rnd.nextInt(100); 
  20.     StringBuffer sb = new StringBuffer(); 
  21.     sb.append(x).append(",").append(y).append(",").append(value); 
  22.     Cookie coord = new Cookie("COORD", sb.toString()); 
  23.     coord.setMaxAge(3); 
  24.     response.addCookie(coord); 
  25.   } 
  26.  
  27.   private void makeResponse(HttpServletResponse response) throws 
  28. IOException { 
  29.     response.setContentType(CONTENT_TYPE); 
  30.     response.getWriter().print("OK"); 
  31.   } 
  32.  
  33. } 

Informazioni sull'autore

Stefano Fago, classe 1973. Diplomato in ragioneria, ha conseguito il Diploma di Laurea in Informatica con un progetto legato alle interfacce grafiche soft-realtime in Java. Dopo esperienze in Alcatel ed Elea, ha svolto attività di consulenza come Software Developer e Trainer alla ObjectWay S.p.A. sede di Milano. Attualmente Software Designer presso la sezione Innovazione e Attività Progettuali di BPU Banca. Appassionato del linguaggio Java e di tutte le tecnolgie Object Oriented. Polistrumentista dilettante.

È possibile consultare l'elenco degli articoli scritti da Stefano Fago.

Altri articoli sul tema Tip / AJAX.

Discuti sul forum   Stampa

Cosa ne pensi di questo articolo?

Discussioni

Questo articolo o l'argomento ti ha interessato? Parliamone.