July 10, 2007

Utilizando Ajax y JSON con Struts

En este mini-tutorial me gustaría mostrar, siguiendo un ejemplo, como he utilizado Ajax en una aplicación desarrollada con Struts. Antes de comenzar he de decir que he utilizado la librería JavaScript Prototype como ayuda.

Imaginemos que tenemos un formulario donde debemos introducir nuestro código postal, población y provincia y queremos que cuando el usuario introduzca el código postal, automáticamente aparezca en sus respectivas cajas de texto la población y provincia a la que pertenece ese código postal. El código del formulario sería algo parecido a lo siguiente:

<input type="text" id="codpostal" name="codpostal"/>
<input type="text" id="poblacion" name="poblacion"/>
<input type="text" id="provincia" name="provincia"/>

Para realizar nuestro objetivo, crearemos una funcion JavaScript que utilice Prototype para realizar una petición Ajax a una acción de Struts para hacer la búsqueda en la base de datos y que devuelva el resultado en un objeto JSON mediante el cual rellenaremos el campo población y provincia. El código de esta función sería el siguiente:

function buscaPoblacion()
{
   $('poblacion').value = "Buscando...";
   $('provincia').value = "Buscando...";

   new Ajax.Request('<html:rewrite page="/util/buscapoblacion.do"/>', {
      parameters: {codpostal: $('codpostal').value},
      onComplete: function(transport, json) {
         $('poblacion').value = json.poblacion;
         $('provincia').value = json.provincia;
      }
   });
} 

La acción de Struts que emplearemos para hacer la búsqueda en la base de datos utiliza la librería json-lib para crear objetos JSON. El código del método execute sería algo parecido a lo siguiente:

...
String codpostal=request.getParameter("codpostal);
 
// Realizar la búqueda en la base de datos y almacenar el resultado
// en las variables provincia y población
 
HasMap hm = new HasMap();
hm.put("poblacion",poblacion);
hm.put("provincia",provincia);
 
JSONObject json = JSONObject.fromObject(hm);
response.setHeader("X-JSON", json.toString());
 
return mapping.findForward("completado");
...

Al usar Struts necesitamos redirigir una acción a una página JSP. En nuestro caso no vamos a mostrar el resultado en una página JSP sino que la información JSON irá incluida en la cabecera de una página JSP en blanco. El struts-config.xml quedaría de la siguiente forma:

<action path="/util/buscapoblacion" scope="request"
type="com.util.BuscaPoblacionAction" validate="false">
<forward name="completado" path="/blanco.jsp"/>
</action>

Mas información:
- We Heart Code
- Abhi On Java