Curso de AJAX

Una de las principales ventajas al utilizar Ajax en el desarrollo de aplicaciones Web es la posibilidad de realizar peticiones desde el navegador Web al servidor de forma asincrónica. Para esto se utiliza el objeto XMLHttpRequest. Este objeto también permite realizar peticiones de manera sincrónica al servidor.

Cuando se realiza una petición desde un navegador Web al servidor de forma sincrónica, el navegador Web bloquea la aplicación que está corriendo pues espera que finalice la ejecución de la petición en el servidor. Sin embargo, al realizar estas peticiones de forma asincrónica el navegador Web no bloquea a la aplicación que está corriendo. Esto se debe a que el navegador Web no debe esperar por la finalización de la ejecución de la petición en el servidor, dado que se notifica al navegador Web cuando esto ocurre.

Generalmente, en las peticiones sincrónicas al servidor, la página Web que el usuario está viendo se recarga totalmente. Esto hace que la aplicación Web sea más lenta y menos interactiva que una que utiliza peticiones asincrónicas.

Nota: Otra manera de realizar peticiones asincrónicas al servidor consiste en la utilización de Iframe (el cual será discutido más adelante en este curso).

El siguientes vídeo muestra la interacción entre el cliente y el servidor de forma sincrónica, a continuación podrá ver esta interacción de forma asincrónica.

El objeto XMLHTTPRequest fue originalmente creado por Microsoft, que lo introdujo con Internet Explorer 5.0 en la forma de un objeto ActiveX.

El mismo no es un estandar de la W3C

Puede encontrarse una funcionalidad similar al Objeto XMLHTTPRequest en las especificaciones de carga y almacenamiento del Nivel 3 de Document Object Model (W3C DOM Level 3 "Load and Save"), estándar de la W3C, pero aún no hay navegadores que lo soporten completamente.

En el siguiente vídeo se muestra la interacción entre el cliente y el servidor de manera asincrónica.

Volvamos al ejemplo de la aplicación Web que lista los usuarios de un sistema. Supongamos que se le quiere agregar la funcionalidad de listar, además de los datos principales del usuario (código, contraseña y rol), el estado del mismo.

El estado del usuario indica si el mismo está conectado al sistema en este momento. Por la naturaleza del dato, es necesario que el mismo sea constantemente actualizado y que la actualización se realice de manera automática sin necesidad de que el usuario de la aplicación Web tenga que solicitarla explícitamente.

Si se decide implementar la nueva funcionalidad de forma sincrónica, entonces cada cierta cantidad arbitraria de segundos (por ejemplo 10) la aplicación Web requerirá actualizar el estado de los usuarios del sistema. Por lo tanto, la página Web que contiene este listado se recargará completamente y la aplicación se bloqueará, pues el navegador Web esperará por la respuesta del servidor.

La implementación natural de esta nueva funcionalidad consiste en utilizar comunicación asincrónica con el servidor. De esta forma, las peticiones al servidor son realizadas detrás de escena, sin necesidad de bloquear la aplicación Web. Por lo tanto, el usuario puede seguir trabajando en esta.

A continuación se presenta un vídeo que demuestra la implementación de esta nueva funcionalidad cuando se realizan peticiones sincrónicas y asincrónicas al servidor.

• Sincrónica
  Vea un ejemplo
• Asincrónica
  Vea un ejemplo

Piense ejemplos de procesos sincrónicos y asincrónicos en la vida real, como por ejemplo la atención de clientes en un Banco.

Piense otros casos en donde es útil la comunicación asincrónica desde el cliente (navegador) al servidor.

Algunos casos de uso de Ajax son los siguientes

• Auto-completar: es posible auto-completar los datos que se están ingresando en un formulario Web, como puede ser la dirección de correo o el nombre del pais de un usuario, con datos consultados al servidor. Por ejemplo, suponga el caso de una lista de 10000 nombres. No es viable enviar la lista de todos los nombres al cliente para que una función JavaScript determine, de acuerdo a los caracteres que va ingresando el usuario, cuáles son los posibles nombres válidos. Sin embargo, después de introducir los tres primeros caracteres del nombre, esta lista puede reducirse a unas pocas decenas. De esta forma, después de introducir los tres primeros caracteres del nombre, se puede consultar detrás de escena al servidor, recuperar los posibles nombres y listarlos como opciones al usuario.
• Notificaciones del servidor: es posible recibir notificaciones del servidor. Usted puede tener una función en el cliente que cada cierto tiempo consulte, detrás de escena, al servidor y de acuerdo a los valores recibidos notificar al usuario sobre ciertos acontecimientos. Por ejemplo, suponga un sistema de alertas deportivas. En el navegador, el usuario podría disponer de un servicio que le notifique sobre los goles de su equipo favorito.
• Validación de los datos en tiempo real: es posible validar los datos de un formulario Web que requieren validación del lado del servidor en tiempo real sin necesidad de completar todo el formulario Web.
• Refrescar datos de la página: es posible actualizar los datos de una página Web como cotizaciones de las monedas, estado del tiempo u otros datos especificos de la página Web sin la necesidad de recargarla.
• Ver información detallada: es posible visualizar la información detallada de un ítem o producto sin la necesidad de refrescar la página Web completamente.
• Ordenar y filtrar: es posible ordenar y filtrar los datos de un listado, potencialmente grande, sin necesidad de recargar la página Web completamente.

Ejemplos de aplicaciones que utlizan Ajax:

• 
  Ejemplo 1.
• 
  Ejemplo 2.
• 
  Ejemplo 3.