Búsqueda personalizada

27 noviembre 2007

Ajax Simple


Vamos a ser breves, concisos y prácticos.


Ajax = Asynchronous JavaScript And XML (JavaScript asíncrono y XML), según Wikipedia.

Lo más útil = XMLHTTPRequest.

¿Qué es? Es una clase javascript con los siguientes atributos:

  • readyState.
  • responseText.
  • responseXML.
  • status.
  • statusText.

Quedémonos con: readyState y con responseText.

Veamos readyState: Define el ciclo de vida por el que pasa una petición:



Gracias a estos valores, disponibles en readyState, podremos tomar una decisión teniendo en cuenta el valor de este atributo.

Ahora veamos responseText. Cuando hacemos una petición a una URL determinada, ésta pasará por los anteriores estados. Cuando readyState = 4, (petición completada), el atributo responseText contendrá los datos que existan en dicha URL.

Terminando con un ejemplo práctico...

Estoy en la bandeja de Gmail. Hagamos dos divisiones. Por un lado todo el menú y entorno Gmail (zona verde). Por otro la zona que deseamos actualizar (zona roja) cuando vayamos a leer un email, sin recargar la zona verde.



¿Cómo operaríamos?

bajo javascript crearíamos una función que se llamase al hacer click sobre un email a leer y que crease un nuevo objeto XMLHTTPRequest:

mipeticion = new XMLHttpRequest ();

Tras esto, debemos realizar la petición de lectura de nuestra URL, pongamos, por ejemplo, un archivo .html local en nuestro servidor:

mipeticion.open('GET','miarchivo.html',true);

siendo 'GET' el método de petición, 'miarchivo.html' el archivo a cargar y true establece el modo de forma asíncrona.

Finalmente, y tras esto, bastaría con esperar a que el estado llegase a completado. El comportamiento en cada cambio de estado viene definido por el atributo "onreadystatechange" y suele asignarse a una función que comprueba en qué estado está nuestra peticion. Así, mientras estamos en 1 (loading), podemos mostrar la típica etiqueta "Cargando..." En otras palabras:

mipeticion.oreadystatechange = function(){
if (mipeticion.readyState == 1) { mostramos la etiqueta}
else{ if (mipeticion.readyState == 4) {cargamos la página dentro del div. "contenedor"}


Esta última parte se llevaría acabo mediante la típica asignación (o de forma similar):

document.getElementById('contenedor').innerHTML =mipeticion.responseText;

Debemos decir que lo anterior expuesto es una idea muy simple de la técnica Ajax y, sin duda, un buen manejo de la misma requiere leer mucho y estudiar muchos ejemplos.

1 comentario:

Wilfo dijo...

Me gusto mucho tu tutorial .