JOURMOLY

XHR es un Wrapper del objeto XMLHttpRequest de javascript, el cual generalmente se utiliza para aplicar AJAX a nuestros sistemas. Es la clase padre de AJAX.js y Json.Remote.js. Además de la explicación que sigue, podés consultar los ejemplos que preparé.

Creando un objeto XHR

1

var mooXHR = new XHR({opciones});

Opciones

method
Puede ser get o post y es el método de envío de la info. Si trabajamos con php y usamos get como método, encontraremos las variables pasadas mediante XHR en $_GET['variable'], de lo contrario, en $_POST['variable']. El valor predefinido es post.

1
2
3
4

var mooXHR = new XHR(
{
	method:'get'
});

async
true o false. Indicando true, las peticiones se realizan de manera asíncrona por lo que debemos utilizar eventos(que veremos en breve) para saber cuando se finalizan(para bien o para mal). Si se indica false, por lo que leí en el foro de mootools, las peticiones podrían trabajar como cualquier otra función sin necesidad de los eventos, pero a decir verdad no logre hacerlo funcionar. Leí también que esta segunda opción era algo experimental y que se recomendaba utilizar el método asincrónico junto con los eventos como generalmente se hace cuando aplicamos AJAX. Si no se indica nada, el valor predefinido es true.

encoding
La codificación de caracteres que deseamos utilizar. El valor predefinido es utf-8.

1
2
3
4
5

var mooXHR = new XHR(
{
	method:'get',
	encoding:'iso-8859-1'
});

autoCancel
true o false. Indicando true, si hay una petición en curso y enviamos otra, la primera se cancela. El valor predefinido es false.

1
2
3
4
5

var mooXHR = new XHR(
{
	method:'get',
	autoCancel:true
});

headers
Puede ser un objeto, y nos permite indicar las cabeceras de nuestra petición.

1
2
3
4

var mooXHR = new XHR(
{
	headers:{'X-Request':'JSON'}
});

Eventos

onRequest
Es la función que se ejecuta ni bien se envía la petición. Lo podemos usar para mostrarle al usuario un mensaje de “Cargando…”, una imagen, etc.

1
2
3
4
5
6
7

var mooXHR = new XHR(
{
	onRequest: function()
	{
		$('resultado').setHTML('Cargando...');
	}
});

onSuccess
Se ejecuta cuando finaliza la petición, cuando ya estamos listos para mostrar el resultado.

1
2
3
4
5
6
7

var mooXHR = new XHR(
{
	onSuccess: function()
	{
		$('resultado').setHTML('Terminó la petición...');
	}
});

onFailure
Se ejecuta cuando el objeto XMLHttpRequest devuelve un error y no se puede completar la petición.

1
2
3
4
5
6
7

var mooXHR = new XHR(
{
	onFailure: function()
	{
		$('resultado').setHTML('Algo anduvo mal');
	}
});

Propiedades

running
Vale true si hay una petición en curso.

response
Cuando finaliza la petición, response contiene la respuesta. Es un objeto con dos valores, xml y text. Si la respuesta es un objeto XML, debemos tomarla con response.xml, de lo contrario, podemos tomar nuestro resultado con response.text.

1
2
3
4
5
6
7

var mooXHR = new XHR(
{
	onSuccess: function()
	{
		$('resultado').setHTML(this.response.text);
	}
});

Métodos

setHeader(nombre, valor)
Nos permite agregar o modificar las cabeceras de la petición.

1
2
3
4
5
6
7
8

var mooXHR = new XHR(
{
	onSuccess: function()
	{
		$('resultado').setHTML(this.response.text);
	}
});
mooXHR.setHeader('X-Request', 'JSON');

send(url, querystring)
Con send enviamos la petición, necesita como parámetros una url y el string que deseamos enviar junto con la petición. El string debe ser de un formato como variable=valor&variable2=valor2 o bien null si no deseamos enviar nada.

1
2
3
4
5
6
7
8

var mooXHR = new XHR(
{
	onSuccess: function()
	{
		$('resultado').setHTML(this.response.text);
	}
});
mooXHR.send('script.php', 'variable=valor&variable2=valor2');

cancel
Si hay una petición en curso, la cancela.

1
2
3
4
5
6
7
8
9

var mooXHR = new XHR(
{
	onSuccess: function()
	{
		$('resultado').setHTML(this.response.text);
	}
});
mooXHR.send('script.php', 'variable=valor&variable2=valor2');
mooXHR.cancel();

Ejempo de uso

1
2
3
4
5
6
7
8
9
10
11
12
13

var mooXHR = new XHR(
{
	method:'get',
	onRequest: function()
	{
		$('respuesta1').setHTML('Enviando...');
	},
	onSuccess: function()
	{
		$('respuesta1').setHTML(this.response.text);
	}
});
mooXHR.send('recibe.php','ejemplo=uno');

En nuestro ejemplo utilizamos como método get. Cuando se inicia la petición mostramos un mensaje de “cargando…” para el usuario, y cuando se finaliza, mostramos el resultado enviado por nuestro script en el div con id respuesta1. Nuestro script es recibe.php y le enviamos la variable ejemplo con valor uno. El código de recibe.php es el siguiente:

1
2
3

< ?php
echo 'Enviado por PHP para el ejemplo ' . $_GET['ejemplo'];
?>

Ver los ejemplos

Popularity: 5% [?]

Otros artículos

• W3C Validator se renueva?
• Visor de efectos con Mootools
• Sistemas de control de versiones
• attachSound y LoadMovie
• Mootools y el DOM, cuarta y última parte