UNIVERSIDAD DE EL SALVADOR

FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE

DEPARTAMENTO DE INGENIERÍA Y ARQUITECTURA

MATERIA:

Administración de Proyectos Informáticos

TEMÁTICA AB ORDADA:

AJAX

DOCENTE:

Ing. Francisco Quijano

PRESENTAN:

Minero Morales, Roberto Orlando

Rodríguez Umaña, Víctor Manuel

LUGAR Y FECHA:

Santa Ana, 31 de octubre de 2009

 ÍNDICE

Introducción...............................................................................................................................................3
Objetivos....................................................................................................................................................4
AJAX.........................................................................................................................................................5
1 Antecedentes.....................................................................................................................................5
2 Motivación.........................................................................................................................................6
3 ¿Qué es AJAX?..................................................................................................................................8
4 El modelo de aplicaciones AJAX.......................................................................................................9
5 Elementos de AJAX.........................................................................................................................11
8 Problemas de AJAX.........................................................................................................................19
9 AJAX en Acción..............................................................................................................................21
10 Tecnologías para el desarrollo de aplicaciones web con AJAX....................................................29
11 Ejemplo de uso de AJAX...............................................................................................................32
Conclusiones............................................................................................................................................52
Recomendaciones.....................................................................................................................................53
Anexos.....................................................................................................................................................54
Glosario...............................................................................................................................................54
Bibliografía..............................................................................................................................................55
 Ajax

Introducción

En momentos con altos índices de desarrollo tecnológico como los actuales, solamente se

puede ser competitivo utilizando herramientas óptimas para el desarrollo de aplicaciones que

sean capaces de cumplir con las exigencias planteadas.

Por otro lado, una de las áreas con más aplicación y demanda al mismo tiempo, es la de las

aplicaciones web, que han dejado de ser afiches informativos en línea para pasar a

convertirse en herramientas fundamentales para el éxito de muchas empresas, esto debido a

que forman parte de su eje empresarial y/u operativo.

Basados en esto, podemos decir que como personas dedicadas al desarrollo de aplicaciones

tecnológicas orientadas al web, necesitamos ser conocedores de herramientas que nos

permitan un desarrollo de aplicaciones más potentes y eficientes, pero de una manera más

rápida, sencilla, eficiente, ordenada y extensible. Una de esas herramientas, misma que hoy

presentamos, es AJAX.

AJAX, provee a los programadores web de toda una gama de oportunidades que permiten el

desarrollo de aplicaciones web mucho más eficientes y al mismo tiempo funcionales. Muchos

de los sitios web más visitados actualmente a nivel mundial no existieran, o simplemente no

presentaran el mismo atractivo si toda su estructura no estuviera fundamentada en AJAX.

Con este documento, resultado de investigación a la que sumamos nuestros propios aportes,

pretendemos introducir la tecnología de una manera breve pero sin limitarnos a contenido

superficial. Así, esperamos que su contenido sea de agrado y utilidad para el lector.

3
 Ajax

Objetivos

General:

• introducir el uso de AJAX como una herramienta para el desarrollo de aplicaciones

web enriquecidas.

Específicos:

• Conocer los indicios de tecnologías anteriores a AJAX, que dieron la pauta para su

desarrollo.

• Crear conciencia sobre la necesidad de utilizar AJAX como tecnología de desarrollo

web para cumplir con las exigencias actuales.

• Entender el modelo de aplicaciones de AJAX y su diferencia con el de las aplicaciones

web tradicionales.

• Conocer los elementos de AJAX y la función que cada uno de ellos desempeña a la

hora de concretar su modelo de aplicaciones.

• Aprender sobre las implementaciones de AJAX a partir del conocimiento de sitios que

hacen uso de dicha tecnología.

• Dar a conocer tecnologías extendidas de AJAX como ICEfaces y Dinamic Faces.

• Ayudar el uso de la tecnología por medio de un ejemplo didáctico, diseñado para ser

sencillo, sin descuidar los aspectos fundamentales para su fácil seguimiento y

comprensión.

4
 Ajax

AJAX

1 Antecedentes

El término AJAX no fue creado sino hasta el año 2005, sin embargo, el uso de las

tecnologías que permiten la existencia de AJAX data de una década atrás, cuando Microsoft

tuvo la iniciativa de el desarrollo de Scripting Remoto.

Las técnicas para la carga asíncrona de contenidos en una página web, sin requerir recarga

completa, se remontan al tiempo del elemento iframe de Internet Explorer (1996) y del

elemento layer de Netscape (1997). Ambos tipos de elemento tenían el atributo “src” que

podía tomar cualquier dirección URL externa, y cargando una página que contenga

JavaScript que manipularan la página paterna, podían lograrse efectos parecidos a los de

AJAX.

Ya en el año 1998, se introdujo el Microsoft's Remote Scripting, resultando ser un sustituto

más elegante para las técnicas de uso de los elementos iframe y layer. Su funcionamiento se

basaba en el envío de datos a través de un applet Java que se podía comunicar con el

cliente por medio de JavaScript. La comunidad de desarrolladores web trabajó para extender

su uso a diferentes navegadores.

En el año 2002, se realizó una modificación por parte de la comunidad de usuarios al

Microsoft Remote Scripting para reemplazar el applet Java por XMLHttpRequest. A partir de

5
 Ajax

aquí, XMLHttpRequest se ha venido implementando en la mayoría de navegadores, lo que

ha permitido que se vuelva casi un “estándar”. Por esta razón, raras veces se utilizan

técnicas alternativas, lo que lleva al apogeo de AJAX.

2 Motivación

Al principio, la web fue destinada a mostrar sólo los documentos HTML. Esto significa que la

aplicación web clásica tiene un "ingrese sus datos, enviar la página al servidor, y esperar una

respuesta", modelo destinado únicamente para las páginas web.

En segundo lugar, existe el problema de la comunicación sincrónica. En la web, la

comunicación sincrónica hace que el usuario solicite una página HTML y el navegador envía

una petición HTTP a un servidor web en su nombre. El servidor realiza el procesamiento, a

continuación, devuelve una respuesta al navegador en forma de una página HTML. El

explorador muestra la página HTML solicitada (Figura 1). El navegador siempre inicia las

solicitudes, mientras que el servidor web sólo responde a las solicitudes del navegador. El

servidor web no inicia peticiones, la comunicación es siempre en una vía. El ciclo de "petición

/ respuesta" es sincrónica, durante el cual el usuario tiene que esperar.

6
 Ajax

Figura 1 – Aplicación Web Tradicional

Como se mencionó, este modelo funciona para navegar por páginas web, pero el desarrollo

de aplicaciones web cada vez más complejas hace que este modelo se esté viniendo abajo y

que ya no sea adecuado. La primera área en la que se descompone es la del rendimiento, el

enfoque de "enter, enviar y esperar" implica tiempo perdido. En segundo lugar, cada vez que

se actualiza una página, se está enviando una nueva petición al servidor, esto requiere un

procesamiento adicional del servidor, y conduce a un mayor consumo de ancho de banda

causado porque la página se actualiza de forma redundante. El problema subyacente es que

hay una falta total de comunicación en dos vías en tiempo real.

Esta conduce a un escenario lento, poco fiable, ineficiente y de baja productividad de las

7
 Ajax

aplicaciones web. Usted tiene dos problemas básicos: uno de tener que esperar por una

respuesta del servidor y otro que los servidores no sean capaces de iniciar actualizaciones.

3 ¿Qué es AJAX?

AJAX es un conjunto de técnicas de programación o un enfoque particular de la

programación web. Estas técnicas de programación implica ser capaz de actualizar sin

problemas una página web o una sección de una aplicación web con una entrada del

servidor, pero sin la necesidad de una actualización inmediata de la página. Esto no significa

que el navegador no establece una conexión con el servidor web. Lo que difiere en el modelo

de AJAX es que se mueve a la posición en la que se actualiza la página.

AJAX son las siglas de Asynchronous JavaScript And XML, es decir, XML y JavaScript

Asíncronos, donde el término asíncrono indica que la tecnología se ejecuta en su propio

marco temporal.

AJAX es un estilo de programación que permite al desarrollador hacer que una página web

interactúe con el servidor web que la aloja. Normalmente, una página web solamente dispone

de un método para comunicarse con el servidor, que consiste en recargarse a ella misma o

cargar otra página. Si se utiliza AJAX, una vez que la página se ha cargado puede ejecutar

comandos en el servidor, recibir cualquier información resultante de dichos comandos y

mostrarla al usuario sin necesidad de recargarse.

8
 Ajax

Las ventajas de este tipo de programación saltan a la vista. La velocidad de la interacción es

mucho mayor, especialmente en el caso de aquellos sitios que tienen muchos gráficos o

contenidos interactivos, puesto que ya no es necesario recargar imágenes o scripts.

Las pesadas interfaces actuales se pueden sustituir por sistemas rápidos, reactivos y muchos

más eficaces. Para todo tipo de aplicaciones en línea, desde programas de correo, foros y

hasta búsquedas en bases de datos, AJAX se ha convertido en el método óptimo para

proporcionar al usuario las ventajas de la funcionalidad del servidor. Las aplicaciones nunca

habían estado tan cerca del nivel de ejecución de los programas instalados localmente.

4 El modelo de aplicaciones AJAX

El modelo de aplicación AJAX busca producir un mayor rendimiento, con lo que la creación

de aplicaciones web sea más eficiente, por medio de una sutil alteración de la forma en que

estas funcionan.

AJAX introduce la idea de la "actualización parcial de la pantalla” para el modelo de

aplicación web. En una aplicación AJAX, sólo los elementos de interfaz de usuario que

contienen nueva información será actualizada. El resto de la interfaz de usuario debe

permanecer sin cambios. Esto significa que usted no tiene que enviar toda la información y

quedarse esperando una respuesta, porque la página anterior ya está en funcionamiento.

9
 Ajax

Este modelo permite la operación continua de una página web, y también significa que el

trabajo realizado en la página no tiene que seguir un patrón predecible.

En lugar de un modelo sincrónico, ahora se puede tener un modelo asíncrono. En una

aplicación AJAX, el servidor puede dejar una notificación cuando está listo, y el cliente lo

recogerá cuando quiere. O bien, el cliente puede hacer peticiones al servidor a intervalos

regulares para ver si el servidor está listo, pero puede continuar con otras operaciones al

mismo tiempo (Figura 2).

Figura 2 – Modelo de aplicación AJAX

Como resultado, el usuario puede seguir utilizando la aplicación, mientras que el cliente

solicita información desde el servidor en segundo plano. Cuando los nuevos datos,

finalmente llegan, sólo las partes relacionadas de la interfaz de usuario necesitaran ser

actualizadas.

10
 Ajax

5 Elementos de AJAX

A continuación se hará un esfuerzo por explicar cómo funciona cada uno de los elementos

poco a poco, hasta lograr una comprensión global de AJAX.

a) JavaScript

JavaScript es una tecnología que permite a los programadores escribir funciones como

parte de un archivo HTML. Por lo general se incluye en la sección <head> de la página

web, y se ejecuta en el ordenador del usuario.

Java Script puede realizar cálculo complejos y mostrar el resultado en la página web.

También permite cambiar elementos dentro de una página web en interacción con el

usuario. Puede acceder a información del sistema del usuario y mostrar los resultados.

Con AJAX, JavaScript puede comunicarse con el servidor web y mostrar la

información resultante.

La sintaxis de JavaScript es muy similar a la de Java, aunque en sentido estricto,

estos dos lenguajes no están relacionados. Sin embargo, al igual que Java, JavaScript

utiliza la programación orientada a objetos.

b) XMLHttpRequest

Abreviado como XHR, es un objeto que proporciona al programador toda la

11
 Ajax

funcionalidad necesaria para que el ordenador cliente se comunique con el servidor

web. La programación orientada a objetos es un estilo de programación en el que, en

lugar de utilizar variables simples, los programas utilizan bloques de información que

no sólo pueden almacenar un grupo de valores sino un conjunto de instrucciones,

conocidas como métodos.

El objeto XHR tiene un conjunto de métodos muy útiles, de los cuales los más

importantes son los siguientes:

open (method, URL, async)

Este método prepara el objeto para la transmisión de información al servidor. Se puede

definir con una serie de tipos, como POST, GET y PUT. La mayor parte del tiempo, se

utiliza POST, es el método más utlizado para enviar información a partir de formularios

HTML. La URL contiene la aplicación a la que se enviará la información.

La propiedad async puede ser true o false. Si es false, indica al objeto que debe

esperar a recibir una respuesta del servidor antes de continuar procesando el código

JavaScript. Si es true, se puede procesar el código mientras se espera la respuesta

del servidor, por ejemplo para mostrar al lector un mensaje “Su petición está siendo

procesada...” hasta que el servidor devuelva el resultado.

12
 Ajax

SetRequestHeader (label, value)

Este método permite indicar al objeto qué tipo de texto le enviaremos, especificándolo

en el encabezado HTTP. Label suele ser casi siempre “Content-Type”, y se pueden

elegir una serie de tipos, incluidos los formatos XML y HTML, o un conjunto de

resultados de un formulario.

send (content)

Este método transmite información textual al servidor.

Las propiedades siguientes también están asociadas con el objeto XHR:

readyState

El valor de esta propiedad se modifica en función del estado del objeto XHR: será 0 si

no está inicializada, 1 si está abierta, 2 si está enviada, 3 si recibe, 4 si está cargada.

Este último valor es el más útil.

OnreadyStateChange

Esta propiedad provoca una acción cada vez que el readyState del objeto cambia.

ResponseText

Esta propiedad toma el valor de la información textual que devuelve el servidor. Por

13
 Ajax

medio de JavaScript, se prepara el objeto XHR con toda la información necesaria, se

envia y se recibe los resultados en la propiedad responseText.

c) Aplicación del lado del servidor

La aplicación del lado del servidor que podemos utilizar para procesar la información

enviada por el XRH, puede ser cualquier aplicación que pueda procesar formularios,

desde JSP hasta ASP, desde los servidores Prolog hasta el legendario “potato-

powered server”.

Las páginas web que utilizan AJAX obtiene resultados prácticamente idénticos

independientemente de la aplicación de servidor utilizada. Con AJAX, el servidor

puede hacer cualquier cosa para el usuario que le permitan hacer sus aplicaciones

como conexiones de bases de datos, búsquedas de imágenes ycualquier cosa que el

servidor sea capaz de hacer. También puede exponer el servidor a ataques maliciosos,

por lo que es un riesgo que debemos tener en cuenta.

d) CSS (Cascading Style Sheets)

CSS es el lenguaje que se utiliza para aplicar reglas de estilo a los documentos HTML,

por ejemplo sobre fuentes y posicionamiento. Con una tecnología nueva como AJAX,

es esencial presentar correctamente los resultados. Por ese motivo, la práctica común

14
 Ajax

es utilizar CSS para dar formato a la información que devuelve la responseText.

Cuando JavaScript utiliza el método getElementById para insertar los resultados de

una petición AJAX en una página web, utiliza el campo id de un elemento HTML como

<div> o <span>, para identificar dónde debe colocarse el texto. También se puede

asignar un campo class a cualquier elemento de este tipo, y aplicarle un estilo

determinado con ayuda de CSS.

6 ¿Cómo funciona?

AJAX es una filosofía, no es un conjunto de aplicaciones ni un lenguaje de programación

concreto. El sistema AJAX está compuesto por cuatro elementos: JavaScript, el objeto

XMLHttpRequest, una aplicación del lado del servidor y CSS.

En pocas palabras, el equipo del cliente ejecuta una serie de comandos JavaScript, incluida

una llamada al objeto XMLHttpRequest. Dicho objeto envía información al servidor en un

encabezado HTTP, y el servidor procesa la información y ejecuta la acción solicitada. Si es

necesario devolver información al equipo cliente, el objeto XMLHttpRequest se encarga de

recibirla y mostrarla con la ayuda de JavaScript y CSS (Figura 3).

15
 Ajax

Figura 3 – Aplicación Web AJAX

7 ¿Por qué usar AJAX?

Una vez se ha entendido como funciona AJAX, ahora vamos a explicar en términos reales,

las ventajas de utilizar AJAX para crear aplicaciones web:

Actualización parcial de las páginas

Usted no tiene que actualizar toda la información en una página entera, usted puede

actualizar sólo las partes de la página que lo requieran. Esto debe permitir que no se

16
 Ajax

actualice toda la página, que se transfieran menos datos, y mejora el flujo de la experiencia

del usuario.

Invisible recuperación de datos

Con una aplicación AJAX, aunque en la superficie de la página web parece que no suceda

algo, podría ser que su actualización se esté dando detrás de ella.

Actualización constante

Porque no es necesario esperar para cargar una página todo el tiempo, y porque AJAX

puede recuperar los datos de forma invisible, la aplicación web puede ser constantemente

actualizada. Una aplicación de software tradicional como Word o Outlook modifica los menús

que muestra o sus opciones, en función de su configuración, o los datos que contiene o de la

situación en que se encuentra y no tiene que esperar por un servidor o usuario para realizar

una acción antes de que se puede descargar el correo nuevo o aplicar una nueva plantilla.

Las técnicas AJAX permiten que las aplicaciones web tiendan a comportarse más como las

aplicaciones de escritorio por este motivo.

Interfaz ágil

Una interfaz que no tiene que ser cambiada es casi inevitablemente una interfaz de usuario

17
 Ajax

que es más fácil de usar. AJAX se puede utilizar para modificar partes de la interfaz y por

medio de hacer alteraciones sutiles, se podría ayudar al usuario a través de una interfaz o un

asistente a acelerar sus procesos.

Arrastrar y soltar

La funcionalidad de “arrastrar y soltar” es una de las mejores características de la mayoría

de aplicaciones de software de escritorio.Esta funcionalidad no se califica como estrictamente

una funcionalidad de AJAX. Es algo que ha sido posible desde hace muchos años en

aplicaciones web, incluso antes de la introducción del objeto XMLHttp Request.

La mayoría de los desarrolladores optan por el Flash o alguna solución similar de peso

pesado en lugar de utilizar el código JavaScript. En la revisión de técnicas de creación de

interfaz, AJAX ha introducido la funcionalidad de arrastrar y soltar, que se puede utilizar para

gestionar los cambios finales, y luego estos cambios se envían a través de AJAX a el

servidor. Por ejemplo, se puede arrastrar varios elementos en la pantalla a nuevas

posiciones, y luego cerrar la sesión. Más tarde, cuando vuelva, esos elementos se

encuentran en la misma posición.

18
 Ajax

8 Problemas de AJAX

Se debe considerar cómo se puede mejorar el uso de sus páginas web y si AJAX es una

solución que contribuye a ello. Algunos problemas comunes con AJAX se describen a

continuación.

Bajo grado de reacción

Tal vez el problema más evidente notado con el AJAX es cuando se utiliza en la teoría para

acelerar la interacción, y que en realidad retrasa la página. Si continuamente se utiliza AJAX

para enviar los datos al servidor, entonces se podría encontrar que la página se ha

ralentizado mucho. De la misma forma, si el servidor devuelve grandes conjuntos de datos

para el cliente, el navegador se puede encontrar en una lucha para manejar de manera

oportuna la información.

En teoría, un motor de búsqueda puede parecer un buen lugar para utilizar AJAX para dividir

los datos de modo que no se tenga que recargar la página, por ejemplo cuando se pasa de

las páginas 1-10 a las páginas 11-20. En realidad, aun así, sería mucho mejor, utilizar el

servidor para cortar el conjunto de datos en trozos pequeños, en lugar de hacer que el

navegador intente hacerle frente a una gran cantidad de datos. Inteligencia y buen juicio para

aplicar técnicas AJAX son la clave aquí.

19
 Ajax

Colapsar el botón Atrás del navegador

Las aplicaciones AJAX puede, si no se aplican con prudencia, colapsar el botón Atrás de su

navegador. Uno de los principales ejemplos de gran aplicación AJAX es Gmail. Gmail utiliza

los botones Atrás y Adelante de manera muy eficaz. Además, hay un montón de sitios web

por ahí que no utilizan las técnicas de AJAX que deshabilitar el botón Atrás de todos modos.

Tensión en el navegador

Si se empuja toda la carga de procesamiento de datos al navegador, entonces se vuelve más

dependiente del navegador y de la máquina del usuario para hacer el tratamiento. Delegar al

navegador para procesar una página no es a veces la mejor opción respecto a la espera de

un servidor web para obtener la respuesta.

De hecho, en algunos casos, podría ser peor si por ejemplo un navegador con Internet

Explorer decidiera apropiarse de toda la capacidad de procesamiento para hacer el

tratamiento, dejando a toda la máquina colgada.

20
 Ajax

9 AJAX en Acción

AJAX es ahora una tecnología bastante difundida, para muestra de ello se presenta un

resumen de algunos sitios y tecnologías que la implementan:

– Gmail

Gmail, llamado en otros lugares Google Mail (Alemania, Austria y Reino Unido) por

problemas legales, es un servicio de correo electrónico gratuito proporcionado por la

empresa estadounidense Google a partir del 15 de abril de 2004 y que ha captado la

atención de los medios de información por sus innovaciones tecnológicas, su

capacidad, y por algunas noticias que alertaban sobre la violación de la privacidad de

los usuarios. Tras más de 5 años, el servicio de Gmail, junto con Google Calendar,

Google Docs y Google Talk; el 7 de julio de 2009, dejaron su calidad de Beta y

pasaron a ser productos terminados.

21
 Ajax

– Google Suggest

Google Suggest fue presentada en diciembre de 2004, es una herramienta muy útil

que nos iba mostrando, según íbamos escribiendo en el recuadro de las palabras de

búsqueda, posibles términos junto al número de resultados que nos devolvería.

Se trataba de una aplicación fuera del buscador web, pero posteriormente fue

integrada dentro de 'www.google.com', la versión internacional de Google, permitiendo

así a los usuarios que realizan consultas tener una ayuda mientras teclean. Hay que

22
 Ajax

tener en cuenta que estas sugerencias son diferentes ya no solo para cada idioma,

sino también para cada versión local del buscador.

– Google Maps

Google Maps es el nombre de un servicio gratuito de Google. Es un servidor de

aplicaciones de mapas en Web. Ofrece imágenes de mapas desplazables, así como

23
 Ajax

fotos satelitales del mundo entero e incluso la ruta entre diferentes ubicaciones. Desde

el 6 de octubre del 2005, Google Maps es parte de Google Local.

Es similar a Google Earth, una aplicación Windows/Mac/Linux que ofrece vistas del

Globo terráqueo impactantes, pero que no es fácil de integrar a páginas Web.

Ofrece, asimismo, la posibilidad de que cualquier propietario de una página Web

integre muchas de sus características a su sitio Web.

24
 Ajax

– Flickr (flickr.com)

Flickr es un sitio web que permite almacenar, ordenar, buscar y compartir fotografías y

videos online. Actualmente Flickr cuenta con una importante comunidad de usuarios

que comparte las fotografías y videos creados por ellos mismos. Esta comunidad se

rige por normas de comportamiento y condiciones de uso que favorecen la buena

gestión de los contenidos.

La popularidad de Flickr se debe fundamentalmente a su capacidad para administrar

imágenes mediante herramientas que permiten al autor etiquetar sus fotografías y

explorar y comentar las imágenes de otros usuarios.

25
 Ajax

– Amazon (www.Amazon.com)

Amazon.com, Inc. es una compañía estadounidense de comercio electrónico con sede

en Seattle, Estado de Washington. Su eslogan es and you're done (Traducido al

español: «y listo»). Fue una de las primeras grandes compañías en vender bienes a

través de Internet. Amazon ha establecido sitios web separados para Canadá, el

Reino Unido, Alemania, Austria, Francia, China y Japón, para poder ofrecer los

26
 Ajax

productos de esos países.

– eBay (www.ebay.com)

eBay es un sitio destinado a la subasta de productos a través de Internet. Es uno de

los pioneros en este tipo de transacciones, habiendo sido fundado en el año 1995. En

eBay se puede comerciar una amplia variedad de productos, el único requisito es ser

un usuario registrado.

27
 Ajax

eBay es una red de subastas por Internet, la mayor que existe por el momento y líder

en este mercado. Cualquier persona puede registrarse en la página web de eBay y

comprar o vender cualquiera de los artículos disponibles, agrupados en un sistema de

categorías.

28
 Ajax

10 Tecnologías para el desarrollo de aplicaciones web con AJAX

En este sección nos enfocaremos principalmente en hacer un reseña de dos nuevas

tecnologías emergentes para el desarrollo web: ICEFaces y Project Dynamic Faces.

ICEFaces

ICEfaces es un marco integrado Ajax de aplicaciones Java que

permite a los desarrolladores de aplicaciones Ajax Java EE, crear

y desplegar aplicaciones Rich Internet Applications (RIA), en Java

puro. ICEfaces es un producto que los desarrolladores pueden

utilizar para crear nuevas aplicaciones Java EE Ajax o ampliar las

existentes sin costo alguno.

ICEfaces aprovecha los estándares Java EE para el desarrollo de aplicaciones así como las

herramientas y entornos de ejecución. Las aplicaciones Rich Enterprise son desarrolladas en

Java puro, y bajo un modelo de cliente ligero donde no es requerido utilizar Applets o plugins

de navegadores.

29
 Ajax

Las aplicaciones de ICEfaces son JavaServer Faces (JSF), eso permite aplicar directamente

las habilidades de Java EE de los desarrolladores, y estar aislados de realizar cualquier

desarrollo relacionado con JavaScript.

Sitio del proyecto: www.icefaces.org

Project Dinamic Faces

Project Dinamic Faces es uno de varios proyectos que son extensiones de la tecnología

JavaServer Faces. Es un proyecto innovador que proporciona una manera de añadir

funcionalidad AJAX a las aplicaciones web basadas en tecnologías JavaServer Faces.

Este proyecto permite habilitar AJAX en cualquiera de los componentes JavaServer Faces de

las aplicaciones web que ya están su uso. Usted no necesita modificar sus componentes

para darles el poder de AJAX, así como tampoco es necesario volver a escribir toda su

aplicación para añadir la magia de la tecnología AJAX.

Para agregar AJAX a su aplicación, primero debe identificar las partes de las páginas de la

aplicación que desea que tenga la funcionalidad de AJAX para actualizar. Como los

desarrolladores de la tecnología JavaServer Faces saben que una página JavaServer Faces

30
 Ajax

está representado por un árbol de los componentes. Con Dynamic Faces, se puede

identificar qué componentes del árbol deben beneficiarse de las actualizaciones asincrónicas.

Dynamic Faces se utiliza para actualizar una parte del árbol de componentes que representa

una página JavaServer Faces. Por lo tanto, el paradigma de Dinamic Faces es familiar para

los desarrolladores de Ajax y de JavaServer Faces.

Más importante aún, Dynamic Faces aprovecha el modelo de componentes JavaServer

Faces para que pueda utilizar las capacidades de Ajax de una manera más eficiente. Debido

a la naturaleza de colaboración del modelo de componentes, los eventos de tecnología

JavaScript en algunos componentes de la página pueden causar cambios asíncronos de

cualquier número de otros componentes en la página. Dynamic Faces permite que estos

cambios se produzcan como resultado de una sola petición Ajax al servidor más que como

resultado de una petición Ajax para cada actualización asincrónica, lo que reduce la carga en

el servidor.

Sitio del proyecto: https://jsf-extensions.dev.java.net/

31
 Ajax

11 Ejemplo de uso de AJAX

Autocomplete

Objetivo

Crear una pequeña aplicación web que permita consultar a una base de datos para crear

sugerencias de nombres de personas, al digitar una o varias letras en un campo de texto.

Requisitos

Sofware o Recurso Versión requerida

NetBeans IDE 6.7 Java version

Java Developet Kit (JDK) 6o5

JavaServer Faces Components/ Java 1.2 with Java EE 5* or 1.1

EE Platform with J2EE 1.4

GlassFish Application Server V2

Base de datos de ejemplo Requerida

32
 Ajax

Procedimiento

Descargando e instalando la librería Project Dynamic Faces Component

Antes de que pueda utilizar los componentes de la libreria Dynamic Faces en su aplicación,

debe descargar e instalar la librería. Se puede descargar e instalar desde el Plugin Manager:

1. En la barra de menú principal, seleccione Tool > Plugins

2. Seleccione la pestaña de “Available Plugins” y en la caja de texto “Search” escriba

las primeras letras del nombre del plugin, por ejemplo “Dyna…”.

3. Clic en “Install”.

4. En el instalador del IDE de NetBeans, clic en “Next”.

33
 Ajax

5. Seleccione el checkbox para aceptar los términos de la licencia y clic en “Install” otra

vez.

6. Clic en “Finish”.

7. Clic en “Close” para salir del Plugin Manager.

Creando el Proyecto

En esta sección crearemos el proyecto web usando el framework “Visual Web JSF”. La

característica de este framework es el “drag and drop” (arrastra y suelta) como medio para el

desarrollo web.

1. En la barra de menú principal, seleccione File > New Proyect.

2. Seleccione Java Web en la categoría y Web Application como tipo de proyecto. Clic en

Next.

34
 Ajax

3. En el nombre del proyecto escriba autocomplete y clic en Next.

35
 Ajax

4. Seleccione GlassFish V2 en el servidor y clic en Next.

5. Seleccione Visual Web JavaServer Faces como framework para la aplicación web.

36
 Ajax

6. Clic en Finish para crear el proyecto.

Agregando la librería de Dinamic Faces

En esta sección, usted agregará la libreria de componentes “Dynamic Faces” a su Entorno

de Desarrollo (IDE).

1. En la ventana de Projects, clic derecho sobre el nodo Component Libraries y

seleccione Add Component Library.

37
 Ajax

2. En el cuadro de diálogo Add Component Library, seleccione Dynamic Faces

Components (0.2) y haga clic en Add Component Library.

Ahora desde el proyecto podemos acceder a la categoria Dynamic Faces en la paleta de

componentes.

38
 Ajax

Diseño de la página

Agregando componentes a la página

En este apartado, usted agregará funcionalidad Ajax a los componentes del woodstock.

1. Clic en la pestaña Design para ver el diseño visual de la página.

2. Arrastre y dibuje un componente Label de la Palette que está en la parte superior

derecha del diseñador gráfico.

39
 Ajax

3. En la ventana Properties del componente label1, ingrese Nombre: para la propiedad

text.

4. Arrastre y dibuje un componente Text Field de la sección Woodstock Basic de la

Palette del diseñador gráfico. Colóquelo a la derecha del componente label.

5. Clic derecho sobre el componente Text Field y seleccione Add Binding Atrribute.

6. Arrastre y dibuje un componente Label de la Palette. Colóquelo debajo del primer

componente label.

7. En la ventana Properties del componente label2, ingrese Resultados: para la

propiedad text.

8. Arrastre y dibuje un componente Listbox de la Palette. Colóquelo a la derecha del

label2.

9. Clic derecho sobre el componente Listbox y seleccione Add Binding Atrribute.

10. En la barra de herramientas del diseñado gráfico, clic sobre Show Virtual Forms.

40
 Ajax

Configurando Transacciones Ajax

El componente “Ajax Transaction” incluido en el proyecto Dynamic Faces, le permite

configurar visualmente la funcionalidad Ajax en tiempo de diseño, mostrando los diferentes

componentes con un borde de colores en el diseñador gráfico. Como minimo, debe

especificar los componentes cuya entrada será enviada al servidor cuando se dispare el Ajax

Transaction así como los componentes que serán repintados cuando el cliente reciba la

respuesta via Ajax.

Los componentes cuya entrada son enviados al servidor, son mostrados con un borde sólido

y los componentes que serán repintados son mostrados con un borde punteado.

En esta sección, usted configurará dos “Ajax Transaction”. El primer “Ajax Transaction” se

disparará en respuesta al usuario que escribió un texto en el componente TextField. Cuando

se dispare el primer “Ajax Transaction”, el TextField enviará su entrada al servidor de

manera Asíncrona (via Ajax) y el componente ListBox será repintado cuando el cliente reciba

la respuesta Ajax del servidor.

1. Expanda la sección Dynamic Faces de la Palette, arrestre y dibuje un Ajax Transaction

dentro de la Page1.

2. En el diseñado gráfico, clic derecho sobre el componente Text Field y seleccione

41
 Ajax

Configure Ajax Transactions. El diálogo de las configuraciones de las transacciones

Ajax se abrirá.

3. Doble clic sobre el valor de Send Input y cambie el valor a Yes, haga lo mismo para el

valor de Re-Render y cambiélo a No.

4. Clic en OK.

5. En el diseñado gráfico, clic derecho sobre el componente Listbox y seleccione

Configure Ajax Transactions.

6. Doble clic sobre el valor de Re-Render y cambie el valor a Yes, haga lo mismo para el

valor de Send Input y cambiélo a No.

7. Click en OK.

42
 Ajax

Agregando una nueva transacción Ajax

En esta sección, usted creará una nueva transacción Ajax para que configure el componente

Text Field para un renderizado cuando se devuelva el valor seleccionado en el componente

Listbox.

1. En el diseñador gráfico, haga clic derecho sobre el componente Text Field y

seleccione Configure Ajax Transactions.

2. En el cuadro de diálogo de Configure Ajax Transactions, clic en New para crear una

nueva transacción Ajax.

3. Establezca el valor de Send Input para la ajaxTransaction2 a No y el valor de Re-

render a Yes. Clic en OK.

43
 Ajax

4. En el diseñador gráfico, clic derecho sobre el compenente Listbox a seleccione

Configure Ajax Transactions.

5. En el cuadro de diálogo de Configure Ajax Transactions, establezca el valor de Send

Input para la ajaxTransaccion2 a Yes y el valor de Re-Render a No.

Cuando haya finalizado, la Page1 quedará como la figura.

44
 Ajax

6. En el diseñador gráfico, seleccione el componente Text Field, y en la ventana de

Properties, agregue el siguiente parámetro a la propiedad onKeyUp.

DynaFaces.Tx.fire("ajaxTransaction1", "textField1")

7. Seleccione el componente Listbox, y en la ventana de Properties, agregue el siguiente

parámetro a la propiedad onChange.

DynaFaces.Tx.fire("ajaxTransaction2", "listbox1")

Conectándose con la base de datos

En esta sección, se hará la configuración para establecer la conexión al servidor derby y a la

base de datos de ejemplo vir que viene con el IDE.

1. En la ventana Services, clic derecho sobre la conexión jdbc:derby://localhost:1527/vir

[vir on VIR] y luego seleccione Connect.

45
 Ajax

Interactuando con la base de datos

En esta sección, usted se conectará a la base de datos vir y la enlazará con el IDE. Los

componentes JSF 1.2 pueden acceder a los datos de la base de datos y mostrarlos dentro de

tu página web.

1. Expanda la conexión a la base de datos vir, busque la base VIR, localice y arrestre la

tabla EMPLOYEE a la Page1.

2. En la ventana Navigator, expanda el nodo SessionBean1, clic derecho sobre

employeeRowSet y seleccione Edit SQL Statement. Un editor de SQL se abrirá.

3. En el panel SQL del Editor SQL, reemplace la query existente por la siguiente

sentencia.

SELECT ALL EMPLOYEE.ID, EMPLOYEE.FIRSTNAME, EMPLOYEE.LASTNAME,

EMPLOYEE.EMAIL FROM EMPLOYEE WHERE EMPLOYEE.FIRSTNAME LIKE ?

4. Cierre el Editor SQL.

46
 Ajax

5. En la ventana Services, arrestre la tabla EMPLOYEE a la Page1 de nuevo.

6. En el cuadro de diálogo que aparecerá, seleccione Create SessionBean1

employeeRowSet1 y luego haga clic en OK.

47
 Ajax

7. En la ventana Navigator, clic derecho sobre employeeRowSet1 y seleccione Edit SQL

Statement.

8. En el panel SQL del Editor SQL, reemplace la query existente por la siguiente

sentencia.

SELECT ALL EMPLOYEE.ID, EMPLOYEE.FIRSTNAME, EMPLOYEE.LASTNAME,

EMPLOYEE.EMAIL FROM EMPLOYEE WHERE EMPLOYEE.ID = ?

9. Cierre el Editor SQL.

10. En el diseñador gráfico, clic derecho sobre el componente Listbox y seleccione Bind to

Data.

11. En el cuadro de diálogo Bind to Data, clic sobre la pestaña Bind to Data Provider y

seleccione employeeDataProvider de la lista desplegable.

12. Seleccione employee.id para el Value field y employee.firstname para Display field y

luego haga click en OK.

48
 Ajax

Agregando código Java

En esta sección, usted modificará el código Java existente para que la aplicación funcione

correctamente. En el diseñador gráfico, cuando usted hace doble clic en un componente, el

editor de código fuente se abre y lo ubica en el código de los eventos del componente. Esto

hace fácil la tarea de modificar y agregar nuevo código.

1. Haga doble clic sobre el componente Text Field y reemplace el código por el siguiente.

49
 Ajax

2. Clic derecho en cualquier parte del editor de código y seleccione Fix Imports.

3. Clic en la pestaña Design para regresar al diseñador gráfico. Haga doble clic sobre el

componente Listbox y reemplace el código por el siguiente.

4. Localice el método prerender y reemplace el código por este otro.

50
 Ajax

Ejecutando la aplicación

En esta sección, usted correrá el proyecto. En NetBeans, hay varias formas de correr una

aplicación. Usted puede hacer clic en el icono de la barra de herramientas principal, o

hacer clic derecho sobre el proyecto en la ventana Projects y seleccionar la opción Run.

En el navegador ingrese las primeras letras de un nombre. Si un nombre que inicie con las

letras se encuentra en la base de datos, el nombre será desplegado en la listbox.

51
 Ajax

Conclusiones

Luego de la temática abordad en este documento, podemos concluir que:

• Los requerimientos actuales de rendimiento y funcionalidad para las aplicaciones web,

motiva la existencia de tecnologías que faciliten a los programadores el cumplimiento

de los mismos.

• Una de las herramientas que permite a los programadores un mejor desarrollo de

aplicaciones web es AJAX.

• AJAX es una filosofía o una técnica de desarrollo, no un lenguaje de programación.

Por lo tanto, se puede utilizar en conjunto con diferentes tecnologías y no requiere

plugins.

• AJAX se basa en el establecimiento de comunicación entre el cliente y el servidor de

manera transparente, en lo que pudiéramos llamar modo “backgroud”.

• ICEfaces y Dynamic Faces, son tecnologías basadas en AJAX, que permiten un

desarrollo aún más práctico y natural, permitiendo que las aplicaciones web se

asemejen más a las aplicaciones de escritorio.

52
 Ajax

Recomendaciones

A la finalización de este documento, únicamente nos resta recomendar lo siguiente:

• Profundizar en los fundamentos teóricos de AJAX. Hay muchos libros que se han

escrito para estos fines, y creemos primordial su estudio para tener un conocimiento

mucho más fundamentado.

• Dedicar tiempo para la realización del ejemplo y probar diferentes variantes a fin de

entender la funcionalidad de la tecnología.

• Buscar ejemplos adicionales que permitan un conocimiento práctico extendido de las

tecnologías aquí presentadas.

• Visitar los sitios web de ICEfaces (www.icefaces.org) y Project Dynamic Faces

(https://jsf-extensions.dev.java.net/) con la finalidad de obtener más información. En

ambos sitios se encuentra una amplia documentación y muchos ejemplos.

• Indagar sobre las buenas prácticas de desarrollo para el uso correcto de las

tecnologías aquí expuestas, evitando así, problemas de eficiencia, portabilidad o

seguridad.

• Animarse a desarrollar sus propias aplicaciones haciendo uso de las tecnologías

expuestas.

53
 Ajax

Anexos

Glosario

– Rich Internet Applications (RIA): El término se refiere a un nuevo tipo de

aplicaciones con más ventajas que las tradicionales aplicaciones Web. Estas

aplicaciones surgen como una combinación de las ventajas que ofrecen las

aplicaciones Web y las aplicaciones tradicionales.

– Applets: Componente de una aplicación que se ejecuta en el contexto de otro

programa, por ejemplo un navegador Web.

– JavaServer Faces (JSF): Tecnología y framework para aplicaciones Java basadas

en web que simplifica el desarrollo de interfaces de usuario (GUIs) en aplicaciones

Java Enterprise Edition.

– Derby: Su nombre completo es Apache Derby. El término se refiere a un sistema de

gestión de bases de datos escrito en Java que puede ser embebido en aplicaciones

Java y utilizado para procesos de transacciones online.

– IDE: Siglas en inglés de Entorno de Desarrollo Integrado. Se refiere a un programa

compuesto por un conjunto de herramientas para un desarrollador de aplicaciones.

54
 Ajax

Bibliografía

Libros:

– Ajax Patterns And Best Practices. Christian Gross - Apress. 2006

– Beginning Ajax. Chris Ullman and Lucinda Dykes - Wiley Publishing, Inc. 2007

– Foundations of Ajax. Ryan Asleson and Nathaniel T. Schutta - Apress. 2006

– AJAX, un juego de niños. John Maxwell – KnowWare E.U.R.L.

Sitios:

– http://mundobyte.wordpress.com/2008/11/22/autocompletar-texto-ajax-y-javaserver-faces/

Visitado el 10-oct-09 – 02:40 p.m.

– http://www.netbeans.org/kb/docs/web/ajax-textfield.html

Visitado el 10-oct-09 – 03:00 p.m.

– http://www.juntadeandalucia.es/xwiki/bin/view/MADEJA/ICEFaces

Visitado el 18-oct-09 11:11 am

– http://www.icefaces.org/main/resources/

Visitado el 18-oct-09 11:17 am

55
 Ajax

– http://www.icefaces.org/main/ajax-java/whyicefaces.iface

Visitado el 18-oct-09 11:20 am

– http://www.icefaces.org/main/ajax-java/jsf-ajax.iface

Visitado el 18-oct-09 11:21 am

– https://jsf-extensions.dev.java.net/servlets/ProjectDocumentList?

folderID=5580&expandFolder=5580&folderID=0

Visitado el 18-oct-09 – 11:50 a.m.

– http://blogs.sun.com/branajam/entry/project_dynamic_faces_component_library

Visitado el 18-oct-09 – 12:10 p.m.

– http://java.sun.com/developer/technicalArticles/J2EE/webapp_3/

Visitado el 18-oct-09 – 12:40 p.m.

– http://weblogs.java.net/blog/2006/08/30/introducing-project-dynamic-faces

Visitado el 27-oct-09 – 11:00 a.m.

– https://jsf-extensions.dev.java.net/

Visitado el 27-oct-09 – 11:20 a.m.

56