Articoli Manifesto Tools Links Canali Libri Contatti ?
Tip / AJAX

Ajax ... before Ajax (4)

Abstract
Ultimo Tip pre-Ajax per attuare il retrieving dei dati Server-Side e un interscambio Java/JavaScript
Data di stesura: 12/03/2006
Data di pubblicazione: 14/03/2006
Ultima modifica: 04/04/2006
di Stefano Fago Discuti sul forum   Stampa

Verrà utilizzata nuovamente la tecnica di injection di un nodo Script tramite DOM e non utilizzeremo un IFRAME. Un interfaccia semplificata ci permetterà di scegliere un Impiegato e esaminarne gli estremi; sarà anche possibile modificare il nome e cognome!

Il ruolo di loader è affidato ad un nodo SCRIPT costruito a runtime grazie a DOM. Viene imposto l'attributo SRC del nuovo nodo in modo da invocare la servlet che produce la risposta.
Il nodo script necessita di un javascript valido nel riferimento all'attributo SRC: la servlet quindi non produce del semplice HTML ma un vero e proprio script per la gestione dei contenuti!
Il formato di interscambio è molto semplice:

  1. viene trasmesso un oggetto javascript nella forma:
    { 
      id: XXX,
      nome: "?",
      cognome: "?"
    }
  2. lo stesso formalismo viene parsato nella servlet per ottenere un oggetto Java
Questo semplice Tip vi introduce ad uno dei meccanismi di base per la serializzazione di java in js e viceversa? Il nome di questo protocollo e JSON: http://www.json.org.

Testato con Netscape 8, FireFox 1.x, IE 5.5+, Opera 8

Buon Divertimento!

I nostri ingredienti

La pagina HTML

<body bgcolor="#ffffff">
 <form name="search" action="#" onsubmit="return searchEmployee();" >
  <p><label for="emplId">EMPLOYEE TO FIND: <input name="emplId" type="text" value=""></label></p>
  <p><input type="submit" name="Submit" value="submit" ></p>
 </form>
 <p>EMPLOYEE: <div id="emplView"></div></p>
 <p><a href="javascript:alert(emp!=null)" >TEST THAT OBJECT IS PRESENT!</a></p>
</body>

Gli Script

  1. var emp = null; 
  2.  
  3. function searchEmployee(){ 
  4.   var idToSearch = document.search.emplId.value; 
  5.   loader('/j2js?id='+idToSearch+'&ts='+(new Date()).getTime()); 
  6.   return false; 
  7.  
  8.  
  9. function update(){ 
  10.   var toSubmit = "{id:"+document.getElementById('field0').value+",name:'"+document.getElementById('field1').value+"',lastName:'"+document.getElementById('field2').value+"'}"; 
  11.   loader('/j2js?edit='+toSubmit+'&ts='+(new Date()).getTime()); 
  12.   return false; 
  13.  
  14.  
  15. function makeEditable(target){ 
  16.   if(target.innerHTML=='EDIT'){ 
  17.     var table = document.getElementById('actual'); 
  18.     var row = table.rows[1]; 
  19.     row.cells[0].innerHTML='<input type="text" id="field0" name="field0" value="'+emp.id+'" />'; 
  20.     row.cells[1].innerHTML='<input type="text" id="field1" name="field1" value="'+emp.name+'" />'; 
  21.     row.cells[2].innerHTML='<input type="text" id="field2" name="field2" value="'+emp.lastName+'" />'; 
  22.     target.innerHTML = 'SAVE'; 
  23.     return; 
  24.   if(target.innerHTML=='SAVE'){ 
  25.     update(); 
  26.     refreshView(null); 
  27.     emp = null; 
  28.  
  29.  
  30. function refreshView(target){ 
  31.   if(target==null){ 
  32.     document.getElementById('emplView').innerHTML = ''; 
  33.     return; 
  34.   emp = target; 
  35.   var buffer = '<table id="actual" border="1" width="60%">'; 
  36.   buffer +=' <tr><th>ID</th><th>NAME</th><th>LAST NAME</th></tr> '; 
  37.   buffer +=' <tr><td>'+target.id+'</td><td>'+target.name+'</td><td>'+target.lastName+'</td></tr> '; 
  38.   buffer +=' <tr><td></td><td><button onclick="emp=null;refreshView(null);return false;">OK</button></td><td><button onclick="makeEditable(this);return false;">EDIT</button></td></tr> '; 
  39.   buffer += '</table>'; 
  40.   document.getElementById('emplView').innerHTML = buffer; 
  41.  
  42.  
  43. function loader(url){ 
  44.   var body = document.getElementsByTagName('BODY')[0]; 
  45.   var node = document.createElement('SCRIPT'); 
  46.   node.setAttribute('id','loader'); 
  47.   node.setAttribute('language','JavaScript'); 
  48.   node.setAttribute('src',''+url); 
  49.   body.appendChild(node); 
  50.   setTimeout('reset()',200); 
  51.  
  52.  
  53. function reset(){ 
  54.   var body = document.getElementsByTagName('BODY')[0]; 
  55.   var node = document.getElementById('loader'); 
  56.   if(node){ 
  57.     body.removeChild(node); 

La Servlet

  1. public class Java2JsAndBackServlet extends HttpServlet { 
  2.   // 
  3.   private static final String CONTENT_TYPE = "text/html"; 
  4.   // 
  5.   private static Employee[] emps; 
  6.  
  7.   public void init() throws ServletException { 
  8.     emps = new Employee[] { 
  9.         new Employee(1, "STEFANO", "ROSSI"), 
  10.         new Employee(2, "GIOVANNI", "VERDI"), 
  11.         new Employee(3, "IVAN", "BIANCHI") 
  12.     }; 
  13.  
  14.   public void doGet(HttpServletRequest request, HttpServletResponse response) throws 
  15.       ServletException, IOException { 
  16.     String editData = request.getParameter("edit"); 
  17.     if (editData != null) { 
  18.       Employee emp = js2Java(editData); 
  19.       for (int i = 0; i < emps.length; i++) { 
  20.         if (emps[i].getId() == emp.getId()) { 
  21.           emps[i] = emp; 
  22.      return; 
  23.     String id = (id = request.getParameter("id")) == null ? "-1" : 
  24.         "".equals(id) ? 
  25.         "-1" : id; 
  26.     Employee tmp = searchById(Integer.parseInt(id)); 
  27.     response.setContentType(CONTENT_TYPE); 
  28.     PrintWriter out = response.getWriter(); 
  29.     if (tmp != null) { 
  30.       out.print(buildResponse(tmp)); 
  31.  
  32.   public void doPost(HttpServletRequest request, HttpServletResponse response) throws 
  33.       ServletException, IOException { 
  34.     doGet(request, response); 
  35.  
  36.   private String buildResponse(Employee e) { 
  37.     StringBuffer sb = new StringBuffer(); 
  38.     sb.append("\n var e = ").append(java2Js(e)) 
  39.         .append("\n refreshView(e);"); 
  40.     return sb.toString(); 
  41.  
  42.   private Employee searchById(int id) { 
  43.     if (id == -1) { 
  44.       return null; 
  45.     for (int i = 0; i < emps.length; i++) { 
  46.       if (emps[i].getId() == id) { 
  47.         return emps[i]; 
  48.     return null; 
  49.  
  50.   private String java2Js(Employee e) { 
  51.     StringBuffer sb = new StringBuffer(); 
  52.     sb.append("{ ").append("id:").append(e.getId()).append(',') 
  53.         .append("name:'").append(e.getName()).append("',") 
  54.         .append("lastName:'").append(e.getLastName()).append("'};"); 
  55.     return sb.toString(); 
  56.  
  57.   private Employee js2Java(String data) { 
  58.     Employee emp = new Employee(); 
  59.     String toParse = data.replace('{', ' ').replace('}', ' ').replaceAll("'", 
  60.         ""). 
  61.         trim(); 
  62.     String[] entries = toParse.split(","); 
  63.     for (int i = 0; i < entries.length; i++) { 
  64.       String[] vals = entries[i].split(":"); 
  65.       if (vals[0].equals("id")) { 
  66.         emp.id = Integer.parseInt(vals[1]); 
  67.       if (vals[0].equals("name")) { 
  68.         emp.name = vals[1]; 
  69.       if (vals[0].equals("lastName")) { 
  70.         emp.lastName = vals[1]; 
  71.     return emp; 
  72.  
  73.   /** 
  74.    * <p>Title: Classe Impiegato </p> 
  75.    */ 
  76.   public class Employee { 
  77.     // 
  78.     private int id; 
  79.     // 
  80.     private String name; 
  81.     // 
  82.     private String lastName; 
  83.  
  84.     public Employee() { 
  85.  
  86.     public Employee(int id, String name, String lastName) { 
  87.       this.id = id; 
  88.       this.name = name; 
  89.       this.lastName = lastName; 
  90.  
  91.     public long getId() { 
  92.       return id; 
  93.  
  94.     public String getName() { 
  95.       return name; 
  96.  
  97.     public String getLastName() { 
  98.       return lastName; 
  99.  
  100.     public String toString() { 
  101.       return "EMPLOYEE - ID: " + getId() + " NAME: " + getName() + " LAST: " + 
  102.           getLastName(); 
  103.  
  104. } //END 

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.