Archive

Posts Tagged ‘Ajax’

Ancora ajax e prototype (servlet)

September 21st, 2008 Nicola No comments

Continuando il post precedente, ecco un esempio di come può essere il metodo post della servlet chiamata dalla funzione javascript nella Jsp:

function miaFunzione()
{
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);

}

Quello che fa il seguente metodo post è di restituire questo XML:

<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n"
<index>

<mioTag>valore</mioTag>

</index>

Ed ecco il codice del metodo doPost:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/xml; charset=utf-8");
try {

PrintWriter out = response.getWriter();
String tmp = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n";

tmp = "<index>";
out.print(tmp);

String valore = ... leggi il valore da qualche parte...
tmp = "<mioTag>" + valore + "</mioTag>";
out.print(tmp);

tmp = "</index>";
out.print(tmp);
out.close();

} catch (Exception e) {

System.out.println("Errore: " + e);
}

}

Categories: Ajax, Java, Programmazione Web Tags: , ,

Eclipse, ajax e prototype

September 20th, 2008 Nicola 2 comments

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.

Categories: Ajax, Java, Programmazione Web Tags: , , ,