Introducción a Ajax (II)

En el artículo anterior vimos la forma de obtener el objeto XMLHTTP en la mayor parte de los navegadores para después crear nuestra primera aplicación Ajax. Sin embargo, a pesar de conseguir que la aplicación funcionase sin problemas, no comentamos nada acerca del funcionamiento de dicho objeto.

A continuación vamos a ver detalladamente las principales propiedades y métodos del objeto XMLHTTP para comprender mejor su funcionamiento.

Vamos a recordar la función genérica "enviaPeticion" que habíamos creado para hacer llamadas Ajax, ya que esta es la que utiliza todos los métodos y propiedades del objeto XMLHTTP que necesitaremos en un principio.

 1  function enviaPeticion(url,callback) {
 2  	objAjax = getXMLHTTP();
 3  	objAjax.open("GET",url,true);
 4 	objAjax.onreadystatechange = function() {
 5 		if (objAjax.readyState == 4) {
 6 			callback(objAjax.responseText);
 7 		}
 8 	}
 9 	objAjax.send(null);
10 }

En primer lugar, el método open (línea 3). Sirve para especificar algunos atributos de la petición HTTP:

• El método de envío HTTP: POST, GET, HEAD, PUT, etc.
• La URL a la que se enviará la petición HTTP .
• Por último, un valor booleano especificando si se esperará la respuesta de forma asíncrona o no. El valor true indica que se continuará procesando el script después de la llamada al método send() del objeto XMLHTTP sin esperar respuesta. Sin embargo, el valor false indica que se esperará una respuesta antes de continuar procesando el script.

En segundo lugar, la propiedad onreadystatechange (línea 4), que nos servirá para especificar el manejador del evento que se lanza con cada cambio de estado. Esta es la propiedad que nos permite definir nuestro callback controlando que el estado que se ha alcanzado después del cambio es el correcto.

La propiedad readyState (línea 5), que devuelve el estado actual de la petición. Los estados pueden ser:

• 0 = sin inicializar
• 1 = conexión abierta. Después de llamar al método open.
• 2 = enviado. Después de llamar la método send.
• 3 = recibiendo.
• 4 = cargado. Cuando se han terminado de recibir los datos de respuesta.

La propiedad responseText (línea 6), que nos devuelve el mensaje de respuesta que se ha recibido en un string.

Por último, aunque no por ello menos importante, el método send (línea 9), que envía finalmente la petición HTTP. Una vez ejecutado este método se seguirá procesando el script (o no) en función de lo que hayamos indicado con el método open.

¿Y ya no hay más métodos ni propiedades?

Existen algunas propiedades más del objeto XMLHTTP que no hemos utilizado en el ejemplo pero que podrían sernos útiles en otros casos. Por ejemplo:

• La propiedad responseXML. Al igual que responseText devuelve el mensaje de respuesta que ha sido recibido pero, en este caso, lo devuelve como un objeto de documento XML (XML DOM). Esto nos permite examinar la respuesta utilizando los métodos y propiedades del DOM del W3C para manejo de árboles.
• La propiedad status. Devuelve el código de estado HTTP (status code). Por ejemplo, 404 para "Not found" o 200 para "OK".
• La propiedad statusText. A diferencia de la anterior, esta propiedad nos proporciona el texto asociado al código de estado que acabamos de ver.

Con esta breve descripción de los métodos y propiedades del objeto XMLHTTP y el ejemplo que veíamos en el artículo anterior, seguro que ya podemos empezar a imaginar montones de utilidades basadas en Ajax que podríamos implementar.