Академический Документы
Профессиональный Документы
Культура Документы
MATERIA:
TEMÁTICA AB ORDADA:
AJAX
DOCENTE:
PRESENTAN:
LUGAR Y FECHA:
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
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
Basados en esto, podemos decir que como personas dedicadas al desarrollo de aplicaciones
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
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:
web enriquecidas.
Específicos:
• Conocer los indicios de tecnologías anteriores a AJAX, que dieron la pauta para su
desarrollo.
web tradicionales.
• Conocer los elementos de AJAX y la función que cada uno de ellos desempeña a la
• Aprender sobre las implementaciones de AJAX a partir del conocimiento de sitios que
• Ayudar el uso de la tecnología por medio de un ejemplo didáctico, diseñado para ser
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
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.
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
Microsoft Remote Scripting para reemplazar el applet Java por XMLHttpRequest. A partir de
5
Ajax
ha permitido que se vuelva casi un “estándar”. Por esta razón, raras veces se utilizan
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
comunicación sincrónica hace que el usuario solicite una página HTML y el navegador envía
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
6
Ajax
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
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
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?
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
AJAX son las siglas de Asynchronous JavaScript And XML, es decir, XML y JavaScript
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
8
Ajax
mucho mayor, especialmente en el caso de aquellos sitios que tienen muchos gráficos o
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
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.
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.
aplicación web. En una aplicación AJAX, sólo los elementos de interfaz de usuario que
permanecer sin cambios. Esto significa que usted no tiene que enviar toda la información y
9
Ajax
Este modelo permite la operación continua de una página web, y también significa que el
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
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
a) JavaScript
JavaScript es una tecnología que permite a los programadores escribir funciones como
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.
información resultante.
estos dos lenguajes no están relacionados. Sin embargo, al igual que Java, JavaScript
b) XMLHttpRequest
11
Ajax
lugar de utilizar variables simples, los programas utilizan bloques de información que
El objeto XHR tiene un conjunto de métodos muy útiles, de los cuales los más
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
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
del servidor, por ejemplo para mostrar al lector un mensaje “Su petición está siendo
12
Ajax
Este método permite indicar al objeto qué tipo de texto le enviaremos, especificándolo
elegir una serie de tipos, incluidos los formatos XML y HTML, o un conjunto de
resultados de un formulario.
send (content)
readyState
El valor de esta propiedad se modifica en función del estado del objeto XHR: será 0 si
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
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
puede hacer cualquier cosa para el usuario que le permitan hacer sus aplicaciones
servidor sea capaz de hacer. También puede exponer el servidor a ataques maliciosos,
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
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
6 ¿Cómo funciona?
concreto. El sistema AJAX está compuesto por cuatro elementos: JavaScript, el objeto
En pocas palabras, el equipo del cliente ejecuta una serie de comandos JavaScript, incluida
15
Ajax
Una vez se ha entendido como funciona AJAX, ahora vamos a explicar en términos reales,
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.
Con una aplicación AJAX, aunque en la superficie de la página web parece que no suceda
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
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
Arrastrar y soltar
una funcionalidad de AJAX. Es algo que ha sido posible desde hace muchos años en
La mayoría de los desarrolladores optan por el Flash o alguna solución similar de peso
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
posiciones, y luego cerrar la sesión. Más tarde, cuando vuelva, esos elementos se
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.
Tal vez el problema más evidente notado con el AJAX es cuando se utiliza en la teoría para
para enviar los datos al servidor, entonces se podría encontrar que la página se ha
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
19
Ajax
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
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
De hecho, en algunos casos, podría ser peor si por ejemplo un navegador con Internet
20
Ajax
9 AJAX en Acción
AJAX es ahora una tecnología bastante difundida, para muestra de ello se presenta un
– Gmail
Gmail, llamado en otros lugares Google Mail (Alemania, Austria y Reino Unido) por
los usuarios. Tras más de 5 años, el servicio de Gmail, junto con Google Calendar,
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
Se trataba de una aplicación fuera del buscador web, pero posteriormente fue
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,
– Google Maps
23
Ajax
fotos satelitales del mundo entero e incluso la ruta entre diferentes ubicaciones. Desde
Es similar a Google Earth, una aplicación Windows/Mac/Linux que ofrece vistas del
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
25
Ajax
– Amazon (www.Amazon.com)
español: «y listo»). Fue una de las primeras grandes compañías en vender bienes a
Reino Unido, Alemania, Austria, Francia, China y Japón, para poder ofrecer los
26
Ajax
– eBay (www.ebay.com)
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
categorías.
28
Ajax
ICEFaces
ICEfaces aprovecha los estándares Java EE para el desarrollo de aplicaciones así como las
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
Project Dinamic Faces es uno de varios proyectos que son extensiones de la tecnología
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
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
Faces para que pueda utilizar las capacidades de Ajax de una manera más eficiente. Debido
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.
31
Ajax
Autocomplete
Objetivo
Crear una pequeña aplicación web que permita consultar a una base de datos para crear
Requisitos
32
Ajax
Procedimiento
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:
las primeras letras del nombre del plugin, por ejemplo “Dyna…”.
3. Clic en “Install”.
33
Ajax
5. Seleccione el checkbox para aceptar los términos de la licencia y clic en “Install” otra
vez.
6. Clic en “Finish”.
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.
2. Seleccione Java Web en la categoría y Web Application como tipo de proyecto. Clic en
Next.
34
Ajax
35
Ajax
5. Seleccione Visual Web JavaServer Faces como framework para la aplicación web.
36
Ajax
de Desarrollo (IDE).
37
Ajax
componentes.
38
Ajax
Diseño de la página
En este apartado, usted agregará funcionalidad Ajax a los componentes del woodstock.
39
Ajax
text.
5. Clic derecho sobre el componente Text Field y seleccione Add Binding Atrribute.
componente label.
propiedad text.
label2.
10. En la barra de herramientas del diseñado gráfico, clic sobre Show Virtual Forms.
40
Ajax
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
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
manera Asíncrona (via Ajax) y el componente ListBox será repintado cuando el cliente reciba
dentro de la Page1.
41
Ajax
Ajax se abrirá.
3. Doble clic sobre el valor de Send Input y cambie el valor a Yes, haga lo mismo para el
4. Clic en OK.
6. Doble clic sobre el valor de Re-Render y cambie el valor a Yes, haga lo mismo para el
7. Click en OK.
42
Ajax
En esta sección, usted creará una nueva transacción Ajax para que configure el componente
Listbox.
2. En el cuadro de diálogo de Configure Ajax Transactions, clic en New para crear una
43
Ajax
44
Ajax
DynaFaces.Tx.fire("ajaxTransaction1", "textField1")
DynaFaces.Tx.fire("ajaxTransaction2", "listbox1")
45
Ajax
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
3. En el panel SQL del Editor SQL, reemplace la query existente por la siguiente
sentencia.
46
Ajax
47
Ajax
Statement.
8. En el panel SQL del Editor SQL, reemplace la query existente por la siguiente
sentencia.
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
12. Seleccione employee.id para el Value field y employee.firstname para Display field y
48
Ajax
En esta sección, usted modificará el código Java existente para que la aplicación funcione
editor de código fuente se abre y lo ubica en el código de los eventos del componente. Esto
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
50
Ajax
Ejecutando la aplicación
En esta sección, usted correrá el proyecto. En NetBeans, hay varias formas de correr una
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
51
Ajax
Conclusiones
de los mismos.
plugins.
desarrollo aún más práctico y natural, permitiendo que las aplicaciones web se
52
Ajax
Recomendaciones
• 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
• Dedicar tiempo para la realización del ejemplo y probar diferentes variantes a fin de
• Indagar sobre las buenas prácticas de desarrollo para el uso correcto de las
seguridad.
expuestas.
53
Ajax
Anexos
Glosario
aplicaciones con más ventajas que las tradicionales aplicaciones Web. Estas
aplicaciones surgen como una combinación de las ventajas que ofrecen las
gestión de bases de datos escrito en Java que puede ser embebido en aplicaciones
54
Ajax
Bibliografía
Libros:
– Beginning Ajax. Chris Ullman and Lucinda Dykes - Wiley Publishing, Inc. 2007
Sitios:
– http://mundobyte.wordpress.com/2008/11/22/autocompletar-texto-ajax-y-javaserver-faces/
– http://www.netbeans.org/kb/docs/web/ajax-textfield.html
– http://www.juntadeandalucia.es/xwiki/bin/view/MADEJA/ICEFaces
– http://www.icefaces.org/main/resources/
55
Ajax
– http://www.icefaces.org/main/ajax-java/whyicefaces.iface
– http://www.icefaces.org/main/ajax-java/jsf-ajax.iface
– https://jsf-extensions.dev.java.net/servlets/ProjectDocumentList?
folderID=5580&expandFolder=5580&folderID=0
– http://blogs.sun.com/branajam/entry/project_dynamic_faces_component_library
– http://java.sun.com/developer/technicalArticles/J2EE/webapp_3/
– http://weblogs.java.net/blog/2006/08/30/introducing-project-dynamic-faces
– https://jsf-extensions.dev.java.net/
56