Qu ofrece Autentia?

Somos su empresa de arquitectura y soporte a desarrollo

Java/.Net
En cualquier empresa mediana o grande donde exista un departamento de desarrollo informtico encontramos un difcil equilibrio entre innovacin y servicio.

Si se trata de estar a la ltima, es bastante fcil perder las perspectiva y entrar en una espiral de innovacin continua, olvidando los objetivos estratgicos de la propia empresa. Adems, al disponer
de unos recursos limitados en nmero y un ambiente muy acotado, no es posible alimentarse de experiencias (xitos y fracasos) de entornos distintos. Se produce endogamia tecnolgica.
Si el da a da te puede, es realmente fcil quedarse obsoleto y perder competitividad.

Tener personal cualificado y disponible para ayudar puntualmente es complejo por los modelos organizativos y de costes (incluso para las grandes consultoras). En Autentia, nos hemos colocado en el centro
de este problema, creando una empresa de arquitectura tecnolgica y soporte al desarrollo en nuevas
tecnologas. Somos expertos en desarrollos empresariales compartidos por muchas empresas.
Asistencia a responsables de reas de Tecnologa.
Asesoramiento personal tcnico/organizativo.
Recomendaciones arquitectnicas: Frameworks
Tcnicas de control de proyectos.
Auditorias de calidad y rendimiento.
Desarrollos de sistemas Web y componentes a medida.
Toma de requisitos, anlisis, diseo y desarrollo.
Construccin de Sistemas transaccionales Web
Reingeniera de aplicaciones
Desarrollo y/o evolucin de Frameworks
Formacin a la carta
Direccin de proyectos.
Introduccin a las nuevas tecnologas para directivos.
Gestin eficaz del tiempo.
Anlisis y diseo orientado a objeto y UML.
Patrones de diseo
Java/J2EE a todos los niveles.
Buenas prcticas y tcnicas avanzadas de desarrollo J2EE
Struts / JSF / EJBs / Hibernate
C/C++ en Windows y Linux.
Arquitectura de Aplicaciones Empresariales

Autentia: Nuevas soluciones para problemas antiguos... Hablamos?

Isaac Newton 1, Local 28
Tres Cantos 28760
Madrid

www.autentia.com

Roberto Canales Mora: 655 99 11 72

Fax: 91 656 65 04
E-mail: rcanales@autentia.com

Pgina 1 de 8

Home | Quienes Somos | Empleo |

Tutoriales | Contacte

Tutorial desarrollado por: Ivn Zaera Avelln

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

Descargar este documento en formato PDF beginAjax.pdf

Firma en nuestro libro de Visitas

IntelliJ IDEA

ajax

JSP Editor

Advanced JSP Editor for professional

developers. Get Trial
www.jetbrains.com

Using AJAX? Sniff all browser settings to

ensure your site works!
www.BrowserHawk.com

Edit JSP, XML, DTD, Schema, XSLT & SOAP.

Easy-to-Use! Free Trial.
www.Altova.com

Anuncios Goooooogle

Anunciarse en este sitio

Indice

1.Introduccin
1.1.Pero, AJAX no era un limpiador?
1.2.La tecnologa AJAX ya exista
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

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

17/02/2006

Pgina 2 de 8

1.Introduccin
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. Adems, se provee un ejemplo sencillo de uso de AJAX a pelo, sugirindose despus posibles formas de
aplicacin 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 acrnimo de Asynchronous Javascript And XML, es decir, Javascript asncrono 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 tecnologa AJAX ya exista

Quin no ha plantado alguna vez un frame/iframe oculto en una pagina web con el objetivo de bajarse algn Javascript
y/o datos del servidor sin tener que recargar la pagina actual? Esto se hace desde tiempos inmemoriales y cumple con la
definicin de lo que es AJAX. Entonces, por qu tanto revuelo?.
El xito actual de la tecnologa 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 decamos 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 comunicacin se hace usando XML. Esto no es cierto: si
bien se puede usar slo XML, tambin se pueden hacer peticiones HTTP que enven y devuelvan texto o cualquier otro
formato que queramos. No obstante, es recomendable usar XML para las comunicaciones y, a ser posible, algn formato
estndar, como por ejemplo SOAP (usado en servicios web).
Ademas del formato de datos, existen dos modos de hacer la peticin: no bloqueante y bloqueante. En el primero se hace
la peticin sin bloquear el cdigo Javascript y la respuesta nos llega a travs de una funcin callback. En el segundo, el
cdigo 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
cdigo multinavegador para crear un objeto XMLHttpRequest es muy sencillo y se puede ver en el ejemplo.

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

17/02/2006

Pgina 3 de 8

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 edicin el nombre de una persona y
pinchar un botn, 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 edicin y el botn y otra que dado el
nombre de una persona devuelva su lugar de residencia. La segunda debera ser un servlet o algo ms civilizado (por
ejemplo un servicio web) pero para el ejemplo nos vale con un JSP porque es rpido, sencillo y ocupa poco y le quita peso
al tutorial.
Todos los datos se enviaran/recibirn en texto plano. Se deja -como no?- como ejercicio al lector montar un ejemplo con
XML.
A continuacin 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

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

17/02/2006

Pgina 4 de 8

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 botn Consultar, con lo que inmediatamente la pagina se modifica (sin recargarse) mostrando el lugar de
residencia de la persona:

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

17/02/2006

Pgina 5 de 8

2.4.Que ha pasado?
Cuando el usuario pulso el botn Consultar, se invoc la funcin Javascript recuperaResidencia de pagina1.jsp. Esta funcin
extrajo el nombre de la persona del campo de edicin y se lo envi como parmetro (por medio de un objeto
XMLHttpRequest) a pagina2.jsp. Ademas, la funcin recuperaResidencia le dijo al objeto XMLHttpRequest que, cuando la
respuesta estuviese lista, invocase a la funcin funcionCallback.
Al invocarse pagina2.jsp, este sencillo cdigo Java comprob el nombre de la persona, obtenido del parmetro 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 funcin funcionCallback en pagina1.jsp la cual chequeo el cdigo de
estado para comprobar que no haba habido error y, seguidamente, actualizo el objeto HTML span con identificador salida
de pagina1.jsp para mostrar el valor devuelto por pagina2.jsp.
Y eso es todo. As de simple. Solo una salvedad: la funcin de callback no se invoca una sola vez, sino cuatro por cada
peticin. 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 peticin. Esto se chequea en la linea:

if( ajax.readyState == 4 )

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

17/02/2006

Pgina 6 de 8

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 estndar 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 libreras Javascript para manipular este tipo de protocolos.
No se considera civilizado (y, en mi opinin es una guarrera 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 aplicacin AJAX y no formatos de presentacin.
No se debera usar AJAX a diestro y siniestro, sino solamente donde sea necesario debido a la interfaz de usuario o a
requerimientos de eficiencia. vase 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:

El cdigo Javascript se ejecuta en el cliente:

hay que probar mas la aplicacin.

va a ser mucho mas difcil 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 mviles :

hay que decidir si se quieren soportar

los dispositivos mviles (PDAs y telfonos mviles) y cual va a ser la alternativa a AJAX.

La tecnologa AJAX aun no es un estndar (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 aplicacin:

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

aplicacin debe estar bajo el mismo dominio.

3.3.Consejo final
No se deje influenciar por las modas ni se haga esclavo de la tecnologa puntera a la hora de disear aplicaciones
informticas. La tecnologa 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 tecnologa subyacente.
Si necesita ayuda al plantear sus soluciones tecnolgicas no dude en contactar con nosotros a travs de nuestra web
www.autentia.com. Estaremos encantados de ayudarle en su problema poniendo a su disposicin a nuestros mejores
expertos a precios asequibles.
Si desea contratar formacin, 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

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

17/02/2006

Pgina 7 de 8

Nuevo servicio de notificaciones

Si deseas que te enviemos un correo electrnico cuando introduzcamos nuevos tutoriales, inserta tu direccin
de correo en el siguiente formulario.
Subscribirse a Novedades
e-mail

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

17/02/2006

Pgina 8 de 8

Otros Tutoriales Recomendados (Tambin ver todos)

Nombre Corto

Descripcin

Schemas XML. Introduccin

esquemas XML

Los esquemas XML (schemas XML) son una evolucin natural de las DTDs. Os mostramos
como emprezar con esta tecnologa.

Optimizacin de Serializacin Java

Os mostramos una sencilla tcnica para mejorar el rendimiento de la serializacin de

objetos en Java, a travs de Streams asociados a buffers en memoria.

XML bsico

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 tecnologa

Instrumentacin de componentes
Java usando JMX

Os mostramos como utilizar las caracteristicas avanzadas de los servidores de

aplicaciones Java/J2EE para realizar la instrumentacin de componentes Java usando
JMX y poniendo como ejemplo la gestin dinamica de propiedades entre nodos

Procesamiento XML en Java con

JAXB y WSDP 1.6

Os mostramos como instalar la versin 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 enseamos como formaterar documentos XML directamente en

vuestro navegador a travs de Plantillas XSL. En cursos sucesivos veremos como hacerlo
en el servidor, para no crear dependencias con el navegador del cliente.

Aadir Scripting a programas Java

Os mostramos como aadir a vuestras aplicaciones soporte de Scripting, gracias a

BeansShell. Esto nos permite ejecutar Java generado dinmicamente.

Transformacin de XML y XSL en

JSPs

Os mostramos como poder utilizar XML y XSL en JSPS, combinado con el Patrn MVC

Implementacin de clases java con

mtodos nativos escritos en C++
(JNI)

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

Introduccin a los portales Java con

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

Nota: Los tutoriales mostrados en este Web tienen como objetivo la difusin del conocimiento.
Los contenidos y comentarios de los tutoriales son responsabilidad de sus respectivos autores.
En algn caso se puede hacer referencia a marcas o nombres cuya propiedad y derechos es de sus
respectivos dueos. Si algn afectado desea que incorporemos alguna resea especfica, no tiene ms que
solicitarlo.
Si alguien encuentra algn problema con la informacin publicada en este Web, rogamos que informe al
administrador rcanales@adictosaltrabajo.com para su resolucin.

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

www.AdictosAlTrabajo.com Opimizado 800X600

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

17/02/2006