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¶m2=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.
Leave a Reply