Introducción a AJAX

En posts anteriores hemos visto una introducción a JQuery, un framework reducido de Javascript, y ahora profundizaremos un poco mas en este campo, de forma que podamos crear aplicaciones más ricas con AJAX.

AJAX (Asynchronous JavaScript And XML) nos propone una técnica de desarrollo web basada en el cambio de contenido de las páginas de forma asíncrona, sin necesidad de recargarlas, lo que reduce el trafico con el servidor y nos permite crear aplicaciones interactivas en las que potenciaremos la velocidad y usabilidad de las mismas. La interfaz de estas aplicaciones se ejecutará integramente en el navegador del usuario, de manera que tan solo se comunicará con el servidor para enviar y obtener nueva información.

Para ello dispondremos de los siguientes elementos:

• (X)HTML + CSS
• Lenguaje interpretado: típicamente Javascript.
• Lenguaje de marcas: XML
• Interfaz de comunicación asíncrona: XMLHttpRequest

El funcionamiento de todo esto es muy simple: cuando se den las circustancias adecuadas o el usuario genere un evento concreto, se enviará una petición HTTP estandar al servidor de manera asíncrona, y cuando tengamos dicha información la procesaremos y pasaremos a actualizar la interfaz como corresponda.

Esto se ve mas claro en el siguiente gráfico:

Esquema de llamadas AJAX

Además, debido a que muchas de estas llamadas se realizan para obtener información actualizada en tiempo real o recoger eventos que ocurrieron en la parte del servidor, deberemos escoger una estrategia adecuada que nos permita tener la información de la aplicación lo mas actualizada posible. Para ello disponemos de 3 estrategias diferentes en cuanto a como y cuando hacer estas llamadas:

1.- Polling

AJAX: Polling

Se realizará una petición y el servidor responderá al momento, haya o no haya datos nuevos a aportar. Si se produce un evento en el servidor que provoque que se deba enviar nueva información, el envío de la misma deberá esperar hasta que al cliente AJAX (navegador del usuario) quiera actualizarla, con lo cual se perderá tiempo y se perderá el concepto de tiempo real.

2.- Long Polling

AJAX: Long Polling

En este caso, al contrario que en el polling simple, el servidor no responderá a la petición hasta que tenga algo que enviar y, en cuanto el navegador reciba dicha respuesta, mandará de nuevo otra petición cuya respuesta esperará a que haya un evento que enviar.

3.- HTTP Streming (Push)

AJAX: HTTP Streaming

Por último tenemos el llamado HTTP Streaming, en el que abriremos al inicio una conexión enviando una petición y posteriormente iremos recibiendo datos según los vaya generando el servidor, sin necesidad de cerrar la conexión. Esta es la principal diferencia con long polling, en la primera se abre y se cierra una conexión por cada comunicación con el servidor, al contrario que en HTTP Streming donde la primera conexión se reutiliza para enviar los datos a lo largo de toda la sesión. Al mantener la conexión abierta reduciremos el retardo entre la generación del evento y la llegada del mismo a la interfaz, pero por otra parte podemos colapsar el cliente si la información a recibir es muy voluminosa, lo que provocará que la información no se pueda actualizar en tiempo real, con lo cual perdemos la ventaja de la baja latencia.

Por norma general usaremos Polling cuando queramos actualizar la interfaz si no importa que haya un retardo y no sea en tiempo real, y usaremos Long Polling o HTTP Streaming en caso de que queramos información actualizada al momento.

Nada mas por hoy. Proximamente volveré con un breve tutorial de AJAX con JQuery.
Hasta entonces.