Ajax Christian Busquiel Sanz Diego Morillo Arroyo Alicia Rodríguez Carrión José Romero Huertas Departamento de Ingeniería Telemática Universidad Carlos III de Madrid Contenido Introducción Descripción Desarrollo Uso Conclusiones Referencias 2
Introducción Asynchronous Javascript And XML No es un lenguaje de programación Unión de varias tecnologías 3 Introducción XHTML (o HTML) y CSS: Fijan el diseño que acompaña a la información DOM [Document Object Model]: Mostrar e interactuar dinámicamente con la información presentada. Se accede con un lenguaje de scripting (como JavaScript o JScript) por parte del usuario. XMLHttpRequest : Intercambio asíncrono de datos con el servidor. En algunos frameworks sustituido por un objeto iframe. XML : Formato usado para la transferencia de vuelta al servidor. Otros formatos también posibles son: HTML preformateado, texto plano, JSON o EBML. 4
Introducción: 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 Outlook Web Access Definición del término AJAX (Febrero 2005) Jesse James Garrett: A New Approach to Web Applications 5 Descripción Explicación de las principales características Ventajas y puntos fuertes Desventajas y limitaciones Casos de uso 6
Modelo WEB Clásico 7 Modelo WEB con AJAX 8
Características Ajax Aumenta la interactividad de las páginas WEB Intercambio de información en background Las páginas no se recargan cuando el usuario realiza alguna acción en ellas Desconecta las acciones del usuario de los envíos de los datos entre el servidor y el navegador Objeto XMLHttpRequest: hilo que se encarga de esto Mayor velocidad de navegación por las páginas 9 Ventajas (I) Genera código HTML en el navegador utilizando la información que pide al servidor en background Solicita información al servidor mientras el usuario está en la Web para adelantarse a las peticiones que realice Los datos ya están en el navegador cuando el usuario los solicita, de manera que reduce peticiones innecesarias al servidor (Recuperación asíncrona de datos) Mayor velocidad de carga de las páginas Web: Se piden los datos al servidor antes de que los solicite el cliente al navegador Realiza acciones en el navegador del cliente reduciendo la carga de la CPU del servidor 10
Ventajas (II) Separa la transmisión de información cliente-servidor del funcionamiento interno de la aplicación Menor consumo de ancho de banda (Menor carga) No requiere plugins Partes de la aplicación (modularidad): Datos puros Formato o estructura de la página Estilo de la página Funcionalidad de la página División del código entre aplicación y cliente-servidor 11 Desventajas (I) El mayor problema es la interacción con el usuario El usuario puede no saber que se está llevando a cabo una operación solicitada (Solución Notificación visual) El botón Retroceder del navegador no tiene función, pues no se cambia de página (Solución Uso de iframes ocultos para mantener el historial, o identificador de URLs mediante # ) No se puede agregar la página en el estado actual a los marcadores del navegador (Solución Utilizar # ) Problemas al imprimir las páginas generadas mediante Ajax dinámicamente 12
Desventajas (II) Exceso de llamadas al servidor Incompatibilidad con algunos navegadores (JavaScript no soportado) Excesivo uso de JavaScript (Seguridad, compatibilidad, acceso, complejidad) hace lento al navegador Mantener el servicio típico de los formularios: Enviar los datos al servidor sólo cuando el usuario lo solicite Usuario tiene deshabilitado JavaScript en el Navegador Se debe tener en cuenta en el diseño de la página que hay usuarios que no tienen AJAX (Solución Dar alternativa a AJAX en la página) 13 Casos de Uso (I) Autocompletado (Direcciones de correo, nombres, ciudades, login) Interfaces de usuario avanzadas (Controles de árbol de directorios, menús, barras de progreso) Notificaciones del servidor Refresco de datos Validación de datos de formulario en Tiempo Real Id. de usuario, Nº de serie, códigos postales o cualquier otro código que necesite ser validado 14
Casos de Uso (II) Actualizar o eliminar registros Devolver peticiones simples de búsqueda Editar árboles de categorías Expandir formularios WEB a medida que el usuario los va rellenando, según los datos introducidos por el usuario 15 Desarrollo Cómo desarrollar? Herramientas de desarrollo Ejemplos 16
Desarrollo Cómo desarrollar? Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una de las tecnologías anteriores. AJAX ha sido diseñado para desarrollar estructuras cliente servidor avanzadas. De acuerdo a la forma de programar aplicaciones AJAX, tenemos: Clientes livianos: Se dispone de poco código en el lado del cliente. Clientes pesados: Aquellos en los que se dispone de gran cantidad de código para ejecutar. 17 Desarrollo (II) Es habitual obtener el contenido de un archivo o recurso del servidor. Construcción de un objeto para cargar datos del servidor. Encapsular AJAX en objetos reutilizables (P.e. aplicar objetos de JavaScript) Desarrollar aplicaciones AJAX implica nuevos errores y excepciones. Sin respuesta del servidor. Respuesta inesperada del servidor. Aplicaciones complejas, producen demasiado código. Estructurar el código es correcto. Pero penaliza en rendimiento 18
Desarrollo (III) Se recomienda un solo archivo JavaScript para mejorar el rendimiento de la aplicación. También comprimir el código JavaScript. No modifican comportamiento del programa. Reducen mucho su tamaño. Código JavaScript accesible por cualquier usuario. Empresas desarrollan aplicaciones con código abierto. Problema de seguridad. Necesidad de un sistema que aporte seguridad. Problema difícil de solucionar. Se trata, por tanto, de minimizar. Técnica: Ofuscar el código de la aplicación. 19 Desarrollo (IV) Se trata de hacer el código ininteligible. Sustituir nombres de variables. Restar estructura. No resulta problemático que un usuario acceda a este código. Ejemplo: function CalculateSalary(aEmployees) { var nempindex = 0; while (nempindex < aemployees.length) { var oemployee = aemployees[nempindex]; Employee.fSalary=CalculateBaseSalary(oEmployee.nType, ployee.hours); El resultado tras ofuscar el código es algo como: function c(g){var m=0;while(m<g.length){var r=g[m];r.l=d(r.n,r.o);if(r.j==true){ r.k=e(r.n,r.o,r.l);}else{r.k=0;}r.t=f(r.l+r.k);m++;}} 20
Desarrollo (V) En ocasiones se usan ofuscadores para reducir el tamaño del código fuente. Programas reductores de tamaño ofuscan código. Compresores: Packer: Gratuito. Muy buen compresor. Jsjuicer: Gratuito. Se puede usar vía WEB. 21 Desarrollo (VI) Herramientas de desarrollo ShrinkSafe: Proporcionada por el framework Dojo. Buen código reductor de código. Google Web Toolkit: framework lanzado por google para aplicaciones Ajax. 22
Desarrollo (VII) Ejemplos Multitud de aplicaciones en la WEB creadas con AJAX. Ventanas emergentes en la WEB. Información, petición de login, de confirmación Barras de puntuación. Comunes en música, videos 23 Uso Muchas aplicaciones actualmente en auge usan Ajax: GMail, Windows Live Mail, Yahoo! Mail (función de autocompletar direcciones) Google Maps, Amazon Maps, Housing Maps (almacena las zonas alrededor de la que se está viendo en determinado momento para tenerlas disponibles de forma inmediata cuando el usuario mueva el mapa) Google Calendar, Zimbra: aplicaciones de agenda Google Docs, ThinkFree: alternativas online al paquete Microsoft Office 24
Uso (II) También otras muchas aplicaciones menos conocidas: mensajería instantánea (Meebo, IM), lectores de RSS (Backbase, Netvibes), gestores de bases de datos MySQL WEBs de compra online: Gucci, Apple Dispositivos móviles: Navegadores Opera y Safari para móviles soportan AJAX goffice, suite de oficina para iphone, usa esta tecnología 25 Conclusiones Ajax permite una mayor interactividad del usuario con las aplicaciones WEB, siempre y cuando no se sobrecargue ni el ancho de banda ni el código. Permite dividir la aplicación en módulos facilitando su implementación por un equipo de trabajo Si no se usa excesivo código y tomando las medidas necesarias frente a los problemas comentados, se pueden realizar WEBs seguras con mayor funcionalidad y más rápidas que las WEBs sin esta tecnología Permite gestionar la seguridad de una forma sencilla a la vez que mantiene la comunicación con el servidor gracias al objeto XMLHttpRequest Sus grandes ventajas se ven reflejadas en la gran cantidad de aplicaciones WEB que usan actualmente esta tecnología 26
Referencias Contenido Sánchez-Mariscal, Álvaro. Ajax en Java EE http://www.wikipedia.com http://www.ajaxya.com.ar/ http://www.ajaxhispano.com/ Imágenes: http://www.sdtimes.com/images/20060901/images/2006090 1/pic_story_12.jpg http://oscarantolinez.com/ajaxslides/ajaxc.png http://www.wut.de/kpics/e-5763w-39-pies-000.gif http://www.infovis.net/imagenes/t1_n177_a1037_ajax_es. gif 27