Posts Tagged 'ajax'

Envío de formularios de forma asíncrona

jQuery Form Plugin es, como su nombre indica, un plugin de jQuery que permite de modo sencillo y no intrusivo actualizar formularios HTML para usar AJAX. Aplicado a un formulario se consigue que al hacer submit sobre el, se envien sus datos de forma asíncrona sin necesidad de refrescar toda la página.

Está muy bien documentado con ejemplos así que en este caso no haré ningúno.

Prueba de concepto de DWR (parte I)

He oido hablar muy bien de DWR (Direct Web Remoting) pero hasta ahora no he tenido un momento para probarlo.

DWR es una librería RPC para la realización de llamadas a métodos de clases Java desde funciones JavaScript de manera asíncrona (ajax)

y viceversa (Ajax inverso):

A continuación muestro los pasos que he seguido para realizar las prueba de concepto.

Creo un proyecto web (Dynamic Web Project) con Eclipse.

Descargo dwr.jar y lo añado a las librerías del proyecto junto al jar de Commons Logging requerido.

Dwr.jar contiene dos partes fundamentales. Un Servlet corriendo en el servidor que procesa las peticiones para devolver las respuestas al cliente y unos ficheros js que se encargan de realizar peticiones desde la parte cliente.

El Servlet se añade al proyecto como cualquier otro; insertando su definición y su correspondiente mapping en el fichero web.xml:

<servlet>
	<servlet-name>dwr-invoker</servlet-name>
	<display-name>DWR Servlet</display-name>
	<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
	<init-param>
		<param-name>debug</param-name>
		<param-value>true</param-value>
	</init-param>
</servlet>
<servlet-mapping>
	<servlet-name>dwr-invoker</servlet-name>
	<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

Una vez definido el servlet hay que crear un fichero de configuración en el directorio WEB-INF y llamarlo dwr.xml:

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
  </allow>
</dwr>

Este fichero define que clases van a ser creadas y usadas remotamente desde JavaScript. Por ahora sólo he definido la clase java.util.Date y lo he hecho usando new como valor del atributo creator. Este valor indica que se creará una instancia de la clase usando este mismo operador. Aquí hay un listado con el resto de de los creators disponibles.

Ya tengo todo lo necesario para trabajar con DWR y para comprobar que no falta nada despliego* el proyecto en el servidor y hago una llamada al servlet [http://localhost:8080/PruebaDWR/dwr/] desde el navegador. Si todo va bien debería aparecer un listado con todas las clases visibles por DWR (las definidas en las propiedades) y, pinchando sobre cada una de ellas, un detalle de las mismas:

* Nota: Si usas Eclipse Ganymede hace poco publiqué una entrada de como desplegar una aplicación en Jetty

Posteriormente creo un html sencillo y en el head añado las referencias a los ficheros js indicadas en el detalle de la pantalla previamente mostrada.

<script type='text/javascript' src='/PruebaDWR/dwr/interface/JDate.js'></script>
<script type='text/javascript' src='/PruebaDWR/dwr/engine.js'></script>
<script type='text/javascript' src='/PruebaDWR/dwr/util.js'></script>

Por último, tan sólo queda realizar la llamada de forma remota a un método cualquiera de la clase Date. En este caso la hago al método toString que debería devolver la fecha y la hora actual del sistema:

    JDate.toString(function(data) {
  	    document.write(data); 
    });

Llamo al html desde el navegador y obtengo el resultado esperado Sun Aug 24 23:40:22 CEST 2008.

—-

Esto es todo por hoy… en la parte 2 de esta introducción, que publicaré presumiblemente mañana, mostraré como modificar el contenido de la parte cliente desde Java (Ajax inverso).

Buenas noches. Mañana será otro hermoso día 😉

Generador online de GIFs de progreso

Cuando se hace una llamada asíncrona a servidor usando AJAX, en la mayoría de los casos, se suele mostrar una barra de progreso para indicar al usuario de que el sistema está trabajando y de este modo no se impaciente. Yo normalmente tomo prestado algún gif animado de la red y en ocasiones no pega ni con cola con la estética general de la aplicación. Desde que he descubierto a Ajaxload puedo generar gifs e progreso a mi gusto.

—-
Actualización (26 Agosto 2008): Aquí hay más -> http://www.webscriptlab.com/

Ejemplo AJAX con JQuery + Struts + JSON

El siguiente snippet realiza una llamada asíncrona a una url que devuelve texto en formato JSON al hacer click sobre un botón cuyo id es “idBoton” para posteriormente rellenar el select cuyo id es “idSelect”.

$("#idBoton").click(function () { 
	      $.getJSON("./devuelveJSON.do",
	        function(data){	        
	          $("select[name='idSelect']").removeOption(/./);
	          $.each(data.listaObjetos, function(i,objeto){
	          	$("select[name='idSelect']").addOption(objeto.id, "[" + objeto.nombre + "] " ); 	          		                      
	          });
	        });
	});

Para la manipulación de Selects (del modo que se hace aquí) hay que importar un plugin de JQuery que se encuentra en la siguiente URL http://www.texotela.co.uk/code/jquery/select/.

A continuación se muestra como devolver una cadena JSON desde un action de Struts. En el ejemplo el JSON se genera a partir de un ArrayList de objetos “Objeto” (valga la redundancia). Cada objeto tiene como atributos un “id” y un “nombre”. Para la conversión de listas a cadenas JSON se usa Json-lib, una librería java muy útil para la transformacion de beans, mapas, colecciones, arrays y XML a JSON y viceversa.

public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {

response.setContentType("text/json");

ArrayList lista = new ArrayList();
Objeto objeto =new Objeto();
objeto.setId("1");
objeto.setNombre("Objeto 1");

lista.add(objeto);

objeto.setId("2");
objeto.setNombre("Objeto 2");

lista.add(objeto);

JSONArray jsonArray = JSONArray.fromObject(lista);

PrintWriter pw = response.getWriter();
pw.write("({\"listaObjetos\":" + jsonArray.toString() + "})");
pw.flush();
pw.close();
return null;

}

Add to Technorati Favorites
Clicky Web Analytics Clicky

Flickr Photos

Aljibe

luz

C1

C1

Más fotos