Ajax en Java EE
Álvaro Sánchez-Mariscal
Álvaro Sánchez Mariscal
[email protected]
© 2007, Grupo Salenda, S.L.
¿Quiénes somos?
¿Quiénes somos?
• Sobre Salenda.
– Misión: ser un referente en España en tecnología
p
g
Java.
Líneas de negocio:
– Líneas de negocio:
• Formación.
• Desarrollo de aplicaciones
• Desarrollo de aplicaciones.
– www.salenda.es
¿Quiénes somos?
¿Quiénes somos?
• Sobre mí.
í
b
p
– +6 años de experiencia profesional en
p
Java / Java EE.
Instructor oficial de BEA Systems.
– Instructor oficial de BEA Systems
• Mérito “BEA Technical Director”
Instructor oficial de Sun Microsystems
– Instructor oficial de Sun Microsystems.
– Ex-presidente de javaHispano.
– Ex-vocal del GUL.
– Fundador de Salenda.
¿Qué es AJAX?
• Asynchronous JavaScript And XML
S i t
(J
(JavaScript y XML asíncronos),
– Técnica de desarrollo web para crear
XML
p
)
í
aplicaciones interactivas.
• Se ejecuta en el cliente
Se ejecuta en el cliente
• Mantiene comunicación asíncrona con el
id
servidor en segundo plano
– Se realizan cambios en la misma página sin
p g
d
l
recargarla (más rapidez)
Historia
• Desarrollo de Microsoft de Remote Scripting
(hace 10 años)
(
)
• IFrame (Microsoft Internet Explorer 3, 1996)
– Carga asíncrona de páginas
• Layers (Netscape 4, 1997)
• Microsoft's Remote Scripting (o MSRS, 1998)
– Empleo de Applet Java
– Internet Explorer 4 y Netscape 4
O tlook Web Access
– Outlook Web Access
• Definición del término AJAX (Febrero 2005)
– Jesse James Garrett: “A New Approach to Web
– Jesse James Garrett: A New Approach to Web
Applications”
Tecnologías empleadas
• AJAX es una combinación de tres tecnologías ya
existentes:
– XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño
– Document Object Model (DOM) accedido con un lenguaje de
scripting por parte del usuario para mostrar e interactuar
scripting por parte del usuario para mostrar e interactuar
dinámicamente con la información presentada.
– El objeto XMLHttpRequest para intercambiar datos
asincrónicamente con el servidor web En algunos frameworks y en
asincrónicamente con el servidor web. En algunos frameworks y en
algunas situaciones concretas, se usa un objeto IFrame en lugar del
XMLHttpRequest para realizar dichos intercambios.
l f
• XML es el formato usado comunmente para la
XML
transferencia de vuelta al servidor
– Cualquier formato puede funcionar, incluyendo HTML
,
y
t
d
t
l
q
p
preformateado, texto plano, JSON y hasta EBML.
Web 2.0
• Actualmente la mayoría de las actividades del
usuario se desarrollan en la web (Correo Chats
usuario se desarrollan en la web (Correo, Chats,
compartir información…)
g
p
Web 1.0
Páginas personales
Email/News
MP3
Terraserver
Enciclopedia Británica
DoubleClick
Ofoto
Web 1.5
Wikis
Foros
Napster
MapQuest
Web 2.0
Blogs
g
RSS/Sindicación
iTunes
Google Maps
Wikipedia
Google AdSense
Flickr
Web 2.0
• Se está produciendo una evolución de las
i
l
h i
li
t di i
aplicaciones tradicionales hacia
aplicaciones web enfocadas al usuario
final, también conocidas
• RIA (Rich Internet Application):
• RIA (Rich Internet Application):
– Interfaces intuitivos
– Sistemas sencillos e intuitivos
– Comunicación de cambios al usuario
Web 2.0
• Tecnologías o desarrollos en las que se
t
pp
t
sustentan las RIA:
RIA
– Applet
– Macromedia Flash
– Java Web Start
Java Web Start
– DHTML
– DHTML con Iframe
– AJAX
l
f
XMLHttpRequest
• API que se encuentra implementado en el
navegador y que proporciona los métodos y
navegador y que proporciona los métodos y
propiedades necesarios para la comunicación
con el servidor mediante HTTP
con el servidor mediante HTTP
• Originalmente desarrollado por Microsoft como
bj t A ti
X di
un objeto ActiveX, disponible desde Internet
t
Explorer 5
ibl d d I t
• Utilizada por JavaScript, Jscript, VBScript u otros
lenguajes de scripting de navegadores web
• Emplea un canal de conexión independiente
Características de XMLHttpRequest
• Comunicación GET/POST
Documentos pueden ser texto plano/xml
• Documentos pueden ser texto plano/xml
• Trabaja en background
• Número limitado de peticiones
• Permite especificar un manejador para el
d d
l
b
control de cambios de estado
d
l d
d
• Manejador notifica el estado de la petición:
– Inicializada
– Iniciada
– En proceso de retornar la información
– Operación completada
Tipo de respuesta
• Documento XML
• Texto
– Procesado en el cliente
Procesado en el cliente
– Mostrado directamente
• JavaScript
– Evaluado en JavaScript mediante ‘eval()’
Evaluado en JavaScript mediante eval()
– JSON, “JavaScript Object Notation”:
• Es un formato ligero para el intercambio de datos
• Es un formato ligero para el intercambio de datos
• Es un subconjunto de la notación literal de objetos de
Javascript pero no requiere el uso de Javascript
Javascript pero no requiere el uso de Javascript
Ejemplo JSON
Definición de barra de menús usando JSON y XML:
Métodos de XMLHttpRequest
• open("method", "URL", syn/asyn)
– Asigna la URL de destino, el método y otros parámetros opcionales
d
de una petición pendiente
di
t
ti ió
• send(content)
– Envía la petición, opcionalmente se puede enviar una cadena de
, p
p
p
texto o un objeto DOM
• abort()
– Detiene la petición actual
Detiene la petición actual
• getAllResponseHeaders()
– Devuelve todas las cabeceras de la respuesta como pares de
etiqueta y valores en una cadena
etiqueta y valores en una cadena
• getResponseHeader("headerLabel")
– Devuelve el valor de una cabecera determinada
• setRequestHeader("label", "value")
– Asigna un valor al par label/value para la cabecera enviada.
Propiedades de XMLHttpRequest
• onreadystatechange
•
•
•
•
•
– El manejador del evento llamado en cada cambio de estado del objeto
d St t
readyState
Indica el estado del objeto o la petición
–
• 0 = sin inicializar
• 1 =cargando
• 1 =cargando
• 2 = fin de la carga
• 3 = actualizando la información recibida
• 4 = Operación completada
status
– Estado HTTP devuelto por el servidor
• 404 si la página no se encuentra
• 200 si todo ha ido bien
d h id bi
i
responseText:
– Cadena de texto con los datos devueltos por el servidor
responseXML
XML
– Objeto DOM devuelto por el servidor
statusText
)
– Respuesta del servidor asociada al status (mensaje de texto)
j d
d l
(
id
i d
l
XMLHttpRequest
• Alternativas:
p
– IFrame oculto
– Netscape's LiveConnect
– Microsoft's ActiveX
– Microsoft's XML Data Islands
– Microsoft s XML Data Islands
– Macromedia Flash Player
– Java Applets
Funcionamiento de AJAX
1. Usuario provoca un evento
2
Se crea y configura un objeto XMLHttpRequest
2. Se crea y configura un objeto XMLHttpRequest
El objeto XMLHttpRequest realiza una llamada
3.
al servidor
La petición se procesa en el servidor
El servidor retorna un documento XML que
contienen el resultado
El objeto XMLHttpRequest llama a la función
lt d
callback() y procesa el resultado
llb k()
q
4.
5.
6.
7. Se actualiza el DOM de la página asociado con
la petición con el resultado devuelto
la petición con el resultado devuelto
l
Web tradicional vs AJAX (I)
Web tradicional vs AJAX (II)
Navegadores que soportan AJAX
• Microsoft Internet Explorer >= 5.0
N
ió 7 1)
• Navegadores basados en Gecko (versión 7.1)
G k (
– Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock,
b
d
d
E i h
Epiphany, Galeon y Netscape
N t
G l
• Navegadores con API KHTML (versión 3.2)
– Konqueror 3.2, Safari 1.2
p
• Opera 8.0
• Opera Mobile Browser versión 8.0 (móvil)
• Navegador para S60 de Nokia (móvil)
• Navegador para S60 de Nokia (móvil)
– Basado en Safari y API KHTML
Ventajas
• Mayor interactividad
– Recuperación asíncrona de datos reduciendo el tiempo
– Recuperación asíncrona de datos, reduciendo el tiempo
de espera del usuario
• Facilidad de manejo del usuario
Facilidad de manejo del usuario
– El usuario tiene un mayor conocimiento de las
aplicaciones de escritorio
• Se reduce el tamaño de la información
intercambiada
• Portabilidad entre plataformas
– No requieren instalación de plugins, applets de Java, ni
ningún otro elemento
• Código público
Inconvenientes
• Usabilidad: Comportamiento del usuario ante la
navegación
– Botón de volver atrás del navegador
• - Empleo de iframe ocultos para almacenar el historial)
• - Empleo de fragmento identificador del URL (‘#’) y recuperación
mediante JavaScript
S i t
di
t
J
– Problema al agregar marcadores/favoritos en un momento
determinado de la aplicación
•
Empleo del fragmento identificador del URL (‘#’) y recuperación
• - Empleo del fragmento identificador del URL ( # ) y recuperación
mediante JavaScript
– Problemas al imprimir páginas renderizadas dinámicamente
• Tiempos de respuesta entre la petición del usuario y la
respuesta del servidor
Empleo de feedback visual para indicar el estado de la petición al
– Empleo de feedback visual para indicar el estado de la petición al
usuario
Inconvenientes
• JavaScript
– Requiere que los usuarios tengan el JavaScript
activado en el navegador
– En el caso de Internet Explorer 6 y anteriores,
que necesita tener activado el ActiveX (En
q
Internet Explorer 7, se implementa como
JavaScript nativo)
J
)
p
(
– Como en DHTML, debe comprobarse la
compatibilidad entre navegadores y plataformas
compatibilidad entre navegadores y plataformas
Accesibilidad
• Los desarrolladores necesitan proporcionar
i
i
opciones para usuarios en otras
plataformas o navegadores que no
utilicen AJAX
t
Usos de AJAX
• Validación de datos de formularios en tiempo real
– Identificadores de usuario, nº de serie, códigos postales u otro
p
g
,
,
código especial que necesite validación en el lado del servidor antes
de ser enviado el formulario.
• Autocompletado
Autocompletado
– Direcciones de correo, nombres, ciudades
p
– Obtener información más detallada de un producto
• Operaciones de detalle
•
Comentarios de: Ajax en Java EE (0)
No hay comentarios