Tip / AJAX

Ajax ... before Ajax (3)

Abstract
Un altro semplice Tip pre-Ajax per attuare il retrieving dei dati Server-Side e l'autocompletamento di un field!

Data di stesura: 20/02/2006
Data di pubblicazione: 20/02/2006
Ultima modifica: 04/04/2006

di Stefano Fago

Contenuti

I nostri ingredienti.

In questo Tip non utilizzeremo un IFRAME ma sfrutteremo il DOM per la creazione e distruzione di elementi. Dato un text-field, inserendo le lettere vedremo apparire l'elenco degli elementi corrispondenti; da questo elenco click-ando verrà riempito il field con la scelta fatta!
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 tabella di 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!

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

Buon Divertimento!

I nostri ingredienti.

La pagina HTML

<table>
 <form name="selection" action="#" method="post">
  <tr>
   <td><input type="text" name="product" value="" onkeyup="update(this,'panel')"></td>
   <td><div id="panel" style="position:absolute;border:1px solid #000;"/></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" name="Submit" value="Submit"><input type="reset" value="Reset"></td>
  </tr>
  </form>
 </table>

Gli script

```
function update(subject,target){  
```

  var url = 'res?id='+escape(subject.name)+'&param='+escape(subject.value)+'&target='+target;

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

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

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

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

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

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

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

```
    if(node){ 
```
```
       body.removeChild(node); 
```
```
     } 
```
```
 }  
```
```
 
```
```
function assign(selected){ 
```

 document.forms['selection'].product.value = selected.innerHTML;

```
 return false; 
```
```
} 
```

La servlet

```
public class ResponseProducer 
```
```
    extends HttpServlet { 
```
```
 
```

  private static String[] products = {

```
      "ALTRO NON IN ELENCO", 
```
```
      "ACCESSORI IDRAULICI", 
```
```
      "AMMORTIZZATORI", 
```
```
      "ANTINE", 
```
```
      "APPARECCHI DI SICUREZZA", 
```
```
      "ARCATA", 
```
```
      "ARGANO", 
```
```
      "ARGANO GEARLESS", 
```
```
      "BARRIERA ELETTRONICA", 
```
```
      "BOTTONIERA CABINA", 
```
```
      "BOTTONIERA PIANO", 
```
```
      "CABINA", 
```
```
      "CASTELLETTO", 
```
```
      "CATENE DI COMPENSAZIONE", 
```
```
      "CAVI FLESSIBILI", 
```
```
      "CENTRALINA IDRAULICA", 
```
```
      "CITOFONI", 
```
```
      "CONTRAPPESI", 
```
```
      "CORRIMANO CABINA ASCENSORE", 
```
```
      "EMERGENZA", 
```
```
      "FOTOCELLULE", 
```
```
      "FUNI", 
```
```
      "GUIDE", 
```
```
      "IMPIANTO A FUNE", 
```
```
      "IMPIANTO ANTIDEFLAGRANTE", 
```
```
      "IMPIANTO OLEODINAMICO", 
```
```
      "IMPIANTO STAGNO", 
```
```
      "LAMPADE", 
```
```
      "LAMPADE A PROTEZIONE ADPE", 
```
```
      "LAMPADE GERMICIDE", 
```
```
      "LIMITATORE DI VELOCITA'", 
```
```
      "MOTORI C.A.", 
```
```
      "MOTORI C.C.", 
```
```
      "OPERATORI", 
```
```
      "OSCILLATORI", 
```
```
      "PATTINI CABINA", 
```
```
      "PATTINI CABINA", 
```
```
      "PATTINO RETRATTILE", 
```
```
      "PESATORI CABINA", 
```
```
      "PISTONE IDRAULICO", 
```

      "PORTA DI CABINA A GHIGLIOTTINA",

```
      "PORTA DI CABINA AUTOMATICA", 
```
```
      "PORTA DI PIANO AUTOMATICHE", 
```
```
      "PORTE AD 1 BATTENTE", 
```
```
      "PORTE AD 2 BATTENTI", 
```

      "PORTE DI PIANO A GHIGLIOTTINA",

```
      "PRECABLAGGI", 
```
```
      "PULEGGE", 
```
```
      "QUADRI 2V", 
```
```
      "QUADRI A RELE", 
```
```
      "QUADRI VARIATORE FREQ.", 
```
```
      "QUADRO DISTRIBUZIONE F.M.", 
```
```
      "QUADRO SINOTTICO", 
```

      "RACCORDERIA PER TUBAZIONI IDRAULICHE",

```
      "RICAMBI ARGANO", 
```
```
      "RISCALDAMENTO OLIO", 
```
```
      "RIVESTIMENTO CABINA", 
```
```
      "SCAMBIATORE DI CALORE", 
```
```
      "SCHEDE ELETTRONICHE", 
```
```
      "SEGNALATORI", 
```
```
      "SERRATURE", 
```
```
      "SINTESI VOCALI", 
```
```
      "SOSPENSIONI PORTE", 
```
```
      "SPECCHIO O VETRO", 
```
```
      "STAFFE DI VANO", 
```

      "TENDITORE LIMITATORE VELOCITA'",

```
      "TUBAZIONE IDRAULICA", 
```
```
      "VARIATORI DI FREQUENZA"}; 
```
```
 
```

  public void doGet(HttpServletRequest request, HttpServletResponse response) throws

```
      ServletException, IOException { 
```

    response.setContentType("text/html");

    response.getWriter().println(manageRequest(request));

```
  } 
```
```
 
```

  private String manageRequest(HttpServletRequest req) {

    String id = req.getParameter("id");

    String param = req.getParameter("param");

    String target = req.getParameter("target");

```
    if ( (id == null) || 
```
```
        (param == null) || 
```
```
        (target == null) 
```
```
        ) { 
```
```
      return ""; 
```
```
    } 
```
```
    if (id.equals("product")) { 
```

      return generateScriptWith(id, param, target);

```
    } 
```
```
    return ""; 
```
```
  } 
```
```
 
```

  public String generateScriptWith(String id, String param, String target) {

    StringBuffer sb = new StringBuffer();

```
    sb.append("function callback(){") 
```

        .append("\n  var t = document.getElementById('" + target + "');")

        .append("\n  t.innerHTML = '" + createFilteredBody(param) + "';\n")

```
        .append("}\n") 
```
```
        .append("callback();\n"); 
```
```
    return sb.toString(); 
```
```
  } 
```
```
 
```
```
 
```

  public String createFilteredBody(String search) {

```
    int counter = 0; 
```

    StringBuffer sb = new StringBuffer();

```
    sb.append("<table>"); 
```

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

      if (products[i].toLowerCase().indexOf(search) >= 0) {

        String value = products[i].replace('\'', ' ');

        sb.append("<tr><td style=\"width:270px;background:").append((counter%2==0?"#e5e5e5;":"#c3c3c3;")).append("\">")

            .append("<a href=\"#\" onclick=\"return assign(this)\" >")

```
            .append(value) 
```

            .append("</a></td></tr>");

```
        ++counter; 
```
```
      } 
```
```
    } 
```
```
    sb.append("</table>"); 
```
```
    return sb.toString(); 
```
```
  } 
```
```
 
```
```
} 
```

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 (4)
http://www.siforge.org/articles/2006/03/14-ajax_before_ajax_4.html

Ajax ... before Ajax (3)

I nostri ingredienti.

Informazioni sull'autore

Risorse

Cosa ne pensi di questo articolo?

Discussioni

	Articoli Manifesto Tools Links Canali Libri Contatti ?
	Autori Temi Società e associazioni