Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

Home | Quienes Somos | Empleo | Tutoriales | Contacte

Descargar este documento en formato PDF beginAjax.pdf

Firma en nuestro libro de Visitas

Indice

1.Introducción

1.1.Pero, ¿AJAX® no era un limpiador?

1.2.La tecnología AJAX ya existía

1.3.Formas de uso del control XMLHttpRequest

2.Manos a la obra (el ejemplo)

2.1.pagina1.jsp

2.2.pagina2.jsp

2.3.Funcionamiento del ejemplo

2.4.¿Que ha pasado?

3.Uso de AJAX en el mundo real

3.1.Usos civilizados de AJAX

3.2.A tener en cuenta al usar AJAX

3.3.Consejo final

Tutorial desarrollado por: Iván Zaera Avellón

Puedes encontrarme en Autentia Somos expertos en Java/J2EE Contacta en info@autentia.com

IntelliJ IDEA Advanced JSP Editor for professional developers. Get Trial www.jetbrains.com

ajax Using AJAX? Sniff all browser settings to ensure your site works! www.BrowserHawk.com

JSP Editor Edit JSP, XML, DTD, Schema, XSLT & SOAP. Easy-to-Use! Free Trial. www.Altova.com

Anuncios Goooooogle Anunciarse en este sitio

Página 1 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

1.Introducción

El objetivo de este tutorial es explicar de una forma sencilla que es AJAX y por que se ha montado tanto revuelo con esta palabrita. Además, se provee un ejemplo sencillo de uso de AJAX “a pelo”, sugiriéndose después posibles formas de aplicación de AJAX al mundo real.

1.1.Pero, ¿AJAX® no era un limpiador?

Efectivamente, existe un limpiador de hogar, normalmente de color verde, con ese nombre. Sin embargo, en el mundo web, como ya sabrá el lector, AJAX es el acrónimo de Asynchronous Javascript And XML, es decir, Javascript asíncrono y XML.

Como se puede apreciar, decir AJAX y decir nada es casi lo mismo, aunque el termino nos da algunas pistas. Para ser mas exacto nos da dos pistas y una es medio falsa (luego veremos por qué).

1.2.La tecnología AJAX ya existía

¿Quién no ha plantado alguna vez un frame/iframe oculto en una pagina web con el objetivo de bajarse algún Javascript y/o datos del servidor sin tener que recargar la pagina actual? Esto se hace desde tiempos inmemoriales y cumple con la definición de lo que es AJAX. Entonces, ¿por qué tanto revuelo?.

El éxito actual de la tecnología AJAX se debe a que los navegadores mas importantes han estandarizado un objeto Javascript, llamado XMLHttpRequest, que permite hacer peticiones al servidor desde la pagina actual sin recargarla. Ademas, la respuesta puede ser tratada desde Javascript, bien sea como texto, bien sea como un objeto DOM (XML).

1.3.Formas de uso del control XMLHttpRequest

En el apartado 1.1 decíamos que una de las pistas que da el termino AJAX es medio falsa. Tanto el termino AJAX como el nombre del objeto Javascript que se usa sugieren que toda la comunicación se hace usando XML. Esto no es cierto: si bien se puede usar sólo XML, también se pueden hacer peticiones HTTP que envíen y devuelvan texto o cualquier otro formato que queramos. No obstante, es recomendable usar XML para las comunicaciones y, a ser posible, algún formato estándar, como por ejemplo SOAP (usado en servicios web).

Ademas del formato de datos, existen dos modos de hacer la petición: no bloqueante y bloqueante. En el primero se hace la petición sin bloquear el código Javascript y la respuesta nos llega a través de una función callback. En el segundo, el código Javascript se para hasta que llega la respuesta. Como el modo bloqueante puede dejar colgado el navegador, no se suele usar. De hecho, en nuestro ejemplo, solo veremos el modo no bloqueante.

Por ultimo, existen dos formas de crear un objeto XMLHttpRequest: la de Microsoft, y la del resto de la humanidad. El código multinavegador para crear un objeto XMLHttpRequest es muy sencillo y se puede ver en el ejemplo.

Página 2 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

2.Manos a la obra (el ejemplo)

En este capitulo vamos a ver un ejemplo de uso de AJAX. Al escribir en un campo de edición el nombre de una persona y pinchar un botón, pediremos el lugar de residencia de dicha persona y lo mostraremos sin recargar la pagina.

Para montar el ejemplo necesitaremos dos paginas JSP: una con el campo de edición y el botón y otra que dado el nombre de una persona devuelva su lugar de residencia. La segunda debería ser un servlet o algo más civilizado (por ejemplo un servicio web) pero para el ejemplo nos vale con un JSP porque es rápido, sencillo y ocupa poco y le quita peso al tutorial.

Todos los datos se enviaran/recibirán en texto plano. Se deja -¿como no?- como ejercicio al lector montar un ejemplo con XML.

A continuación se muestran los contenidos de las dos paginas necesarias para el ejemplo. Basta poner los dos JSPs listados en un servidor de aplicaciones Java (como Tomcat) para probar el ejemplo. En el apartado 2.3 se muestra el funcionamiento del ejemplo.

2.1.pagina1.jsp

<html> <head> </head> <body> <script> var ajax; function funcionCallback() { // Comprobamos si la peticion se ha completado (estado 4) if( ajax.readyState == 4 ) { // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200) if( ajax.status == 200 ) { // Escribimos el resultado en la pagina HTML mediante DHTML document.all.salida.innerHTML = "<b>"+ajax.responseText+"</b>"; } } } function recuperaResidencia() { // Creamos el control XMLHttpRequest segun el navegador en el que estemos if( window.XMLHttpRequest ) ajax = new XMLHttpRequest(); // No Internet Explorer else ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer // Almacenamos en el control al funcion que se invocara cuando la peticion // cambie de estado ajax.onreadystatechange = funcionCallback; // Enviamos la peticion ajax.open( "GET", "pagina2.jsp?persona="+document.all.entrada.value, true ); ajax.send( "" ); } </script> <img src="http://www.adictosaltrabajo.com/imagenes/adic000.jpg"/> <br/> <br/> <input type="text" id="entrada" size="77"/> <input type="button" value="Consultar" onclick="recuperaResidencia()"/> <br/> <br/> Lugar de residencia: <span id="salida"></span> <br/> <br/> <img src="http://www.autentia.com/img/autentia.gif"/> </body> </html>

2.2.pagina2.jsp

<% // Obtener el parametro con el nombre de la persona String persona = request.getParameter("persona"); // Devolver el lugar de residencia de la persona if( persona.equalsIgnoreCase("Jesus Hernandez") ) { out.print("GUADALAJARA"); } else

Página 3 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

if( persona.equalsIgnoreCase("Fulano de tal") ) { out.print("PINTO"); } else if( persona.equalsIgnoreCase("Fulano de cual") ) { out.print("VALDEMORO"); } else { out.print("PERSONA DESCONOCIDA"); } %>

2.3.Funcionamiento del ejemplo

El usuario accede a la pagina del ejemplo:

Teclea el nombre de una persona:

Y pulsa el botón “Consultar”, con lo que inmediatamente la pagina se modifica (sin recargarse) mostrando el lugar de residencia de la persona:

Página 4 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

2.4.¿Que ha pasado?

Cuando el usuario pulso el botón Consultar, se invocó la función Javascript recuperaResidencia de pagina1.jsp. Esta función extrajo el nombre de la persona del campo de edición y se lo envió como parámetro (por medio de un objeto XMLHttpRequest) a pagina2.jsp. Ademas, la función recuperaResidencia le dijo al objeto XMLHttpRequest que, cuando la respuesta estuviese lista, invocase a la función funcionCallback.

Al invocarse pagina2.jsp, este sencillo código Java comprobó el nombre de la persona, obtenido del parámetro persona y lo comparo con su lista de personas conocidas. Cuando encontró una coincidencia, respondió con el lugar de residencia de la persona.

En este momento, el objeto XMLHttpRequest invoco a la función funcionCallback en pagina1.jsp la cual chequeo el código de estado para comprobar que no había habido error y, seguidamente, actualizo el objeto HTML span con identificador salidade pagina1.jsp para mostrar el valor devuelto por pagina2.jsp.

Y eso es todo. Así de simple. Solo una salvedad: la función de callback no se invoca una sola vez, sino cuatro por cada petición. Esto lo hace el control XMLHttpRequest para irnos informando de los cambios de estado pero, en realidad, a nosotros solo nos interesa el estado 4, que es cuando ha acabado la petición. Esto se chequea en la linea:

if( ajax.readyState == 4 )

Página 5 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

3.Uso de AJAX en el mundo real

Este capitulo da algunos consejos sobre el uso de AJAX.

3.1.Usos civilizados de AJAX

Como hemos visto, existen multitud de protocolos que pueden ser usados con AJAX. En realidad, el control XMLHttpRequest nos da acceso desde Javascript a cualquier servidor ya que es un simple cliente HTTP. No obstante, es recomendable utilizar protocolos estándar para comunicarse mediante AJAX entre el cliente y el servidor. Ejemplos de protocolos útiles serian SOAP (para acceder a un servicio web) o RSS (para acceder a un servidor RSS). Existen multitud de librerías Javascript para manipular este tipo de protocolos.

No se considera civilizado (y, en mi opinión es una guarrería inmunda) intercambiar HTML mediante AJAX. No voy a dar nombres porque no lo he comprobado personalmente, pero hay sitios web muy usados que lo hacen (ahí queda eso). Lo que viaje por AJAX deben ser datos estructurados y entendibles por la aplicación AJAX y no formatos de presentación.

No se debería usar AJAX a diestro y siniestro, sino solamente donde sea necesario debido a la interfaz de usuario o a requerimientos de eficiencia. véase el apartado siguiente para hacerse una idea de los problemas de usar AJAX.

3.2.A tener en cuenta al usar AJAX

Si nos decidimos por usar AJAX tenemos que tener en cuenta que:

� Los navegadores distintos se comportan de maneras distintas: hay que probar mas la aplicación.

� El código Javascript se ejecuta en el cliente: va a ser mucho mas difícil diagnosticar y resolver los problemas cuando solo ocurran en determinados clientes.

� Hay clientes que pueden tener el Javascript inactivo: hay que decidir que se hace con ellos.

� El objeto XMLHttpRequest no esta disponible aun en dispositivos móviles: hay que decidir si se quieren soportar los dispositivos móviles (PDAs y teléfonos móviles) y cual va a ser la alternativa a AJAX.

� La tecnología AJAX aun no es un estándar (aunque el W3C esta en ello): si no se van a usar navegadores de amplio uso, como Internet Explorer o Mozilla Firefox, hay que asegurarse de que AJAX funciona y de que funciona como queremos.

� Los usuarios con discapacidades no van a poder usar nuestra aplicación: en general, el DHTML no es compatible con las herramientas de accesibilidad existentes.

� No podemos conectarnos con un objeto XMLHttpRequest a un dominio distinto del cual ha creado el objeto: toda la aplicación debe estar bajo el mismo dominio.

3.3.Consejo final

No se deje influenciar por las modas ni se haga esclavo de la tecnología puntera a la hora de diseñar aplicaciones informáticas. La tecnología AJAX es muy potente, pero se debe usar con mucho juicio y solo si es realmente necesaria. Ademas, es conveniente no usar AJAX “a la buena de Dios”, sino apoyado por un framework que le permita abstraerse de la tecnología subyacente.

Si necesita ayuda al plantear sus soluciones tecnológicas no dude en contactar con nosotros a través de nuestra web www.autentia.com. Estaremos encantados de ayudarle en su problema poniendo a su disposición a nuestros mejores expertos a precios asequibles.

Si desea contratar formación, consultoria o desarrollo de piezas a medida puede contactar con

Autentia S.L. Somos expertos en: J2EE, C++, OOP, UML, Vignette, Creatividad ..

y muchas otras cosas

Página 6 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

Nuevo servicio de notificaciones

Si deseas que te enviemos un correo electrónico cuando introduzcamos nuevos tutoriales, inserta tu dirección de correo en el siguiente formulario.

Subscribirse a Novedades

e-mail

Página 7 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm

Patrocinados por enredados.com .... Hosting en Castellano con soporte Java/J2EE

Otros Tutoriales Recomendados (También ver todos)

Nombre Corto Descripción

Schemas XML. Introducción esquemas XML

Los esquemas XML (schemas XML) son una evolución natural de las DTDs. Os mostramos como emprezar con esta tecnología.

Optimización de Serialización Java Os mostramos una sencilla técnica para mejorar el rendimiento de la serialización de objetos en Java, a través de Streams asociados a buffers en memoria.

XML básico Si quieres ver de un modo visual como crear un documento XML, este es tu tutorial. Este es el primero de un conjunto de tutoriales que iremos publicando sobre esta fascinante y amplia tecnología

Instrumentación de componentes Java usando JMX

Os mostramos como utilizar las caracteristicas avanzadas de los servidores de aplicaciones Java/J2EE para realizar la instrumentación de componentes Java usando JMX y poniendo como ejemplo la gestión dinamica de propiedades entre nodos

Procesamiento XML en Java con JAXB y WSDP 1.6

Os mostramos como instalar la versión 1.6 de WSDP y como procesar los ficheros XML con uno de sus componentes, JAXB

XML y XSL en Cliente En este tutorial os enseñamos como formaterar documentos XML directamente en vuestro navegador a través de Plantillas XSL. En cursos sucesivos veremos como hacerlo en el servidor, para no crear dependencias con el navegador del cliente.

Añadir Scripting a programas Java Os mostramos como añadir a vuestras aplicaciones soporte de Scripting, gracias a BeansShell. Esto nos permite ejecutar Java generado dinámicamente.

Transformación de XML y XSL en JSPs

Os mostramos como poder utilizar XML y XSL en JSPS, combinado con el Patrón MVC

Implementación de clases java con métodos nativos escritos en C++ (JNI)

El objetivo de este tutorial es mostrar como se puede implementar una clase Java con métodos nativos escritos en C++ y contenidos en una DLL de Windows, utilizando JNI

Introducción a los portales Java con Jahia

Os mostramos como comenzar con el desarrollo de portales (portlets) Java con Jahia

Nota: Los tutoriales mostrados en este Web tienen como objetivo la difusión del conocimiento. Los contenidos y comentarios de los tutoriales son responsabilidad de sus respectivos autores. En algún caso se puede hacer referencia a marcas o nombres cuya propiedad y derechos es de sus respectivos dueños. Si algún afectado desea que incorporemos alguna reseña específica, no tiene más que solicitarlo. Si alguien encuentra algún problema con la información publicada en este Web, rogamos que informe al administrador rcanales@adictosaltrabajo.com para su resolución.

www.AdictosAlTrabajo.com Opimizado 800X600

Página 8 de 8

17/02/2006file://C:\DOCUME~1\alberto\CONFIG~1\Temp\XZSXHAER.htm