In questo post vediamo un esempio di utilizzo della tecnologia Ajax “nuda e cruda”;capita a volte infatti di dover intervenire su applicazioni già pre esistenti e può essere utile “modernizzarle” senza dover per forza riscrivere tutto oppure utilizzare framework javascript.
E' utile inoltre anche per capire le basi di questa tecnologia che ha rivoluzionato il web avvicinandolo sempre più al mondo desktop.
Nell'esempio abbiamo una jsp con una textbox su cui inserire un numero e poi due bottoni, uno per la chiamata Ajax ed una per il post tradizionale.
Entrambi i pulsanti richiamano la stessa servlet, che dato il numero inserito calcola il codice Isin corretto (ove possibile) ; la classe richiamata è la stessa del precedente post.
La pagina jsp è la seguente:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/WebAjaxTest/js/util.js"></script>
<title>Test Isin Ajax</title>
</head>
<body>
<form method="post" action="/WebAjaxTest/GestioneIsin">
<input type="text" name="txtName" id="idTxtName" value="${valoreCodice}"/><br>
<div id="contenuto">
${result}
</div>
<input type="button" onclick="javascript:chiamaServlet('/WebAjaxTest/GestioneIsin')" name="btnInvio" value="Test chiamata Ajax"/>
<input type="submit" value="Test Chiamata Server"/>
</form>
</body>
</html>
Il pulsante di tipo “button” effettua la chiamata al metodo javascript per scatenare ajax, mentre il pulsante di tipo “submit” effettua la chiamata lato server classica. Entrambe valorizzano il div con id “contenuto” riportando all'interno il codice isin completo elaborato lato server.
Il metodo doPost della Servlet (GestioneIsin) è il seguente:
String valoreCodice=request.getParameter("txtName");
try
{
String codiceIsinCompleto=ItalianIsin.getIsin(valoreCodice);
String richiestaAjax=request.getParameter("ajaxRequest");
if("true".equals(richiestaAjax)){
PrintWriter pw=response.getWriter();
pw.println(codiceIsinCompleto);
pw.flush();
}
else
{
request.setAttribute("result", codiceIsinCompleto);
request.setAttribute("valoreCodice", valoreCodice);
request.getRequestDispatcher("jsp/TestAjax.jsp").forward(request, response);
}
}
catch(IllegalArgumentException iex){
String richiestaAjax=request.getParameter("ajaxRequest");
if("true".equals(richiestaAjax)){
PrintWriter pw=response.getWriter();
pw.println(iex.getMessage());
pw.flush();
}
else
{
request.setAttribute("result", iex.getMessage());
request.setAttribute("valoreCodice", valoreCodice);
request.getRequestDispatcher("jsp/TestAjax.jsp").forward(request, response);
}
}
}
Lato javascript abbiamo invece
/**
* Recupera l'oggetto XMLHttpRequest
*/
function getXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
try {
return new ActiveXObject('MSXML2.XMLHTTP.3.0');
} catch(e) {alert('errore');}
}
}
return null;
}
/**
- Effettua chiamata asincrona in post alla servlet,
- e mette il contenuto della response http nell'elemento della pagina con
- id “contenuto”, cioè il div sotto la textbox
*/
function chiamaServlet( url){
var xmlHttp=getXMLHttpRequest();
xmlHttp.onreadystatechange=function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200 || xmlHttp.status==0){
var risultatoTxt=xmlHttp.responseText;
var elem=document.getElementById("contenuto");
elem.innerHTML="";
elem.innerHTML=risultatoTxt;
}
else
{
alert('Comunicazione fallita '+xmlHttp.status+" Motivo: "+xmlHttp.statusText);
}
}
};
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("connection", "close");
xmlHttp.send("txtName="+document.getElementById("idTxtName").value+"&ajaxRequest=true");
}
Da notare la chiamata in post utilizzando l'oggetto XmlHttpRequest, in particolare l'utilizzo del metodo send concatenando i parametri con il caratter & . Effettuando invece la chiamata in get basta concatenare i parametri nell'url e invocare il metodo send passando il parametro null.
La gestione asincrona della chiamata è implementata utilizzando una funzione anonima javascript che valorizza la proprietà onreadystatechange dell'oggetto XmlHttpRequest
