Este documento presenta una introducción a AJAX, comparando las arquitecturas tradicionales vs AJAX. Explica cómo funciona AJAX, sus ventajas y desventajas, y propone el desarrollo de una aplicación web basada en AJAX. También discute frameworks e IDEs para facilitar el desarrollo AJAX y concluye resaltando las ventajas de incluir técnicas AJAX en aplicaciones web.

2. Contenido Objetivos Propuestos Entendiendo AJAX Comparación Arq.Trad v/s Arq.Ajax Problemas, Ventajas y Desventajas Conclusiones Alternativas a AJAX Aplicación Web basada en AJAX Frameworks e IDE’s desarrollo AJAX

3. OBJETIVOS V/S METAS

4. 1 Realizar un análisis comparativo de una aplicación Web utilizando el Modelo clásico v/s el Modelo AJAX. 2 Desarrollar una aplicación Web, basada en la técnica AJAX. 3 Comprender las ventajas y desventajas del uso de la comunicación Web asincrónica utilizando la técnica AJAX.

5. ENTENDIENDO AJAX

6. No es ni un equipo holandés, ni un detergente, ni una tecnología. CSS javaSript DOM XML XHTML XMLhttpRequest AJAX

9. ¿Cómo funciona?

10. Un ejemplo básico Código y explicación: inSitu

11. Algo más sobre responseXML La transferencia de un XML involucra mucho “código muerto” Acceder a un dato del XML utilizando los métodos del DOM puede ser costoso.

12. Alternativa a XML: JSON

13. var sJSON = ajax.responseText; var aInfoclase = eval(sJASON); var dato = aInfoclase[2].edad; var xml = ajax.responseXML; var infoclase = xml.getElementsByTagName('infoclase')[0]; var estudiantes = infoclase.getElementsByTagName('estudiantes')[0]; var estudiante = estudiantes.getElementsByTagName('estudiante')[2]; var edad = estudiante.getElementsByTagName('edad')[0]; var dato = edad.firstChild.data;

14. ¿Eso es todo? Respecto de establecer la comunicación asincrónica con el servidor, si. Pero la complejidad aumenta polinomialmente si se quiere manipular la página del cliente.

15. … por ejemplo: Funcionalidades para caja de texto con Autosugerencia

16. Se requiere aproximadamente: .JS .CSS .PHP 500 líneas de código para los eventos antes descritos y funciones AJAX para mantener comunicación asincrónica con el servidor 80 líneas de código para manejar entre otros, los cambios de estilos al moverse por el despliegue de sugerencias 100 líneas de código para manejar la configuración de la BD, las respectivas consultas y el retorno de estas mediante notación XML

17. ¿Hay alguna otra alternativa? Afortunadamente si: el uso de librerías, frameworks y/o herramientas IDE.

18. FRAMEWORKS IDE’S

19. FRAMEWORKS http:// www.infoq.com / news / ajaxian - survey

20. PROTOTYPE

21. Métodos para javaSript, por ejemplo:

22. Métodos para AJAX, por ejemplo:

26. RICO

31. IDE’S Fuente: http:// www.anieto2k . com

32. MX AJAX Toolbox

33. ARQUITECTURA TRADICIONAL V/S ARQUITECTURA AJAX

34. Metodología Métricas Total Bytes Transferidos Total Tiempo Espera Procedimiento: Actualización de Datos Según método provisto, realizar búsqueda y selección de una persona por la inicial de su apellido. Ejemplo para: “Maria Burgos”  ”B” Editar campo de Teléfono 123 Arquitectura 1 456 Arquitectura 2 Volver a ventana de inicio

35. Arquitectura Tradicional

40. Arquitectura AJAX

46. Resultados Obtenidos Páginas desplegadas: AJAX: 1 Tradicional: 6 Llamadas a BD: AJAX: 3 Tradicional: 3 Costo desarrollo (hr.) AJAX: 9 Tradicional: 2

47. APLICACIÓN WEB BASADA EN AJAX

48. Aplicación orientada a las tiendas de ventas por departamento. Se genero un componente tipo Accordeon Contiene información referente a ítems comerciales (Computación, Electro hogar, Deportes, Muebles) Despliegue de un conjunto de productos referente al ítem solicitado Un segundo nivel de detalle más especifico puede ser obtenido por un popUp AJAX o un Tooltip AJAX Toda la información es extraída desde una base de datos y presentada a través de técnicas AJAX.

49. Widgets Ajax Accordion para el despliegue de las 4 secciones seleccionadas.

50. Widgets Ajax Dinamic Table para el despliegue del detalle de productos.

51. Widgets Ajax tooltip como alternativa 1 para previsualizar la descripción de un producto en particular.

52. Widgets Ajax Dialog Box como alternativa 2 para previsualizar la descripción de un producto en particular.

53. PROBLEMAS Y DIFICULTADES VENTAJAS DESVENTAJAS

54. Problemas y Dificultades En la Web sobran ejemplos de pequeños script AJAX. Dificultades para encontrar algo o alguien que diera pautas de cómo construir una aplicación realmente práctica y provechosa. Se invirtió mucho tiempo en la medición de la métrica de “Bytes transferidos”. Por hoy, ya se sabe que lo más idóneo habría sido el utilizar algún programa Sniffer para medir el tráfico existente entre el cliente y servidor. Falta de estandarización por parte de los navegadores Web. Problemática de introducir en el desarrollo una suerte de “Programación Orientada al Navegador”.

55. … por ejemplo:

56. Ventajas de AJAX AJAX no requiere instalación de plugins, applets de Java, ni ningún otro elemento adicional a instalarse en el cliente. Reducción de Tráfico entre el cliente y el servidor. El servidor tiene una mejor carga de trabajo. Muchos sitios que ofrecen Hosting establecen límites y tarifas según el ancho de banda a consumir. Reducción en tiempo de espera Transacciones se resuelven más rápido. Aplicaciones Web simulan Aplicaciones de Escritorio.

57. Enriquecer la interfaz usuario Recursos multimedia streaming. La interactividad lograda dio paso a una nueva forma web: Personalización del Contenido Páginas de Inicio Google Calendar Código público. Basado en un conjunto de lenguajes de programación de uso libre.

58. Desventajas de AJAX En algunos casos es necesario incluir señales para que el usuario se percate que el servidor ha respondido. AJAX depende de javaScript El cliente puede tener desactivada la opción de ejecutar código javaScript. Falta de estandarización para la ejecución de algunas funciones de javaScript. Ej. el mismo núcleo de AJAX. Por 1 y 2, incremento de testing.

59. Links pierden identidad: Un sitio Web común: {links} No se pueden pasar url específicas de la Web. No se pueden añadir a los marcadores o favoritos una parte concreta de la Web. Problema con los buscadores. Solo indexan la raíz. Enlace Usual: <a href=“dimeHora.php&quot;>Ver Hora</a> Enlace AJAX: <a href=&quot;javascript:&quot;onclick=“funAjax(parametros)&quot;>Ver Hora</a> En algunos casos deja de existir el botón Atrás del navegador. Solución simple: usuario debe cambiar su manera en que entiende los sitios Web. Solución necesaria: Necesidad de proveer panel navegación.

60. Sobre explotar una aplicación con excesivos recursos AJAX puede degradar el rendimiento del sistema. Una mala elección de tratar múltiples conexiones asincrónicas puede ocasionar problemas. Grabar el mensaje en una cola y enviarlo cuando el objeto XMLhttpRequest pueda hacer nuevas peticiones (Ej. validación de formularios). Planificar para reintentar automáticamente la petición después de un tiempo especificado y/o eliminar la petición (Ej. Auto sugerencia). Para cada petición, crear una nueva instancia del objeto XMLhttpRequest (Caso a evitar).

61. ALTERNATIVAS A AJAX

62. Adobe Flex Películas vectoriales logran una alta afinidad en RIA. Producto comercial. Alto costo han hecho que AJAX sea una de las elecciones preferidas en aplicaciones interactivas. Sin embargo, la capacidad de impacto multimedia que ofrece está muy lejos de conseguirse con AJAX. Laszlo “ the premier open-source platform for rich internet applications” Desarrollo de Interfaz (UI) dinamicas, bajo el plugin FLASH Ambas utilizan el framework J2EE

63. ¿AJAX V/S FLEX? Reemplaza el xhtml por interfase flash Basado en manipulación de animación. Opera sobre sitios Web xhtml. Basado en manipulación de contenido. Cada cual podría hacer, con más o menos costo, lo que el otro hace Ambos pueden existir sin aniquilarse

64. CONCLUSIONES

65. “ Arquitectura Tradicional v/s Arquitectura AJAX ” Los resultados obtenidos muestran que AJAX produjo una considerable optimización de optimización de recursos. La Metodología usada fue suficiente y necesaria para el ejemplo presentado. Pero para estudios sobre comparaciones de aplicaciones Web reales, complejas y de alta demanda es necesario incluir otras métricas. Según los resultados obtenidos es altamente aconsejable estudiar la posibilidad de incluir en los desarrollos de aplicaciones Web, técnicas provistas con el enfoque AJAX.

66. “ Aplicación Web basada en AJAX” Ajax puede ser una técnica muy útil si se usa bien Mala utilización: foro basado completamente en Ajax, pues lo que se desea es que los temas de discusión se indexen y sirvan de ayuda a personas que tengan problemas Buena utilización: formularios de registro, sugerencia en la entrada de datos, monitorización en tiempo real despliegue de catalogo de productos, aplicaciones en intranets, etc. En general, donde hay acceso restringido y/o no interesa que un robot de búsqueda registre una página en particular.

67. Referencias Ajax v/s Flex http ://www.numtopia.com/terry/blog/archives/2006/09/flex_versus_ajax_fight_doesnt_exist.cfm MX AJAX Toolbox http ://www.interaktonline.com/Products/Dreamweaver-Extensions/MXAJAXToolbox/Documentation/Articles/Sneak+preview+of+MX+AJAX+Toolbox.html?id_art=42 Frameworks más populares http :// www.infoq.com / news / ajaxian - survey Curso completo de AJAX http://www.programacionweb.net/cursos/curso.php?num=2 MiniTutorial AJAX http://fisica.ciens.ucv.ve/felix/ajax/#setRH Laszlo http:// www.openlaszlo.org /

68. ¿Algún buen ejemplo de AJAX en la Web? http:// www.netvibes.com /