Desde un punto de vista temático, los temas de esta unidad son:

• Qué es AJAX
• Ejemplos en la utilización de AJAX
• Ejercicios
• Resumen

Ajax (JavaScript Asincrónico y XML) es una técnica de desarrollo Web. La técnica Ajax permite crear aplicaciones Web más rápidas, interactivas y amigables para el usuario. Mediante esta técnica, las aplicaciones Web pueden actualizar de manera sincrónica o asincrónica algunos de los datos de las páginas sin necesidad de recargarlas completamente.

La técnica Ajax involucra un conjunto de tecnologías entre las que se destacan:

• JavaScript: Es un lenguaje de script (conjunto de instrucciones) e interpretado (significa que el script no precisa compilación preliminar). El mismo fue diseñado para agregar interactividad a las páginas Web y usualmente es embebido directamente en esta. En la actualidad es soportado por la mayoría de los navegadores Web. Es frecuentemente utilizado para capturar eventos de la página Web. Estos eventos pueden ser: finalización de la carga de la página, el usuario presionó un botón, entre otros. También es usado para validar datos de la página Web y cambiar el contenido de los elementos HTML de la misma.
• Intercambio de datos con XML y XSLT :

  XML eXtensible Markup Language. Es un lenguaje de marcas muy simple y flexible. Se utiliza para representar datos e incluir descripción de la estructura de los mismos. Un ejemplo de un documento XML es el siguiente:

  

  XSL Transformations (XSLT) es un lenguaje para realizar la transformación de documentos XML en otros documentos (particularmente otros documentos XML). Estas transformaciones se escriben en documentos XML. XSLT posee un vocabulario, que es utilizado para describir las transformaciones mencionadas.
• XHTML : Es un lenguaje de marcas de la W3C para páginas Web. Combina HTML y XML en un mismo formato (HTML 4.0 y XML 1.0). Al igual que XML, XHTML puede ser extendido para agregar etiquetas propietarias y su codificación es más rigurosa que la de HTML.
• CSS : Cascading Style Sheets. Es un estándar de la W3C para definir la presentación de los documentos Web. Es un mecanismo simple para agregar estilo (por ejemplo color, tipo de letra) a documentos Web. Con CSS se puede separar el contenido (HTML, XHTML) de la presentación (CSS).
• Iteración con la página a través de DOM: Document Object Model (Modelo de Objetos de Documentos) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula un documento.
• Recuperación Asincrónica o Sincrónica de datos con el objeto XMLHttpRequest: permite recuperar datos del servidor Web como una actividad que corre en el background (detrás de escena). Este objeto se comunica con el servidor de manera asincrónica o sincrónica, enviando peticiones al mismo.

Tomemos como ejemplo una aplicación Web que lista los usuarios de un sistema.

La aplicación Web lista los usuarios de un sistema.

De esta aplicación Web nos interesan dos de sus funcionalidades:

• Ordenar el listado de usuarios según distintos criterios. Los criterios de ordenación corresponden a cada uno de los datos que se incluyen en el listado. Por ejemplo, ordenar por Código de Usuario, ordenar por Nombre de Usuario, etc.
• Navegar entre las distintas páginas del listado. Dado que la lista de usuarios del sistema puede ser muy extensa, la aplicación Web también ofrece la funcionalidad de dividir el listado de usuarios en varias páginas. A este proceso de división se le denomina "paginación del listado".

Ambas funcionalidades (ordenación y paginación) implican una llamada del cliente (navegador Web) al servidor, pues los algoritmos de ordenación y paginación residen en este último.

Existen, por lo menos, dos implementaciones posibles:

• Una basada en el modelo clásico de aplicaciones Web (sin utilizar Ajax)
  Vea un ejemplo
• Una basada en Ajax
  Vea un ejemplo

En una arquitectura Cliente-Servidor, el cliente requiere servicios y el servidor es quien los ofrece.

En el caso de una aplicación Web tenemos un servidor Web que es quien contiene las páginas Web y los algoritmos y un cliente liviano (un navegador) que es el que requiere la página Web (generalmente para mostrarla).

La arquitectura de tres capas es una de las arquitecturas más avanzadas de tipo cliente/servidor.

Los componentes de una arquitectura de tres capas son:

• Presentación
• Lógica de negocio
• Datos

En las siguientes figuras, usted puede apreciar cómo interaccionan el cliente y el servidor cuando, desde el navegador, se solicita ordenar el listado de los usuarios del sistema según alguno de los posibles criterios.

1)El usuario solicita ordenar el listado de usuarios del sistema según el código de usuario (columna Código). Esto produce un evento que atiende el navegador.

2)El navegador genera una petición HTTP que viaja desde el cliente hacia el servidor.

3)El servidor recibe la petición y ejecuta la lógica necesaria para ordenar los datos.

4)El servidor genera la página HTML con los datos ordenados y envía esta nueva página hacia el cliente.

5)El cliente recibe la nueva página HTML y la despliega al usuario.

1) El usuario solicita ordenar el listado de usuarios del sistema según el código de usuario (columna Código). Esto produce un evento que atiende el navegador.

2) El código JavaScript (que reside en el cliente) procesa el evento. Este realiza la llamada al servidor (petición HTTP).

3) El servidor recibe la petición y ejecuta la lógica necesaria para ordenar los datos.

4) El servidor genera un documento XML con el resultado (los datos ordenados) y lo envía al cliente.

5) Un código JavaScript en el cliente recibe el documento XML, lo procesa y recarga únicamente la sección de la página Web que corresponde al listado de los usuarios.

En el ejemplo, la comunicación entre el cliente y el servidor se realiza con XML. De acuerdo a esto, el cliente recibe, como respuesta a su petición, un documento XML con los datos. El código JavaScript en el cliente procesa el documento XML (extrae la información que realmente necesita) y actualiza las secciones de la página Web que correspondan.

Eventualmente, el cliente puede estar comunicándose simultáneamente con varios servidores, con la información que recibe de cada uno de ellos, actualizar secciones diferentes de la página Web.

En este ejemplo, se utiliza XML para la comunicación. Sin embargo, pueden utilizarse otros formatos o estándares.

Usted puede profundizar en las tecnologías XML y JavaScript en el curso "XML y Aplicaciones".