Tecnologías para Ajax

Como bien se dijo, Ajax no es una tecnología en sí, sino una unión de tecnologías con el fin de crear una mejor experiencia de usuario. Estas tecnologías son:

• XHTML y CSS basada en estándares.
• DOM para la interacción dinámica con el documento.
• XML, JSON,…, para el intercambio de datos con el servidor.
• XMLHttpRequest establecer el canal de comunicación entre el cliente y el servidor.
• Javascript para tratar el fichero (XML, JSON) del servidor, tratarlo e incluirlo por DOM a la página.

Figura 2.1. Tecnologías que agrupan el concepto Ajax

Como bien se ve en la figura 2.1, Javascript es el puente entre las comunicaciones y la presentación.

Modelo tradicional vs Modelo Ajax

El proceso en las web tradicionales era:

1. El usuario pide una página a un servidor,
2. El servidor le devuelve la página que pidió al usuario,
3. El usuario interactúa con los datos de la página (formularios, tablas, …),
4. El usuario realiza una acción (ejecutar un href, un formulario, …),
5. El servidor procesa los datos que introdujo el usuario y calcula la respuesta,
6. Y el servidor devuelve otra página completa con los nuevos datos al usuario.

Figura 2.2. Comparativa entre el modelo clásico y el modelo Ajax

Como se ve en la Figura 2.2, la gran diferencia que existe entre el modelo clásico web y el modelo Ajax Web es lo que envía el servidor. En el modelo clásico envía la página completa con las hojas de estilo, los javascript asociados, las imágenes y los componentes que necesite esa página. En el modelo Ajax lo único que envía el servidor son los datos que necesitan ser refrescados al cliente.

Las dos mayores ventajas son:

1. No hay que refrescar la página del cliente para mostrar nuevos datos
2. Se reduce bastante la transferencia del servidor

Figura 2.3. Comparativa de sincronización entre el modelo clásico y el modelo Ajax

En el modelo tradicional el que hace la petición es el navegador, en el modelo actual la petición HTTP la hace Javascript.

Fuentes e Imágenes obtenidas de:

1. Artículo en adaptative path de Jesse James Garret
2. Capítulo 1 del libro de Ajax en librosweb.es

Artículos Relacionados

• JSON. Otra forma de hacer Ajax en la Web
• Ajax (I): Introducción y orígenes
• Draggable: Plugin de CRaZy TeaM para JQuery
• Escribiendo código javascript eficiente
• Framework para menús deplegables con CSS

La definición que da la wikipedia es la siguiente:

Ajax (Asynchronous JavaScript And XML) (JavaScript asíncrono y XML) es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Es una buena definición, pero no es una definición que a mi me guste del todo. Yo prefiero la definición que dió Jesse James Garret en su artículo Ajax: a new approach to web applications (Ajax: una nueva aproximación a las aplicaciones Web). En el artículo dice que Ajax no es una tecnología en sí misma, sino que, en realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes.

Historia de Ajax

Desde hacía ya tiempo que se hacían comunicaciones asíncronas en aplicaciones web. En 1996 con Internet Explorer 3 utilizando el frame oculto o en 1997 con Netscape 4 utilizando el elemento layer. Las dos capas tenían un atributo src que permitía cargar una dirección con un contentenido HTML y código javascript con la lógica necesaria para tratar esos datos e introducirlos en la la página por medio de DOM.

Microsoft, en 1998, revolucionó la técnica de los frames y los layer (para ser claros, útil pero algo ‘chapucera’) cuando presentó Script Remoting. Una solución bastante más elegante que utilizaba un applet de Java para realizar estas comunicaciones asíncronas. Lo aplicó de forma muy efectiva en el Outlook Web Access que venía con la versión 2000 del Microsoft Exchange Server.

Después de esto, una comunidad de desarrolladores Web comenzó a construir una librería JSRS con la finalidad de que funcionase en varios navegadores desde el año 2000 hasta el 2002, año en el que se convirtió en el elemento XMLHttpRequest que utilizamos actualmente.

El nombre de Ajax no le vino hasta que en febrero de 2005 Jesse James Garret publicase un artículo, que enlacé antes, llamándo a esta unión de tecnologías como Ajax.

Artículos Relacionados

• Ajax (II): Unión de tecnologías
• JSON. Otra forma de hacer Ajax en la Web

JSON es un formato ligero de intercambio de datos. Similar a los namespaces de javascript.

Estos dos formatos, junto con texto (poco recomendado bajo mi punto de vista) o html son las estructuras de datos para hacer Ajax en la web.

La estructura básica de JSON es:

Vista más o menos la estructura del JSON, las ventajas son:

• Peso bastante reducido. Se pierde mucho peso con las etiquetas puesto que se engloban los datos entre dos caracteres ( ‘{’, ‘}’). En aplicaciones con mucha transferencia de datos puede ser muy relevante
• La evaluación de los datos es muy veloz, puesto que la propia estructura JSON puede ser una variable javascript.
• Aunque eval() suponga un pequeño agujero de seguridad, una buena implementación desde servidor es suficiente para que eval ya no sea importante

Artículos Relacionados

• Ajax (II): Unión de tecnologías
• Draggable: Plugin de CRaZy TeaM para JQuery
• Escribiendo código javascript eficiente
• Ajax (I): Introducción y orígenes
• Framework para menús deplegables con CSS