AJAX 101

Jelou banda...

Si, AJAX está de moda y todos llevamos la bandera puesta, pero vamos a empezar desde cero para comprender que es esta nueva tecnología...

¿Qué es?

AJAX : Acrónimo de "Asynchronous JavaScript And XML", traducción: JavaScript y XML Asíncrono.

Entendámoslo... AJAX no es ningún nuevo lenguaje de programación, es simplemente una aproximación innovadora que viene a revolucionar el transporte de datos en la web de nuestros dias. La piedra angular de AJAX está en su asincronía.. me voy a explicar:

Anteriormente las páginas web nos permitían intercambiar datos con los servidores de la siguiente manera: Uno le daba click a un link y entonces nuestro navegador hacia una petición HTTP al servidor, la página se recargaba y mostraba la nueva página. Llamemos a esto el método tradicional. Este método no requiere de programación alguna para intercambiar datos con el servidor pues es soportado nativamente por los motores HTTP de los navegadores. Vaya, era la forma natural de ver una página web...

AJAX propone una nueva forma de intercambiar datos con el servidor, digamos que utiliza el motor HTTP de los navegadores desde JavaScript, lo cual nos permite hacerlo en base a eventos y a la hora que se nos dé la gana y hacer con la respuesta del servidor lo que se nos antoje, incluso modificar el contenido de nuestra página dinámicamente.

Vamos a verlo de una forma gráfica:

En el modelo tradicional hay un tiempo muerto en el cual se está cargando la página mientras los datos van, vienen o se procesan en el servidor. Este tipo de comportamiento dejaba mucho que desear en cuanto a experiencia de usuario se refiere. Pero esto no es lo mejor de todo... Como alcanzan a ver, los datos transportados en el modelo tradicional incluyen hojas de estilo, scripts e incluso todo el documento xhtml lo cual hacían el tiempo de espera mayor debido a que los datos eran muchos.

Con el modelo asíncrono, las peticiones se procesan y transportan de tal manera que el usuario no percibe un cambio en la página, y los datos transportados son pequeños, pues las respuestas por lo general no incluyen todo lo que el otro modelo si.

Al parecer esto no es cosa del otro mundo, es solo un método distinto de comunicación con el servidor. En realidad esto es revolucionario debido a las posibilidades que ofrece:

Las aplicaciones web ahora gracias a AJAX y a los frameworks de JavaScript de interfaz de usuario permiten el desarrollo de aplicaciones web muy similares a las de escritorio sin el bemol de la experiencia de usuario lenta e incómoda que la web ofrecía anteriormente. También rompió las barreras de la compatibilidad de software y sistema operativo, y le dijo adios a la instalacion de programas en cada maquina.

Si eres un lector casual, hasta aquí puedes leer si gustas... si te interesa desarrollar básandote en AJAX por favor continua.

Lado técnico

Todo esto se oye muy lindo, pero ¿cómo lo pongo en práctica? Bueno, para empezar tienes que tener sólidos conocimientos de JavaScript y HTML, ahora que si vas a procesar datos dinámicamente en el servidor un lenguaje como PHP o ASP no vendrían mal.

El motor HTTP que utiliza AJAX es un objeto llamado XMLHttpRequest el cual hace las peticiones GET (por url) y POST (con datos de formularios) y recibe una respuesta. Este objeto es el que vamos a manejar en JavaScript, pero primero tenemos que encontrarlos. Esto va a depender del navegador que el usuario utilice. Una vez más Internet Explorer sobresale por su falta de compatibilidad con los estándares y debido a esto, el objeto XMLHttpRequest en Internet Explorer es un control ActiveX, a diferencia de un objeto nativo.

Así se obtiene el objeto XHR cross-browser:

Código:

Ahora, este objeto tiene unas cuantas propiedades y métodos que vamos a examinar:

XMLHttpRequest.onreadystatechange : Este evento se dispara cada vez que hay un cambio en el estado de nuestra petición y modifica la propiedad readyState del objeto.
XMLHttpRequest.readyState : Esta propiedad contiene un número del 0 al 4 con los siguientes significados:

Estado	Desripción
0	La petición no ha iniciado
1	La petición está lista para enviarse
2	La petición se envió
3	La petición se está procesando en el servidor
4	La petición se completo y arrojó una respuesta

XMLHttpRequest.responseText : Esta propiedad contiene la respuesta que la petición arrojó en formato de texto. Está disponible cuando el readyState llegó a 4.
XMLHttpRequest.open(método,url,modo) : Este método es el que nos sirve para hacer nuestra petición. El parámetro método puede ser "POST" o "GET" dependiendo de que tipo de petición que hagamos. Si solo vamos a solicitar texto, usaremos GET, si vamos a enviar datos para procesarlos usaremos POST. El parámetro url es obviamente la página a la que haremos la solicitud relativo a nuestra página donde estamos ahora. El parámetro modo puede ser true ó false y especifica que nuestra petición se va a manejar asíncronamente. Siempre debe estar en true...
XMLHttpRequest.send(datos) : Este método es el que envía los datos junto con nuestra petición. Si el método de nuestra petición es GET, el parámetro datos debe ser null, y si es POST deberá contener nuestra postdata de la siguiente manera: "dato1=valor1&dato2=valor2..." y así sucesivamente. Remarco que la petición no se envía hasta que se llama a este método.

A partir de esto, ya podemos crear nuestro primer script AJAX con lo siguiente:

Código:

<html>
<head>
<script type="text/javascript">
function GetXmlHttpObject() {
var objXMLHttp = null;
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp
}
function ajax() {
var ajaxXHR = GetXmlHttpObject;
ajaxXHR.onreadystatechange = function() {
document.getElementById('contenedor').innerHTML = ajaxXHR.responseText;
}
ajaxXHR.open('GET','ajax.htm',true);
ajaxXHR.send(null);
}
</script>
<body>
<p id="contenedor">Esto es una prueba de AJAX</p>
<p>Si quieres ver AJAX en acción, da click
<a href="#" onclick="ajax(); return false;">aquí</a>.
</p>
</body>
</html>

El script hará una petición HTTP al servidor solicitando el contenido de la página ajax.htm y pondrá su contenido en el primer párrafo de nuestra página al hacer click en el link.

Por ahora será todo lo que diré acerca de AJAX... pronto publicaré tutoriales más específicos para sacarle el mayor provecho a esta nueva tecnología.

Fuente: Mi Blog -> Ajax 101
Hasta la próxima...