Tutorial básico de AJAX

Por Maikel González Suárez | 2008-03-28 | ajax, javascript

Audiencia y Prerrequisitos

Este tutorial cubre los principios básicos de AJAX. Se requiere conocer de antemano CSS, DHTML y Javascript.

¿Qué es AJAX?

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo Web para crear aplicaciones interactivas o RIA (del inglés, Rich Internet Applications).

Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.

AJAX es la combinación de:

Hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.
Document Object Model (DOM) accedido generalmente mediante Javascript, para mostrar e interactuar dinámicamente con la información presentada.
El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor web.
XML es el formato usado comúnmente para la transferencia entre el servidor y el cliente, sin embargo, puede usarse cualquier formato, tales como: texto plano, HTML y JSON.

En el grafico siguiente se muestra como trabaja todo en conjunto.

Llamando al servidor

Una vez que haya ocurrido un evento del DOM en la página Web, se necesita obtener un objeto XMLHttpRequest. Como requisito es necesario escribir un código Javascript entendible por distintos los navegadores. Nótese además que la función de retorno que procesará la respuesta del servidor esta asociada al método onreadystatechange.

 
var obj;
 
function generaPeticion(url) {
  // objecto nativo
 
  if (window.XMLHttpRequest) {
    // Obtener un nuevo objeto
    obj = new XMLHttpRequest();
    // Indicar la funcion de retorno
    obj.onreadystatechange = procesaRespuesta;
    // Método  GET con la url; "true" para asincronica 
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
  } else if (window.ActiveXObject) {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) {
      obj.onreadystatechange = procesaRespuesta;
      obj.open("GET", url, true);
      obj.send();
    }
  } else {
    alert("Su navegador no soporta AJAX");
  }
}

Aquí están los atributos y métodos para la clase XMLHttpRequest.

Atributos

readyState	El código readyState toma valores entre 0 y 4 durante una petición: 0: no inicializada. 1: conexión establecida. 2: petición recibida. 3: procesando. 4: petición completada y respuesta lista.
status	200: "OK" 404: Página no encontrada
onreadystatechange	Método de retorno asignado por medio de este atributo.
responseText	Devuelve la respuesta como una cadena.
responseXml	Devuelve la respuesta como datos XML.

Métodos

open (mode, url, boolean)	mode: Tipo de petición: GET o POST url: Localización del fichero remoto. boolean: true (asincrónico) o false (sincrónico).
send ("string")	null para un comando GET

El siguiente ejemplo muestra una función de retorno registrada por medio del atributo onreadystatechange.

 
function procesaRespuesta() {
    // 4 significa que se ha devuelto una respuesta y está lista para ser procesada
    if (obj.readyState == 4) {
        // 200 significa "OK"
        if (obj.status == 200) {
            // cualquier operación para procesar los datos
        // cualquier cosa contraria significa un problema
        } else {
            alert("Ha ocurrido un problema en el retorno de datos");
        }
    }
}

El resto de las piezas

Después de haber visto las funciones que permiten hacer una petición asincrónica al servidor y luego procesarla, se presentará una aplicación simplificada para mostrar la integración de todas las piezas. Dicha aplicación simula el uso de frames. Posee un menú de navegación que tiene asociado al evento onClick la llamada a una función que activa la petición asincrónica para cada una de las opciones del menú tal como se muestra a continuación.

 
<body>
<h2>Menú de navegación AJAX</h2>
<ul id="menu">
<li onclick="generaPeticion ('pagina1.html')">Opción 1</li>
<li onclick="generaPeticion ('pagina2.html')">Opción 2</li>
<li onclick="generaPeticion ('pagina3.html')">Opción 3</li>
<ul>
<div id="contenido"></div>
</body>

Véase que no se ha utilizado la etiqueta de vínculos sino que la activación de la petición se realiza cuando ocurre el evento onclick para la etiqueta li.

El resultado de la petición se encargará de procesarlo la función procesaRespuesta(), los datos recibidos serán del tipo html, de manera tal que tan sólo queda insertarlos en página.

 
function procesaRespuesta() {
    if (obj.readyState == 4) {
        if (obj.status == 200) {
         // Actualiza el contenido apoyándose en el método innerHTML
          document.getElementById('contenido').innerHTML = obj.responseText;
        } else {
            alert("Ha ocurrido un problema en el retorno de datos");
        }
    }
}