En el artículo anterior expuse una introducción a lo que se va a conseguir si implantamos AJAX en nuestras aplicaciones. Resumiendo, lo que vamos a conseguir es combinar la funcionalidad del servidor con la potencia de JavaScript a la hora de modificar el documento HTML.

Lo que voy a hacer en este capítulo es explicar cómo crear el Motor AJAX por medio de JavaScript. Efectivamente, los frameworks actuales de Javascript como JQuery o Dojo, ya lo tienen implementado en sus funciones de AJAX, pero siempre está bien conocer “el interior” de estos métodos.

Para este artículo propondré dos ejemplos, uno de ellos cargará por medio de AJAX una página en una etiqueta div. El otro generará un desplegable dinámicamente según un XML devuelto desde el servidor.

IMPORTANTE: Para trabajar con AJAX, es necesario un servidor que acepte peticiones HTTP (Apache, Apache Tomcat, IIS…)

Cargar el contenido de una página

En este ejemplo vamos a tener una página principal con dos botones y una etiqueta <div>. Además tendremos otras dos páginas llamadas Contenido1.html y Contenido2.html que tendrán un contenido diferente. Al hacer click en uno de los botones el Motor AJAX solicitará la página de contenido correspondiente y la cargará en el div.

contenido1.html

Esta página únicamente contendrá un contenido HTML

contenido2.html

Esta página únicamente contendrá un contenido HTML diferente a contenido1.html

index.html

Esta página contendrá dos botones (“Cargar Contenido 1” y “Cargar Contenido 2“) y una capa <div>. Dependiendo del botón que se pulse, el Motor AJAX solicitará al servidor la página correspondiente y cargará la respuesta en la capa.

La parte HTML de la página tendría entonces este aspecto:

Como vemos, los dos botones llaman a una misma función que crearemos ahora en la sección de script. Crearemos una función llamada MotorAJAX que recibirá una url por parámetro.

Vamos a explicar el código que acabamos de escribir. Tenemos que tener en cuenta que el núcleo del Motor de AJAX es el objeto de tipo XMLHttpRequest que, dependiendo del navegador, se iniciará como un ActiveXObject.

Una vez creada la petición, se abre la petición mediante el método open(), pasándole la url, el método HTTP y se le indica si la llamada es asíncrona. Por último se envía la petición mediante el método send().

Al ser una tarea asíncrona, hemos de tener en cuenta que la respuesta la recogeremos por medio de un Callback, es decir, una función que se encargue de manejar la respuesta cuando llegue. Para ello, el objeto XMLHttpRequest pasará por cuatro estados (readyState):

  1. El objeto se ha abierto (open) pero no se ha enviado (send)
  2. El objeto se ha enviado (send)
  3. Se está procesando la petición
  4. Respuesta recibida

El que suele interesar tratar es el estado 4. Por eso, antes de abrir la petición establecemos el evento onreadystatechange.

Por último cargamos la propiedad responseText en la capa “contenido”.

Cargar datos de un XML

En este ejemplo no vamos a cargar el contenido de una página, si no que lo que vamos a hacer es leer datos de un XML. Tendremos por un lado un archivo xml con datos y por otro una página con una etiqueta <select>.

cargaXML.html

Esta página únicamente tendrá un desplegable que cargará los datos de lenguajes.xml por medio de AJAX, por lo que el código del Motor AJAX, será muy parecido al anterior. Con una diferencia, en vez de recuperar “responseText“, recuperaremos “responseXML

Con estos dos ejemplos ya hemos visto cómo funciona el motor de AJAX, aunque, como he dicho, los frameworks de Javascript existentes ya tienen este motor integrado, pero siempre nos dejarán acceder al objeto XMLHttpRequest, por lo que conocerlo nos facilitará mucho las cosas.

¡Hasta la próxima!

Rupert.