AJAX: otra forma de ver las aplicaciones Web

Transcripción

1 AJAX: otra forma de ver las aplicaciones Web AJAX: another way to look at Web applications Alejandro León Mora Ángela Paola Cubillos Martín Resumen Diariamente en Internet se encuentra gran variedad de páginas desarrolladas con herramientas que, aunque no son conocidas, si funcionan de una manera similar: Cada vez que el usuario selecciona una opción dentro de una página, debe esperar a que esta vuelva y cargue. El proceso ocurrido en este tiempo de espera se debe a que la acción del usuario en la página envía un requerimiento HTTP al servidor Web. El servidor efectúa un proceso en el cual recopila información, procesa datos y devuelve una página HTML al cliente con la información solicitada. Este modelo no es eficiente en cuanto a la experiencia de usuario se refiere, ya que en cada acción que vuelva a realizar sobre la página debe esperar nuevamente este proceso. AJAX es un conjunto de tecnologías que permiten que la interacción del usuario con la aplicación sea independiente de la comunicación con el servidor, lo que evitará que el usuario deba esperar a que la página cargue. Este documento permite conocer la evolución de Ajax, su funcionamiento e implementaciones realizadas con AJAX. Abstract On a daily basis in Internet, a variety of pages developed with different unknown tools appear. In spite of that fact, they operate alike: Each time the user selects an option within a page, he must wait for the page download. Meanwhile, a process is being executed: the user action on the web page generates an HTTP request message to the Web server. The server performs a process in which collects information, processes data and returns an HTML page to the client with the information requested. This model is not efficient as long as it concerns to the final user, since in every action a re-run process on the page must wait this process. AJAX is a set of technologies that allow user interaction with the application to be independent of communication with the server, which prevents the user keeping in long waits while the page loads. This document enhances knowledge on Ajax technology, its evolution, development, operation and implementations. Key words: AJAX, application, lifecycle, Web Technology. Palabras claves: AJAX, aplicación, ciclo de vida, Tecnología Web. Recibido: 27/06/2008. Aceptado: 10/10/08. 69

2 I. INTRODUCCIÓN El desarrollo que han tenido las tecnologías de la información, ha generado diversas formas de comunicación y transmisión de datos. Esta facilidad al acceso de información e interacción con personas de distintas partes del mundo se dio gracias al desarrollo y acogida que ha tenido Internet. Es así como inicialmente en la Web, la información se entregaba de manera estática al usuario para que éste la visualizara a través del navegador haciendo uso del lenguaje de marcado HTML, por lo cual este tipo de páginas no permitían ninguna interacción con el usuario. Posteriormente, en los años 1995 aparecieron las primeras interacciones usando Javascript, que es un lenguaje que se ejecuta del lado del usuario y que fue desarrollado por Netscape en compañía de Sun. Más o menos hacia este mismo año apareció el lenguaje JAVA, el cual haciendo uso de los APPLETS (aplicaciones que corren embebidas dentro del navegador), pudo colocar animaciones y lograr una mayor interacción con el usuario. Para la época de 1996 apareció FLASH que es un programa para animaciones orientadas a la Web el cual permite manejo de eventos a través del lenguaje Actionscript. Hasta hace poco todas estas tecnologías funcionaban sin tener en cuenta los costos de tiempo y recarga que tiene para el usuario las comunicaciones con el servidor y sin manejar la saturación que los servidores tendrían con el trabajo de refrescar la página del usuario cada vez que este hacia una solicitud. Por su parte, en el año 2001, la W3C entrega la primera especificación de XML que es un lenguaje de marcado para definir tipos de datos en documentos y que permite una mayor flexibilidad y organización que la que puede dar HTML. En el año 2005 se empieza hablar de AJAX, tecnología que involucra una versión estándar de Javascript más XML lo que permite añadir mayor funcionalidad a la Web aprovechado el protocolo HTTP, empleado para comunicar las solicitudes y respuesta que los usuarios hacen a través de Internet. A continuación se mostrará la forma como AJAX aprovecha los tiempos de procesador del cliente y trabaja, de manera proactiva para enriquecer la experiencia del usuario en la Web. II. EVOLUCIÓN DE AJAX Ajax ha estado desde 1998 y varias aplicaciones como Microsoft s Outlook Web Access lo han utilizado. Pero no fue sino hasta el año 2005, con aplicaciones como Google Suggest y Google Maps, entre otras, junto con el artículo de Jesse James Garret titulado AJAX: A New Approach to Web Applications, quien se refirió por primera vez al término AJAX, que empezó a tomar fuerza. Desde ese entonces, las personas han visto como con AJAX se puede realizar software que finalmente actúa como software de escritorio. Jesse James Garret se refirió por primera vez al término AJAX, definiéndolo como: una forma de desarrollo del uso de herramientas Web que proporciona una experiencia mucho más dinámica al usuario, de una manera que nunca antes se había visto en Internet [6]. La forma de lograrlo, explica Garret, es utilizando tecnologías existentes, que permitan crear aplicaciones que eviten al usuario tener que esperar a que las páginas deban recargarse continuamente luego de realizar cualquier solicitud. Además aclara en una entrevista realizada en el Internet Global Congress 2006 celebrado en Barcelona, que lo realmente novedoso de AJAX no son las tecnologías que usa, ya que estas existen hace muchos años, sino el uso que se da a estas tecnologías, para lograr aplicaciones dinámicas y donde el tiempo que el usuario invierte en consultar cualquier aplicación se reduzca al mínimo. En la II Conferencia Internacional de Software Libre, Garret anuncia que esta tecnología se basa en la filosofía de Software Libre y que por lo tanto AJAX no depende de una sola empresa, siendo de gran beneficio para todos. La gran ventaja de AJAX, es que las nuevas aplicaciones funcionan casi igual de rápido a como si estuvieran instaladas en el computador. Lo importante es lograr aplicaciones muy dinámicas a través de la Web. Otra de las grandes características de AJAX que no se nombra muy a menudo, fue nombrada por James Garret en una entrevista a El País, donde informa: Una de las posibilidades más excitantes de AJA X se encuentra en su aplicación en las redes internas de las empresas, porque puedes explotar más aún sus capacidades, al conocer el tipo de red al que te enfrentas, el navegador que utilizan todos los clientes de esa aplicación y otros factores que al ser desconocidos en otras circunstancias dificultan en trabajo de desarrollo [5]. Además sobre el futuro de las tecnologías agrega: Lo que nos enseña la experiencia de AJA X es que nuestra capacidad para crear nuevas tecnologías es 70

3 mucho mayor que nuestra capacidad para aprender a usarlas de manera efectiva. Las tecnologías que permiten la interacción enriquecida que supone el uso de AJA X han existido durante muchos años, pero sólo ahora las conocemos lo suficiente como para sacarles el máximo partido. Esto es algo que va a seguir pasando según la tecnología siga evolucionando [5]. III. FUNCIONAMIENTO MODELO TRADICIONAL Y AJAX Es necesario ver la diferencia entre el modelo tradicional de funcionamiento de aplicaciones Web y AJAX para ver los beneficios que ofrece. El mayor beneficio de AJAX se encuentra en el trabajo asíncrono de peticiones al servidor y las utilidades que se pueden obtener de esto, teniendo presente que el modelo tradicional de funcionamiento de aplicaciones Web se basa en un modelo de petición respuesta. Para comprender mejor esta diferencia, se realizará una comparación entre los dos modelos presentados en la Figura 1. encuentra esperando, lo que no le genera una buena experiencia, ya que para cada petición siempre debe estar esperando la respuesta del servidor. El modelo ideal no debería hacer que el usuario viera el proceso que realiza la aplicación con el servidor, teniendo en cuenta que si la interfaz ya está cargada, no debe detenerse cada vez que se requiera algo del servidor. El modelo de AJAX plantea una solución a este problema del modelo tradicional, ya que introduce un motor AJAX entre el usuario y el servidor. Y aunque se puede llegar a pensar que este motor puede hace más lentas las aplicaciones, es todo lo contrario. Al ingresar al usuario a una aplicación Web, el navegador carga el motor AJAX, el cual se encarga de comunicarse con el servidor en nombre del usuario, de modo que la interacción del usuario y la aplicación sucede asincrónicamente, es decir, que esta interacción no depende de la comunicación con el servidor, como si sucede en el modelo tradicional. Gracias a esto, el usuario no tendrá que volver a esperar mientras el servidor realiza todos sus procesos. En la Figura 2 y 3 se muestra la diferencia en el ciclo de vida de una aplicación Web tradicional y la interacción asincrónica de una aplicación AJAX. Cuando un usuario realiza una solicitud, que anteriormente era un requerimiento HTTP, toma la forma de un llamado JavaScript al motor de AJAX, el cual se encargará de responderla siempre y cuando no requiera ir hasta el servidor, como una validación de datos o algo de navegación. En el caso de que requiera ir hasta el servidor para responder al usuario, como cargar código adicional o recuperar datos, realiza estos pedidos asincrónicamente usando XML, de modo que no se detenga la interacción que hay entre el usuario y la aplicación. Figura 1. Modelo clásico para aplicaciones Web (izq.) y Modelo de AJAX (der.)[7]. En el modelo tradicional de aplicaciones Web, el usuario realiza peticiones que generan un requerimiento HTTP al servidor Web, el cual efectúa una serie de procesos, como recopilar información, y devuelve al cliente una página HTML. Durante el proceso en el cual el cliente envía la petición y el servidor realiza la acción solicitada, el usuario se Una vez entendido, el concepto central del funcionamiento de AJAX, es importante cuestionarse sobre los desafíos que vienen con AJAX, como lo expresa Jesse James Garrett: Los mayores desafíos al crear aplicaciones AJAX no son técnicas. Las tecnologías centrales son maduras, estables y bien conocidas. En cambio, los desafíos son para los diseñadores de estas aplicaciones: olvidar lo que creemos saber sobre las limitaciones de la Web, y comenzar a imaginar un rango más amplio y rico de posibilidades [1]. 71

4 en qué consiste Internet y sus potencialidades, entre las cuales se encuentran: Búsquedas en tiempo real: Gracias a AJAX, es posible hacer búsquedas en tiempo real, sólo basta con colocar el término a buscar e inmediatamente se despliegan los resultados, como se puede observar en la Figura 4. En el ejemplo, al ingresar la palabra Ajax, en Google Suggest, el buscador muestra los resultados comunes de la búsqueda. Figura 2. Ciclo de vida de una aplicación Web clásica [2]. Figura 4. Ejemplo de una búsqueda en Google Suggest. [4]. Google Maps: Una de las aplicaciones más famosas de AJAX es Google Maps. En la Figura 5, se puede ver el mapa de Colombia, como cualquier otra ubicación que el usuario desee, tan cerca o tan lejos como quiera. Figura 5. Google Maps [3]. Figura 3. Ciclo de vida de una aplicación AJAX [2]. IV. IMPLEMENTACIONES CON AJAX AJAX se utiliza para algunas de las últimas aplicaciones de Google, cuyos investigadores entendieron muy bien También se encuentran empresas en crecimiento que actualmente están desarrollando aplicaciones basadas en AJAX: Autocompletar: Las aplicaciones de autocompletar, permiten que en el momento que el usuario ingrese algún término, obtenga una lista de palabras similares del servidor y las despliegue, como se muestra en la Figura 5. Lo que hace la aplicación, es revisar cuáles palabras son 72

5 iguales en el diccionario al término ingresado y desplegarlas. Lugares de Chat: AJAX es una gran opción para todos los programas de Chat, donde hay muchos usuarios al mismo tiempo. Se puede ver lo que cada uno de los usuarios están escribiendo, sin necesidad de que la página se esté recargando. A9: Buscador de Amazon, que ayuda a las personas a encontrar lo que desean en el líder mundial en el sitios de comercio electrónico. ( Flickr: Aplicación que sirve para administrar y compartir fotos en línea. ( Panoramio.com: Comunidad de fotos sobre Google Maps, que permite realizar la búsqueda de un sitio y de inmediato carga las fotos de la ubicación escogida. ( Meebo: Sistema de mensajería Web que utiliza los protocolos conocidos de Hotmail, yahoo, jabber, en una sola Web. ( Trabber.com: Es un buscador de vuelos que busca simultáneamente en 38 webs de viajes de España, obteniendo resultados de compañías de bajo costo, de aerolíneas tradicionales y también de agencias de viajes. Cada vuelo se muestra con un enlace directo para comprarlo en la Web del proveedor correspondiente e incluso pueden combinarse vuelos de ida y de vuelta de diferentes proveedores. ( Writely: Un procesador de texto Web, estilo Word. Permite crear y compartir el trabajo online. Es posible importar los documentos, hojas de cálculo y presentaciones existentes, los cuales se pueden acceder y editar desde cualquier parte. Estos documentos se almacenan online de forma segura. ( goffice: Un paquete de oficina como Open office o Microsoft office. ( Kiko: Un calendario Web basado en AJAX. ( Gmail : Gmail es un nuevo tipo de correo Web basado en la idea de que el correo electrónico pueda resultar más intuitivo, eficiente y útil, ya que utiliza la búsqueda de Google para encontrar el mensaje exacto que se desea, sin tener en cuenta cuándo fue enviado o recibido. Entre otros grandes beneficios, como leer los mensajes desde el celular. ( Openomy: Es un sistema de archivos en línea. Puede almacenar archivos en Openomy y acceder a ellos desde cualquier ordenador. Openomy organiza los archivos a través de etiquetas (contrario a las carpetas). ( AJAX Toolkit Framework (ATF) proporciona herramientas extensibles para construir IDEs para diferentes entornos AJAX. V. CONCLUSIONES AJAX se pueden desarrollar aplicaciones donde se mejora la experiencia del usuario en la Web, optimizando los tiempos de respuesta del servidor. Lo que nos enseña la experiencia de AJAX es que nuestra capacidad para crear nuevas tecnologías es mucho mayor que nuestra capacidad para aprender a usarlas de manera efectiva [5]. REFERENCIAS [1] AJAX un nuevo acercamiento a aplicaciones Web. [2] CRANE, Dave. Ajax in Action Manning Publications. [3] Google Maps. [4] Google Suggest. [5] Hay que tener en cuenta el componente humano. Barcelona. cuenta/componente/humano/cdeco/ cdscdseco _3/Tes/. [6] Internet Global Congress Barcelona. as/ html. [7] LÓPEZ, Diego. Curso de Ajax. AX.pdf 73

6 Documento de carácter informativo. Los Autores Alejandro León Mora Ingeniero de la Compañía de Telefonía Celular Comunicaciones Celulares - COMCEL en Colombia. Especialista en Construcción de Software, Universidad de los Andes. Ingeniero de Sistemas de la Universidad El Bosque. Cl , Bogotá D.C., Colombia. aleon@comcel.com.co. Ángela Paola Cubillos Martín Ingeniera de Sistemas, Facultad de Ingeniería de Sistemas, Universidad El Bosque. Carrera 7 B Bis , Bogotá D.C. cubillosangela@unbosque.edu.co 74