Aprendiendo AJAX desde cero

AJAX es una tecnología usada para la web, permite la carga asíncrona de contenidos. Los que no sepais que es os pongo un ejemplo muy sencillo.

Si entráis a hotmail (no windows live), y queréis leer un mensaje, hacéis click en el enlace y tenéis que esperar a que cargue la nueva página. En gmail, por el contrario, pincháis en el mensaje que quereis leer y se despliega, no hace falta esperar a que cargue de nuevo toda la página.
El segundo método de carga usa AJAX, mientras que el primero es una petición al servidor de las de toda la vida.

AJAX no es nada por si mismo, es la unión de javascript, el objeto XMLHttpRequest y XML.

La arquitectura de una aplicación AJAX es la siguiente, se tiene un programa en javascript en el cliente, y este, mediante el objeto XMLHttpRequest se comunica con el servidor según convenga mostrando directamente el resultado en el cliente. No es necesario recargar la página, lo que se hace es ir cambiando el contenido dinámicamente sobre la misma página.

Cuando digo que se comunica con el servidor puede ser tanto desplegar una opción, como cambiar el texto de toda la página o mandar una petición al servidor para darnos de alta, cualquier cosa.

¿Cómo se crea el programa en javascript para poder comunicarse con el servidor? Pues lo primero es un método casi estándard, la creación del objeto XMLHttpRequest de la siguiente forma:

if(window.XMLHttpRequest) { obj=new XMLHttpRequest(); }
else {
try { obj=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { alert('El navegador no tiene el objeto XMLHttpRequest'); }
}

Después, para hacer las peticiones hay que usar un código como el siguiente:

obj.open('GET', 'registro.txt');
obj.onreadystatechange = tratarTexto ;
obj.send('');

Creado el objeto, mandamos (por el método GET) una petición al servidor del fichero registro.txt, cuando cambie el estado del objeto XMLHttpRequest se llamará a la función 'tratarTexto'. Esta función puede ser algo como lo siguiente:

if(obj.readyState==4){
respuesta=obj.responseText;
zonaRegistro=document.getElementById(zonaRegistro);
zonaRegistro.innerHTML=respuesta;
}

El estado 4 es el estado en el que la petición ha finalizado correctamente, en la documentación se pueden consultar los demás estados por si son necesarios.
Obtenemos el objeto que apunta al elemento de la página 'zonaRegistro' y lo rellenamos con la respuesta que hemos obtenido en el servidor.

Para terminar, supongamos que el registro que estábamos manejando arriba viene de un formulario, en lugar de mandarlo a un script en perl (por ejemplo) lo que hacemos es mandar una petición a dicho script mediante el objeto XMLHttpRequest. Por ejemplo:

<form name="formulario" action="javascript:peticionAJAX('script.pl', parametros);">

De esa forma podemos hacer una petición de registro al servidor mediante el script 'script.pl' y que cuando este termine y nos deje la información en 'registro.txt' devolvérsela al cliente, todo eso sin tener que recargar la página.

En este caso nos hemos comunicado con el servidor recibiendo tan solo texto, pero también se puede entregar el texto formateado en XML, es un poco más complejo, pero tampoco demasiado.