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

Contenuti

I nostri ingredienti
La pagina HTML
Gli Script
La Servlet

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:

viene trasmesso un oggetto javascript nella forma:
```
{ 
  id: XXX,
  nome: "?",
  cognome: "?"
}
```
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

```
var emp = null; 
```
```
 
```
```
function searchEmployee(){ 
```

  var idToSearch = document.search.emplId.value;

  loader('/j2js?id='+idToSearch+'&ts='+(new Date()).getTime());

```
  return false; 
```
```
} 
```
```
 
```
```
 
```
```
function update(){ 
```

  var toSubmit = "{id:"+document.getElementById('field0').value+",name:'"+document.getElementById('field1').value+"',lastName:'"+document.getElementById('field2').value+"'}";

  loader('/j2js?edit='+toSubmit+'&ts='+(new Date()).getTime());

```
  return false; 
```
```
} 
```
```
 
```
```
 
```
```
function makeEditable(target){ 
```
```
  if(target.innerHTML=='EDIT'){ 
```

    var table = document.getElementById('actual');

```
    var row = table.rows[1]; 
```

    row.cells[0].innerHTML='<input type="text" id="field0" name="field0" value="'+emp.id+'" />';

    row.cells[1].innerHTML='<input type="text" id="field1" name="field1" value="'+emp.name+'" />';

    row.cells[2].innerHTML='<input type="text" id="field2" name="field2" value="'+emp.lastName+'" />';

```
    target.innerHTML = 'SAVE'; 
```
```
    return; 
```
```
  } 
```
```
  if(target.innerHTML=='SAVE'){ 
```
```
    update(); 
```
```
    refreshView(null); 
```
```
    emp = null; 
```
```
  } 
```
```
} 
```
```
 
```
```
 
```
```
function refreshView(target){ 
```
```
  if(target==null){ 
```

    document.getElementById('emplView').innerHTML = '';

```
    return; 
```
```
  } 
```
```
  emp = target; 
```

  var buffer = '<table id="actual" border="1" width="60%">';

  buffer +=' <tr><th>ID</th><th>NAME</th><th>LAST NAME</th></tr> ';

  buffer +=' <tr><td>'+target.id+'</td><td>'+target.name+'</td><td>'+target.lastName+'</td></tr> ';

  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> ';

```
  buffer += '</table>'; 
```

  document.getElementById('emplView').innerHTML = buffer;

```
} 
```
```
 
```
```
 
```
```
function loader(url){ 
```

  var body = document.getElementsByTagName('BODY')[0];

  var node = document.createElement('SCRIPT');

```
  node.setAttribute('id','loader'); 
```

  node.setAttribute('language','JavaScript');

```
  node.setAttribute('src',''+url); 
```
```
  body.appendChild(node); 
```
```
  setTimeout('reset()',200); 
```
```
} 
```
```
 
```
```
 
```
```
function reset(){ 
```

  var body = document.getElementsByTagName('BODY')[0];

  var node = document.getElementById('loader');

```
  if(node){ 
```
```
    body.removeChild(node); 
```
```
  } 
```
```
} 
```

La Servlet

public class Java2JsAndBackServlet extends HttpServlet {

```
  // 
```

  private static final String CONTENT_TYPE = "text/html";

```
  // 
```
```
  private static Employee[] emps; 
```
```
 
```

  public void init() throws ServletException {

```
    emps = new Employee[] { 
```

        new Employee(1, "STEFANO", "ROSSI"),

        new Employee(2, "GIOVANNI", "VERDI"),

        new Employee(3, "IVAN", "BIANCHI")

```
    }; 
```
```
  } 
```
```
 
```

  public void doGet(HttpServletRequest request, HttpServletResponse response) throws

```
      ServletException, IOException { 
```

    String editData = request.getParameter("edit");

```
    if (editData != null) { 
```

      Employee emp = js2Java(editData);

      for (int i = 0; i < emps.length; i++) {

        if (emps[i].getId() == emp.getId()) {

```
          emps[i] = emp; 
```
```
        } 
```
```
      } 
```
```
     return; 
```
```
    } 
```

    String id = (id = request.getParameter("id")) == null ? "-1" :

```
        "".equals(id) ? 
```
```
        "-1" : id; 
```

    Employee tmp = searchById(Integer.parseInt(id));

    response.setContentType(CONTENT_TYPE);

    PrintWriter out = response.getWriter();

```
    if (tmp != null) { 
```
```
      out.print(buildResponse(tmp)); 
```
```
    } 
```
```
  } 
```
```
 
```

  public void doPost(HttpServletRequest request, HttpServletResponse response) throws

```
      ServletException, IOException { 
```
```
    doGet(request, response); 
```
```
  } 
```
```
 
```

  private String buildResponse(Employee e) {

    StringBuffer sb = new StringBuffer();

    sb.append("\n var e = ").append(java2Js(e))

        .append("\n refreshView(e);");

```
    return sb.toString(); 
```
```
  } 
```
```
 
```

  private Employee searchById(int id) {

```
    if (id == -1) { 
```
```
      return null; 
```
```
    } 
```

    for (int i = 0; i < emps.length; i++) {

```
      if (emps[i].getId() == id) { 
```
```
        return emps[i]; 
```
```
      } 
```
```
    } 
```
```
    return null; 
```
```
  } 
```
```
 
```

  private String java2Js(Employee e) {

    StringBuffer sb = new StringBuffer();

    sb.append("{ ").append("id:").append(e.getId()).append(',')

        .append("name:'").append(e.getName()).append("',")

        .append("lastName:'").append(e.getLastName()).append("'};");

```
    return sb.toString(); 
```
```
  } 
```
```
 
```

  private Employee js2Java(String data) {

```
    Employee emp = new Employee(); 
```

    String toParse = data.replace('{', ' ').replace('}', ' ').replaceAll("'",

```
        ""). 
```
```
        trim(); 
```

    String[] entries = toParse.split(",");

    for (int i = 0; i < entries.length; i++) {

      String[] vals = entries[i].split(":");

```
      if (vals[0].equals("id")) { 
```

        emp.id = Integer.parseInt(vals[1]);

```
      } 
```
```
      if (vals[0].equals("name")) { 
```
```
        emp.name = vals[1]; 
```
```
      } 
```

      if (vals[0].equals("lastName")) {

```
        emp.lastName = vals[1]; 
```
```
      } 
```
```
    } 
```
```
    return emp; 
```
```
  } 
```
```
 
```
```
  /** 
```
```
   * <p>Title: Classe Impiegato </p> 
```
```
   */ 
```
```
  public class Employee { 
```
```
    // 
```
```
    private int id; 
```
```
    // 
```
```
    private String name; 
```
```
    // 
```
```
    private String lastName; 
```
```
 
```
```
    public Employee() { 
```
```
    } 
```
```
 
```

    public Employee(int id, String name, String lastName) {

```
      this.id = id; 
```
```
      this.name = name; 
```
```
      this.lastName = lastName; 
```
```
    } 
```
```
 
```
```
    public long getId() { 
```
```
      return id; 
```
```
    } 
```
```
 
```
```
    public String getName() { 
```
```
      return name; 
```
```
    } 
```
```
 
```
```
    public String getLastName() { 
```
```
      return lastName; 
```
```
    } 
```
```
 
```
```
    public String toString() { 
```

      return "EMPLOYEE - ID: " + getId() + " NAME: " + getName() + " LAST: " +

```
          getLastName(); 
```
```
    } 
```
```
  } 
```
```
 
```
```
} //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.

Risorse

Ajax ... before Ajax
http://www.siforge.org/articles/2006/02/02-ajax_before_ajax.html
Ajax ... before Ajax (2)
http://www.siforge.org/articles/2006/02/08-ajax_before_ajax_2.html
Ajax ... before Ajax (3)
http://www.siforge.org/articles/2006/02/20-ajax_before_ajax_3.html