Eclipse, ajax e prototype

La filosofia di Ajax non cambia se si lavora con la tecnologia Jsp/Servlet. Io utilizzo Eclipse (nella versione 3.4), ed la libreria javascript prototype (versione 1.6.0.2).

Per effettuare una chiamata ajax è sufficente:

- creare un Jsp ed una Servlet. L’evento scatenato dalla chiamata Ajax all’interno della Jsp dovrà chiamare una Servlet.

All’interno della Jsp caricare il file:

<script type=”text/javascript” src=”js/prototype-1.6.0.2.js”></script>

Ora è possibile utilizzare l’oggetto  Ajax:

<script language=”JavaScript” type=”text/javascript”>

function caricaSMS(idinvio)
{
var url = 'miaServlet';
var pars = 'param1=1&param2=2' ;

var myAjax = new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: showResponse, asynchronous: false });

Ajax.Responders.register(myGlobalHandlers);

}

L’utilizzo di prototype semplifica al massimo tutta la gestione della comunicazione. Occorre solo specificare l’url di destinazione (la servlet) e l’elenco dei parametri. Quindi la riga di codice

var myAjax = new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: showResponse, asynchronous: false });

fa partire il tutto. La risposta della servlet potrà essere esamita nella funzione showResponse, ovvero la funzione che abbiamo indicato essere chiamata all’evento onComplete

Ovviamente ci sono tante altre funzioni da poter utilizzare.

La riga

Ajax.Responders.register(myGlobalHandlers);

registra myGlobalHandlers agli eventi Ajax. Lo utilizzo per fare comparire qualcosa di carino mentre l’utente apetta che la servlet risponda:

var myGlobalHandlers = {

onCreate: function(){

var oRow = document.getElementById('tr_' + ultimoinvio);
var col = oRow.getElementsByTagName('TD')[0];
col.className="testosms_loading";

}

};

Nella mia applicazione cambio la classe della prima colonna di una determinata riga, per far comparire la classica rotellina che gira.

E ora la funzione showResponse

function showResponse(originalRequest)
{

try {
var parentnode = originalRequest.responseXML.getElementsByTagName("miotag");

var miotag = parentnode[0].childNodes[0].nodeValue;

}
catch(e) {
alert('Errore ' + e.message);
}
}

La mia servlet restituisce una stringa XML, ecco il motivo dell’utilizzo di

originalRequest.responseXML

Nel mio esempio recupero il valore di un tag che si chiama “miotag”. Ora si può modificare la pagina in tempo reale, senza submit, semplicemente utilizzando altro javascript.

Se mai avrò tempo posterò un esempio completo o aggiornerò questo.