Módulo 5 Entendiendo AJAX

Introducción a AJAX

AJAX es un acrónimo de Asynchronous JavaScript and XML ) Fue definido por primera vez por J.J.Garret en el año 2005 en su artículo “Ajax: A new approach to Web Applications” Ahí se definía una nuevo tipo de aplicaciones que pretendían parecerse a las aplicaciones de escritorio usadas habitualmente por los usuarios pero a través de la WEB.

Unas definiciones de Ajax serían: “Ajax no es una tecnología en sí mismo, se trata de una unión de varias tecnologías que trabajan de forma autónoma y que se unen mediante JavaScript “ “Es una técnica de desarrollo web para crear aplicaciones interactivas. Se ejecuta en el cliente y mantiene una comunicación ASINCRONA con el servidor. Mejora mucho sus tiempos de respuestas y esperas habituales del usuario”

Tecnologías Las tecnologías de las que se hablan en las definiciones, son las que a continuación presentamos, con sus relaciones entre si y su utilidad dentro de AJAX XHTML y CSS: Estos elementos se utilizan para la presentación de la información dentro de la página Web final. Podemos usar cualquiera de las propiedades de ellos con cualquier libertad. DOM Utilizamos DOM para la visualización dinámica de elementos en las páginas Web y para interactuar con la información presentada o a presentar. Todos los métodos y atributos vistos en el capítulo anterior son válidos. XML y JSON Son utilizados para definir los datos a intercambiar y la manipulación de ellos. Han sido elegidos por la baja carga en el servidor y cliente respecto a otras tecnologías. XMLHttpRequest Es el objeto encargado para el intercambio de datos Asíncrona o Síncronamente. Normalmente este objeto siempre se utiliza en comunicación asíncrona. JAVASCRIPT Es el elemento que realiza el nexo de unión entre todas las anteriores tecnologías. En Ajax se utiliza junto con los objetos DOM de HTML como son (navegador, document, element, etc)

2

Introducción a AJAX

Entendiendo Ajax Una de las características de AJAX, es que no requiere pluggins, es decir, no requiere capacidades específicas por parte del Navegador. Realizar aplicaciones en AJAX complejas y que luego puedan ser usadas en cualquier navegador, va a depender de las características y versión del propio navegador. A continuación se detallan una lista de los navegadores més usuales que soportan AJAX y no soportan Ajax SOPORTAN AJAX Mozilla Mozilla Firefox Netscape 7.1 y superiores IExplorer 5 y superiores Opera 8 y superiores NO SOPORTAN AJAX Lynx IExplorer para MACINTOSH IExplorer 4 o anteriores Opera 7 o inferiores

Proceso Cliente - Servidor El término cliente-servidor podríamos definirlo como: "Es un modelo para construir sistemas de información (es un conjunto de elementos que interactúan entre sí con el fin de obtener beneficios), que se sustenta en la idea de repartir el tratamiento de la información y los datos por todo los componentes informáticos, permitiendo mejorar el rendimiento del sistema global de información" Dentro de todo cliente-servidor siempre existen 2 partes bien diferenciadas, que son: el Cliente y el Servidor. Servidor: Es el elemento que suministra una serie de servicios con la finalidad de ser utilizados por los clientes, como pueden ser accesos a ficheros locales, accesos a Bases de Datos, Accesos a aplicaciones, etc Cliente: Es la parte consumidora de estos recursos que son proporcionados por el Servidor. Los clientes más habituales son los ordenadores personales.

Para que los elementos clientes y servidores interactúen, es necesario que se disponga de una serie de servicios que permitan dicha comunicación, por ejemplo, en el cliente dispondremos de un navegador Web, y en el servidor un Servidor Web. El proceso cliente-servidor se crea siempre basándose en peticiones del cliente y respuestas del servidor. También deberemos dispones de una infraestructura de red correcta y acorde con la arquitectura Cliente/servidor elegida. Disponemos de muchos clientes/servidores conocidos como por ejemplo: Servidores de paginas webs (HTTP), Servidores de ficheros (FTP), Telnet, etc

3

Introducción a AJAX

En aplicaciones Web clásicas, las comunicaciones entre el cliente y el servidor se realiza de una forma síncrona (el usuario hace peticiones continuas al servidor y debe de esperar a que recargue los cambios solicitados) Este tipo de aplicaciones, cuando se realizan muchas peticiones, el cliente tiene mucho tiempo de espera y genera mal sensación en los usuarios finales, incluso puede desesperarse.

Ajax permite mejorar las comunicaciones de las páginas Web, permitiendo una interopetarividad mucho mejor y más activa entre el usuario y la obtención de datos de la aplicación o página WEB. Mediante Ajax se evita que se haga una recarga continua y constante de páginas y datos ( forma síncrona ) y realiza una carga de forma ASINCRONA. Los datos transmitidos entre el cliente y el servidor, son datos “simples” y elaborados en XML La ingeniaría de Ajax suele usarse actualmente como sustituto de otros elementos como son Flash y Applets. Actualmente existen multitud de implementaciones de Ajax como por ejemplo: GMAIL

4

Introducción a AJAX

YAHOO MAIL GOOGLE MAPS GOOGLE DOCS

Mi primer Programa Una primera aproximación de cómo sería un código completo realzado en AJAX; el código lo dividiremos en secciones Debemos tener en cuenta que la mayor parte de los programas que utilizan AJAX van a utilizar las secciones que a continuación vamos a poner, aunque puedan existir casos que no sea así y falten alguna/s seccion/es. Las secciones que pueden aparecer son: 1. 2. 3. 4.

Código HTML Objeto XMLHttpRequest Código JavaScript Elementos adicionales como CSS, JSON, etc.

<script language = "javascript"> var XMLHttpRequestObject = false; :

5

Introducción a AJAX

: function obtenerDatos(fuenteDatos, divID) { : }

Mi Primer Programa en AJAX

CODIGO JavaScript El código JavaScrip puede ser usado en cualquier parte del programa, aunque siempre va a existir una parte específica de este código para definir los elementos necesarios para la comunicación con el servidor en Ajax. Usado por ejemplo, funciones para evaluar datos sin salir del cliente (formularios), funciones para hacer operaciones matemáticas, carga de modelos de Hojas de Estilos en Cascada, etc. También aparecen partes de Javascript para incorporar ficheros con más código javascript (*.js) o para incorporar las Hojas de Estilo en Cascada (CSS).

Mi primer Programa : : <script language = "javascript"> var XMLHttpRequestObject = false; : // Definición de variables u operaciones generales : function obtenerDatos(fuenteDatos, divID) { // Código de la función a implementar } : // Más código de JAvascript :

CREACION DEL OBJETO XMLHttpRequest La creación del objeto XMLHttpRequest es una parte fundamental de AJAX para la comunicación entre el Cliente y el servidor. Gracias a este objeto se puede enviar y recibir datos de diversas modos (asíncrono o asíncrono), aunque la mayoría de las veces se haga de forma asíncrono.

6

Introducción a AJAX

El objeto creado va a ser gestionado, leído y modificado en el siguiente capítulo, dándole una mayor definición a todos y cada uno de los métodos y atributos de que consta. Debemos de tener en cuanta que existen diferentes versiones de creación de este objeto dependiendo del navegador en el que nos encontremos. Para gestionar el objeto se disponen de unos métodos y propiedades que detallaremos en el siguiente capítulo que dan funcionalidad completa al objeto Mi primer Programa : : : <script language = "javascript"> var XMLHttpRequestObject = false; : var req = new XMLHttpRequest(); if(window.XMLHttpRequest && !(window.ActiveXObject)) { try { …………….. } catch(e) { ………….. } if(window.ActiveXObject) { :

Funcione de utilización del Objeto XMLHttpRequest Pueden existir una o más funciones para la gestión y manipulación de los datos obtenidos en la comunicación con el servidor. Siempre van a tener en común la utilización del objeto previamente creado, sino tenemos este objeto, la función no se podrá utilizar para hacer ningún tipo de tarea relacionada con la comunicación. La manipulación de los datos puede ser muy simple cuando se trate de texto plano o todo lo complicado que se quiera cuando trate con código XML, pues tenemos que interpretar sus datos y convertirlos

Mi primer Programa : : <script language = "javascript"> var XMLHttpRequestObject = false; : // Definición de variables u operaciones generales : function obtenerDatos(fuenteDatos, divID) { // Código de la función a implementar } : // Más código de JAvascript :

Ventajas y Desventajas

7

Introducción a AJAX

Ajax como cualquier otra ingeniería posee sus ventajas e inconvenientes, no se puede hacer todo con Ajax y no es conveniente no hacer nada sin ella. VENTAJAS 1. La principal ventaja que tiene Ajax es la posibilidad de realizar aplicaciones e interfaces de usuario similares a los que ahora mismo disponemos en cualquier aplicación que instalemos en nuestro PC. 2. Ajax no necesita navegadores con plugins determinados o preinstalados; sólo es necesario que el navegador soporte la ingeniería Ajax 3. La utilización de Ajax reduce el tráfico de Red. 4. El servidor envía datos no contenido, por lo que en una aplicación AJAX el servidor sólo envía los datos y desde el código que se ejecuta en el navegador se presentan modificando el contenido de la página.

DESVENTAJAS 1. La principal desventaja de la utilización de Ajax es el conocimiento de las tecnologías involucradas en ella, como son Javascript, CSS, XML, etc 2. La velocidad de proceso de la aplicación en el lado cliente puede ser lenta debido al elevado código Javascript usado para poder soportar AJAX. 3. La primera comunicación del cliente con el servidor, implica un mayor transvase de información. 4. Como norma general, las aplicaciones AJAX requieren código complejo del lado cliente, pues se debe de tratar la mayoría de la funcionalidad de la aplicación y sino se hace un buen diseño, su mantenimiento puede ser una ardua tarea.

FRAMEWORKS y Librerías Cuando nos ponemos a programar en los diferentes lenguajes de programación, disponemos de los llamados FrameWorks o interfaces GUI para desarrollar de una forma cómoda y sencilla. Para la programación en AJAX no es necesario disponer de ningún de estos frameworks, es posible hacer dicha programación desde cualquier editor de texto, como el Bloc de Notas o el WordPad, pero es conveniente disponer de alguno de ellos si nos es posible. Existen diferentes frameworks en el mercado, cada uno de ellos tiene sus ventajas e inconvenientes. FRAMEWORK XAJAX ( http://xajax.sourceforge.net ) FiveFox 4D AJAX ( http//4dhispano.com ) Qooxdoo Bindows My_BIC Google toolkit AJAX ( GWT) Ajaxtk ( IBM )

De la misma forma que disponemos de Framerorks para facilitar el trabajo de programación, también existen librerías realizadas en javascript, que son de código libre, es decir, pueden ser usadas libremente por cualquier persona o programador para facilitarnos aun más la programación Estas librerías se anexan a nuestras páginas web como si ficheros externos dentro del lenguaje javascript

8

Introducción a AJAX

<script type="text/javascript" src="http://www......./fichero.jsp"> LIBRERIAS Moofx ( http://moofx.mad4milk.net/ ) Prototype ( http://prototype.conio.net/ ) overLIB (http://www.bosrup.com/web/overlib/?Download ) Mochikit (http://www.mochikit.com/ ) DHTMLgoodies (http://www.dhtmlgoodies.com/ ) Dojo (http://www.dojotoolkit.org/ )

9