AJAX y el desarrollo de Aplicaciones SIG en la Web

Lic. Rafael Oliva SantosDepartamento de Ciencia de la Computacin Facultad de Matemtica y Computacin Universidad de La Habana roliva@matcom.uh.cu, rolivasantos@gmail.com

Resumen AJAX (Asynchronous JavaScript And XML) es un importante y poderoso modelo de desarrollo de aplicaciones Web interactivas. En este trabajo se hace un estudio sobre dicho modelo, sus ventajas, desventajas, origen y popularizacin entre los desarrolladores. Particularmente se analiza las posibilidades que brinda AJAX para el desarrollo de aplicaciones SIG (Sistema de Informacin Geogrfica) en la red de redes. Se discuten variantes para lograr los mismos efectos positivos que con AJAX. Se ejemplifica los tipos de aplicaciones SIG en los que se tiene experiencia con este tipo de modelo, especficamente los visores Web de cartografa. Introduccin Actualmente estamos a las puertas de una nueva etapa en la evolucin de Internet, la llamada Web 2.0. Entre los elementos de la Web 2.0 que posibilitan la creacin de Rich Internet Application (RIA) encontramos a AJAX. AJAX (Asynchronous JavaScript And XML) es un importante y poderoso modelo de desarrollo de aplicaciones Web interactivas. Est integrado por tres tecnologas de programacin con suficiente madurez y tiempo de uso entre los desarrolladores: HTML, XHTML y hojas de estilos en cascada CSS. Document Object Model (DOM) gestionado mediante lenguajes scripts que se ejecuten en el cliente como es el caso de JavaScript y JScript. XML es el formato que se utiliza generalmente en la transferencia de informacin y XSL estndar que se utiliza para transformar los documentos XML.

El modelo AJAX posibilita actualizar el contenido de una pgina Web, de forma inmediata, sin tener que recargar la pgina completa. Usando tecnologas del lado del servidor como son ASP.NET, ASP o PHP cuando el usuario efecta una accin se debe esperar que se cargue una nueva pgina va HTTP para observar un resultado, mientras tanto el usuario estar observando una pantalla vaca. En la mayora de las aplicaciones que utilizan AJAX se vence el esquema solicitud-respuesta. Con AJAX

1

se logra una mayor interactividad, una mejor respuesta y se estrecha el vnculo cliente-aplicacin. Las aplicaciones que se basan en este modelo no necesitan de la instalacin de ninguna herramienta adicional, como s es el caso de Flash y los Applets de Java. AJAX no requiere la instalacin de plug-in, ni de capacidades muy especficas del navegador. Breve historia El trmino AJAX fue acuado en el 2005 por Jesse James Garret en su artculo AJAX: A New Approach to Web Applications [GAR] publicado en Adaptive Path, pero sus bases fueron iniciativa de Microsoft en la dcada de los 90. El procesamiento asncrono en las aplicaciones Web tuvo sus comienzos en la carga de una parte de la pgina con los llamados IFRAME, tambin introducidos por Microsoft en el Microsoft Internet Explorer 3(IE) en 1996, as como con el elemento LAYER introducido en el navegador Netscape 4 en 1997. Ms tarde han surgido otras tecnologas para el procesamiento asncrono en las aplicaciones Web hasta que en ao 2002 la comunidad de usuarios del Microsofts Remote Scripting (MSRS) sustituyeron el Applet de Java por XMLHttpRequest. El objeto XMLHttpRequest constituye la piedra angular del modelo de programacin AJAX. Este objeto recoge la mayora de las funcionalidades que ofrecan el resto de las tecnologas. El primer navegador en introducir el objeto XMLHttpRequest fue Internet Explorer, pero ahora ya casi todos los navegadores ms utilizados soportan AJAX por lo que su uso se difundi en gran medida. AJAX es soportado por los siguientes navegadores [WIK1]: Microsoft Internet Explorer 5.0 y superiores, navegadores basados en Gecko (como Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galen y Netscape 7.1 y superiores), "Web Browser for S60" de Nokia tercera generacin y superiores, Opera 8.0 y superiores y Opera Mobile Browser 8.0 y superiores. Cambios en le esquema solicitud-respuesta en la WEB. En el modelo clsico de aplicacin Web ante una determinada accin del usuario se lanza una solicitud HTTP que es atendida por un servidor que procesa la informacin y devuelve un resultado HTML. Este resultado no es ms que la pgina que visualizar el cliente final. En el tiempo que transcurre la transmisin de informacin cliente-servidor y servidorcliente el usuario no est visualizando nada, ni puede efectuar operacin alguna sobre la aplicacin. Este modelo es uno de los elementos en contra de las aplicaciones Web en comparacin a las aplicaciones de escritorio, ya que hace que sean menos interactivas y ms lentas. En la figura se muestra el flujo de informacin en este modelo. 2

ServidorAplicaciones de servicio y procesamiento de datos

Servidores Web y/o XML HTML / CSS Solicitud HTTP

Interfaz Visual / Aplicacin Cliente

NavegadorFig. Flujo de informacin en el modelo clsico de aplicacin Web

Las necesidades actuales en muchas esferas exigen el desarrollo de sistemas constantemente asequibles, intercomunicados y dinmicos. Las aplicaciones Web crecen, cada da, en nmero y calidad. El desarrollo de nuevas tecnologas en el plano de la informtica y las comunicaciones hace necesario la utilizacin de un nuevo modelo que permita a las aplicaciones Web gozar de la misma interactividad y dinamismo que las aplicaciones de escritorio: una solucin que no incluya herramientas adicionales, ni exija la presencia de elementos rebuscados en los navegadores. AJAX rompe con el modelo clsico de aplicacin Web. La utilizacin de AJAX introduce un nivel intermedio entre la parte de la aplicacin Web que se ejecuta en el cliente e interacta con el usuario final y el servidor desde el cual se est haciendo la solicitud HTTP. El "motor" de AJAX se ejecuta en el cliente, es decir en el navegador. En el modelo de aplicacin Web donde se utiliza el motor AJAX, ante una determinada accin del usuario, se lanza un evento o se ejecuta una accin JavaScript atendida por el motor AJAX. El motor enva una solicitud HTTP al servicio requerido. Despus de procesada esta informacin por un servidor es devuelto al motor AJAX una repuesta XML. A partir de esta respuesta se modifica la estructura de la pgina, lo que se traduce en la mayora de los casos para el cliente final a cambios visuales. En el tiempo que transcurre la transmisin de informacin entre el cliente y el servidor el usuario contina visualizando la pgina Web. El usuario, despus de hacer la solicitud HTTP, puede continuar operando sobre la pgina debido a que la interaccin cliente-servidor se har de forma asncrona lo que hace que no sea necesario

3

esperar una respuesta y de esta forma se evitan los congelamientos de las aplicaciones Web ante cada accin. En la siguiente figura se ilustra el modelo para una aplicacin Web que utilice AJAX. ServidorAplicaciones de servicio y procesamiento de datos

Servidores Web y/o XML XML Solicitud HTTP

Motor AJAXHTML / CSS JavaScript Interfaz Visual / Aplicacin Cliente

NavegadorFig. Flujo de informacin en el modelo de aplicacin Web que utiliza AJAX

El objeto XMLHttpRequest Este modelo basa su funcionamiento en el objeto XMLHttpRequest que hace funcin de protocolo de mensajera. Este objeto tiene como objetivo transferir y manipular datos en formato XML. El 5 de abril de 2006, el Word Wide Web Consortium public una especificacin para el API de este objeto [WWW]. A travs del objeto XMLHttpRequest se pueden invocar los siguientes mtodos: open (method, URL, syn/asyn), donde method es el tipo de solicitud GET, POST, PUT, DELETE o HEAD, la url es el servicio o mtodo a invocar y syn/asyn es un valor booleano que indica si se va a gestionar la solicitud sncronamente o no. send (content), envia la solicitud.

4

abort (), aborta la solicitud actual. getAllResponseHeaders(), retorna el conjunto de cabeceras del protocolo HTTP como una cadena. getResponseHeader (header), devuelve el valor de determinada cabecera. setRequestHeader (label,value), asigna valor a determinada cabecera. onreadystatechangeEvent, mtodo a invocar cuando cambia el estado de la solicitud. readyState, estado actual de la solicitud: 0 no inicializado, 1 cargando, 2 cargado, 3 interactivo, 4 completo. status, devuelve el estado representado en un nmero (Ej: 404 para "Not Found" y 200 para "OK"). responseText, respuesta en forma de cadena. responseXML, respuesta en formato XML. statusText, devuelve el estado como una cadena (Ej: "Not Found" o "OK").

Propiedades:

Ventajas y desventajas del uso de AJAX AJAX no requiere de la instalacin de plug-in en la mquina cliente, pero si necesita que los usuarios tengan JavaScript activado. La mayora de los navegadores soportan esta tecnologa. En Microsoft Internet Explorer 6 y anteriores deben tener tambin activado el ActiveX, ya en estos navegadores el objeto XMLHttpRequest est implementado usando ActiveX. La programacin en JavaScript hace que sea ms difcil de depurar, mantener y reutilizar el cdigo. Uno de los aspectos ms criticables al modelo de programacin AJAX, es que su uso rompe con la habitual funcionalidad de botn Atrs de los navegadores. Este cambio est dado porque el botn Atrs har que se cargue en el navegador la pgina esttica que se haba cargado inmediatamente antes de la que actualmente se muestra, pero si esta pgina fue modificada dinmicamente estos cambios no sern reflejados en el navegador sino que se cargar la pgina original atenindose as a los errores que esto pudiera traer. Con relacin al uso del botn Atrs de los navegadores existen varias soluciones para lograr un comportamiento ms natural en las aplicaciones AJAX. Muchas de estas soluciones se basan en el uso de IFRAME invisibles al usuario final. Un ejemplo de eso es GoogleMaps [GOO], el que realiza bsquedas en un IFRAME no visible al usuario y luego las inserta en la visualizacin [WIKI]. Por la misma causa de las actualizaciones dinmicas se dificulta el hecho de agregar la direccin de la aplicacin AJAX a los marcadores o sitios favoritos, de modo que

5

cuando accedamos a l se visualice la pgina tal y como estaba en el momento de agregarla. Como solucin se suele modificar dinmicamente mediante JavaScript la direccin URL a medida que el contenido de la pgina cambie, esto tambin pudiera constituir una solucin a los problemas dados por la funcionalidad del botn Atrs. Con la utilizacin de AJAX, el tiempo que debe esperar el cliente entre la solicitud y la respuesta es menor que en las aplicaciones Web clsicas debido a que es menor la cantidad de datos a viajar entre la mquina cliente y la mquina servidor. Se evita la carga de los encabezamientos de pginas as como cargar innecesariamente datos que el usuario no va a utilizar, sencillamente cuando se requiera se hace la solicitud de estos. Dada la naturaleza de AJAX es posible hacer ms agradable y ms elegante esta espera con el uso de herramientas visuales que informen al cliente del estado en que est la resolucin o precarga de su solicitud como pueden ser las llamadas barras de estado. El modelo AJAX provee a las aplicaciones que hacen uso de l de gran interactividad ya que el motor AJAX se ejecuta en la mquina cliente y tiene la posibilidad de ante cualquier evento modificar la estructura DOM (Document Object Model) de la pgina. La interactividad lograda con el hecho de no tener que recargar la pgina ante acciones del usuario se puede enriquecer en gran medida con interfaces que utilicen DHTML, logrando una mayor modularizacin y una rpida y mejor respuesta. El uso de AJAX favorece la portabilidad de las aplicaciones, puesto que este modelo de programacin no necesita caractersticas muy especiales en los navegadores sino que utiliza herramientas presentes y bien documentadas en la mayora de las plataformas existentes. En la actualidad el motor AJAX funciona perfectamente entre plataformas distintas. Con la popularizacin de AJAX entre los desarrolladores de aplicaciones Web se han ido creando bibliotecas que han hecho que este modelo de programacin gane en madurez. Si se hace un balance entre las ventajas y desventajas indudablemente se puede llegar a la conclusin que AJAX promete un cambio en las aplicaciones Web. Hoy pueden implementarse funcionalidades solamente esperadas en una aplicacin de escritorio gracias a este modelo de programacin. Las aplicaciones SIG que usan AJAX. Los SIG como aplicacin puramente de escritorio van quedando atrs. Actualmente los SIG se abren ms all del ordenador donde estn alojados. En la actualidad es palpable la necesidad de contar con aplicaciones SIG multiplataformas, que se ejecuten de forma colaborativa aprovechando los recursos de la red y que sean cada vez ms distribuidas. Respondiendo a esta necesidad han surgido varias aplicaciones que centran su funcionamiento el uso del modelo de programacin AJAX.

6

Las aplicaciones SIG que se ejecutan en los ambientes Web tienen en AJAX una herramienta muy eficaz para ganar en interactividad. El hecho que las aplicaciones no tengan que esperar la respuesta de un servidor, sino que esta se procese en un segundo plano y cuando est lista se muestre hace que exista una continuidad y naturalidad en la interfaz visual que se le brinda al usuario final. Las aplicaciones SIG en la Web requieren en su mayora de un constante intercambio de datos grficos y de texto con algn servidor. El modelo AJAX en este tipo de aplicaciones favorece en gran medida la gestin y publicacin de forma prctica de informacin grfica y alfanumrica, as como posibilita la combinacin, actualizacin y dependencia de ambos tipos de informacin. AJAX posibilita la visualizacin y manipulacin de informacin geoespacial, al igual que la integracin de datos provenientes de diversas fuentes El uso de AJAX permite mostrar de forma ms intuitiva herramientas de anlisis y gestin en estos tipos de aplicaciones, elemento que favorece la creacin de interfaces visuales ms agradables y amigables al usuario final que en muchos casos no es conocedor del manejo de aplicaciones de informacin espacial. El modelo de programacin AJAX permite explotar las funcionalidades de los Servicios Web (Web Services) [WS] estandarizados por Open Geospatial Consortium (OGC) [OGC], como: Web Map Services (WMS), Web Feature Services (WFS) y Web Coverage Services (WCS). AJAX posibilita el acceso a estos servicios de forma fcil, independientemente de la plataforma por lo que el uso de este modelo potencia el uso de los servicios OGC, y de esta forma las aplicaciones reciben los beneficios de la estandarizacin de los servicios geoespaciales. Con AJAX se puede utilizar funcionalidades de los WMS como: getMap, getCapabilities y getFeatureInfo. En la figura se muestra el acceso a los Servicios Web OGC. ServidorWMS / WFS / WCS OGC Web Services

Servidores Web y/o XML XML Solicitud HTTP

Motor AJAXHTML / CSS Javascript Aplicaciones SIG

NavegadorFig. acceso a los Servicios Web OGC

Los Servicios Web, al igual que el modelo AJAX utilizan protocolos basados en XML, lo que posibilita la integracin y la complementacin de ambos. La combinacin del

7

modelo AJAX con la invocacin de Servicios Web ofrece grandes ventajas en cuanto a la interoperabilidad, interactividad y rendimiento de las aplicaciones Web. Despus que Google comenz a desarrollar algunas aplicaciones con AJAX, este modelo de programacin atrajo la atencin de los desarrolladores Web. Ejemplo de aplicaciones SIG que utilizan AJAX son: GoogleMaps [GOO], la biblioteca Ka-Map [KAM] y el visor LtnWebViewer de la biblioteca OLatino de CADIC [LAT]. Otras tecnologas para el desarrollo de aplicaciones SIG en la Web Los efectos logrados con el modelo de programacin AJAX, vistos independientemente uno de otros, son logros antes alcanzados. Existen otras herramientas para el desarrollo de aplicaciones SIG que logran muchas de las quimeras que se asocian en la mayora de los casos a AJAX. Analicemos brevemente algunas de las variantes para obtener resultados similares: 1. Scalable Vector Graphics (SVG) es un estndar abierto de lenguaje, recomendado por el W3C en Septiembre de 2001. Este lenguaje se utiliza para hacer descripciones en XML de grficos vectoriales bidimensionales. Clientes de este lenguaje han sido incluidos en varios navegadores como Amaya, en la versin 1.5 de Mozilla Firefox, en la versin 8 de Opera, Konqueror y Safari, en otros navegadores es necesario la instalacin de un plug-in. A pesar de ser este lenguaje muy til para el desarrollo de aplicaciones SIG su uso se ve afectado debido a que no tiene soporte nativo en la mayora de los navegadores. SVG complementa las posibilidades de AJAX, cooperando en la riqueza grfica de la aplicacin. 2. Flash es un entorno de desarrollo y el programa de la mquina virtual que se utiliza para ejecutar los archivos desarrollados en ese entorno. Flash facilita la visualizacin de grficos vectoriales e imgenes rster, lo que hace a esta herramienta ventajosa para el desarrollo de aplicaciones SIG. Flash se utiliza generalmente para hacer ms interactivas las aplicaciones Web. Para la visualizacin de las aplicaciones hechas en este entorno, en algunos navegadores (el 97% soporta Flash [MAR1]), es necesario instalar la mquina virtual (plug-in), esto sumado a que el formato que utiliza Flash es patentado por Macromedia, lo que hace que pueda ser modificado segn los intereses del fabricante y que las soluciones Flash son soluciones externas no incorporadas al lenguaje de creacin de la aplicacin, constituyen elementos que van en contra de la popularizacin y aceptacin completa de esta herramienta, a pesar de la riqueza grfica que aporta este entorno. Ejemplos del uso de este entorno de desarrollo son: Macromedia Flex y Laszlo Suite (open source).

8

3. Los Applets SWING facilitan el desarrollo de interfaces grficas y animaciones en aplicaciones reales de gran tamao. Los Applets Swing tienen el inconveniente que slo se pueden ejecutar en los navegadores que tengan instalado el Java plug-in, en navegadores compatibles con el JDK 1.2 o con el JDK 1.1 y que tenga acceso a las clases Swing. Todas ests tecnologas y herramientas son muy tiles en el desarrollo de aplicaciones SIG pero todas exigen de un modo o de otro la instalacin de plug-in o traen otros inconvenientes. De modo que AJAX continua siendo de la preferencia de los desarrolladores ya que constituye una solucin a los problemas del mundo de la Geomtica en la Web sin grandes exigencias para el cliente, elemento que le da seguridad a este a la hora de utilizar la aplicacin. Visores Web de Cartografa. Las aplicaciones SIG en la Web ms difundidas son los visores cartogrficos. En estos visores se publican mapas e informacin asociada a ellos. En este tipo de aplicaciones garantizar la interactividad y la disminucin del tiempo de espera del usuario es muy importante producto del gran cmulo de informacin que es necesario cargar y la frecuencia con la que esto se hace. Una de las aplicaciones de la Geomtica en la Web, ms populares en los ltimos dos aos es GoogleMaps [GOO]. La siguiente imagen muestra la visualizacin en GoogleMaps de la zona norte de Ciudad de La Habana en Cuba.

9

Fig. Visualizacin de Ciudad de La Habana en GoogleMaps.

Los visores cartogrficos gracias a AJAX brindan al usuario una amplia gama de servicios con funcionalidad interactiva. Uno de las funcionalidades ms sorprendentes logradas con AJAX en los visores cartogrficos es la llamada Drag & Drop que nos permite mover la visualizacin arrastrndola en direccin contraria a donde queremos dirigirnos. LtnWebViewer de la biblioteca OLatino de CADIC [LAT] es un ejemplo de visor que usa AJAX para la gestin de la cartografa es el control. El usuario puede hacer clic sobre la cartografa y con el botn del ratn presionado desplazarla, as como mediante los eventos de scroll del ratn puede variar la escala de la cartografa visualizada. La siguiente imagen muestra la visualizacin en LtnWebViewer del barrio Las Palmas en Managua, Nicaragua.

Fig.: Visualizacin en LtnWebViewer del barrio Las Palmas en Managua, Nicaragua.

En los visores que utilizan este modelo de programacin los mapas que sean necesarios son cargados de forma asncrona en un segundo plano por lo que no afectan las operaciones que este efectuando el cliente. La solicitud de nuevos mapas al servidor es totalmente transparente al usuario que no debe efectuar ninguna accin como hacer clic sobre un botn, la propia aplicacin se encarga de hacer las 10

solicitudes necesarias y no habr pantallas en blanco como ocurre con cuando se recarga la pgina entera. Conclusiones AJAX no es una nueva solucin a los problemas de interoperabilidad de las aplicaciones Web, pero si constituye la popularizacin de un modo de programacin que otorga a las aplicaciones SIG de nuevos niveles de interaccin y usabilidad. Es una herramienta muy valiosa para romper con el gastado esquema solicitudrespuesta. La difusin de este modo de programacin constituye un paso de avance que no es ms que la antesala del momento en que se generalice de tal modo que las ms importantes tecnologas de desarrollo Web asuman esta filosofa de desarrollo como propia, entonces se marcara una nueva etapa del desarrollo Web. AJAX es una herramienta muy til en las aplicaciones Web que manejan gran cantidad de datos y tienen que actualizar constantemente la estructura visual de la pgina, como son las aplicaciones SIG. Las que se pueden valer de AJAX para ofertar servicios que no se imaginaban para las aplicaciones Web, como Drag & Drog en los visores de cartografa. AJAX contribuye a la utilizacin y explotacin al mximo los servicios geoespaciales estandarizados por OGC, dado la simplicidad para acceder desde este modelo a servicios Web. El modelo de programacin AJAX promete ser un paso decisivo en el desarrollo de la Geomtica en la Web, esto se demuestra con el surgimiento y desarrollo de aplicaciones del corte de GoogleMap y LtnWebViewer que da a da crecen en nmero y calidad en la red de redes. Referencias [GAR] Jesse James Garrett, AJAX: A New Approach to Web Applications, 2005 http://www.adaptivepath.com/publications/essays/archives/000385.php [GOO] GoogleMaps http://maps.google.com [KAM] Ka-Map, http://ka-map.maptools.org [LAT] OLatino, CADIC http://www.cadic.com, http://www.sgrin.es/visorweb [MAR1] Juan Marn Otero, RIA para aplicaciones SIG en Web, slo AJAX?, 28/11/2005 http://programacionsig.blogspot.com/2005/11/ria-para-aplicaciones-sig-enweb-slo.html

11

[OGC] OGC (Open Geospatial http://www.opengeospatial.org/

Consortium)

official

Web

site

[WIK1] Wikipedia, http://es.wikipedia.org/wiki/AJAX [WS] Booth, D., Haas, H., McCabe, F., Newcomer, E., Champion, M., Ferris, C., and Orchard, D. Web Service Architecture. W3C Working Group Note, 11/02/2004. Available from http://www.w3c.org/TR/ws-arch [WWW] Especificacin del World Wide Web del API del objeto XMLHttpRequest. 5/4/2006 http://www.w3.org/TR/XMLHttpRequest/

Otros materiales consultados Ahmet Sayar1, Marlon Pierce y Geoffrey Fox Integrating AJAX Approach into GIS Visualization Web Services. http://grids.ucs.indiana.edu/ptliupages/publications/146780320544.pdf Aaron Ricadela. "Fuel For The Web". http://www.informationweek.com/story/showArticle.jhtml?articleID=165600304 Denken ber, AJAX un nuevo acercamiento a Aplicaciones Web, 2005. http://www.uberbin.net/archivos/internet/ajax-un-nuevo-acercamiento-a-aplicacionesweb.php Jorge Bastida Prez, XMLHttpRequest / AJAX Joshua Gitlin, Errors and AJAX. 21/05/2005 http://www.xml.com/pub/a/2005/05/11/ajax-error.html Juan Marn Otero, Un ao de programacin SIG - Parte 1, 31/12/2005 http://programacionsig.blogspot.com/2005/12/un-ao-de-programacin-sig-parte-1.html Juan Marn Otero, Un ao de programacin SIG Parte2, 31/12/2005 http://programacionsig.blogspot.com/2005/12/un-ao-de-programacin-sig-parte-2.html Luis Villa. "AJAX o el fin del clic y espera". http://www.alzado.org/articulo.php?id_art=457&s=1 Martthew Eernisse, A Simpler AJAX Path. 19/05/2005 http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html 12

Ryan Singel. "You Say You Want a Web Revolution". http://www.wired.com/news/technology/0,1282,68403,00.html Wikipedia, http://www.wikipedia.org

13