JS: quickAjax

AJAX para novatos... y no tanto.

AJAX o Asynchronous JavaScript and XML es una combinación de tecnologías (Javascript, XML y DOM) para que una página web respondan dinámicamente a eventos del usuario, sin necesidad de refrescar la página.

A pesar de que desde hace tiempo era posible crear soluciones parecidas, usando varios trucos de Javascript y HTML, tales como frames ocultas, iframes u otros, recién con la aparición del objeto javascript XMLHttpRequest se logró popularizar la utilización de estas tecnologías.

Gmail es un buen ejemplo del uso de estas técnicas.

Como toda tecnología, debe ser usada con cautela. No se recomienda abusar de la herramienta, sino usarla en las situaciones donde realmente es útil.

function quickAjax( url, func, send, extra ) {
	var method = send == null ? 'GET' : 'POST';
	var text = null;
	var req;
	if( window.XMLHttpRequest ) {
		req = new XMLHttpRequest();
		req.onload = function() {
			if( func ) func( req.responseText, extra );
			text = req.responseText;
		}
	} else {
		req = new ActiveXObject( 'Microsoft.XMLHTTP' );
		req.onreadystatechange = function() {
			if( func ) func( req.responseText, extra );
			text = req.responseText;
		}
	}
	try {
		req.open( method, encodeURI( url ), func ? true : false );
	} catch( e ) {
		return 'error en req.open';
	}
	if( method == 'POST' ) {
		req.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
		req.setRequestHeader( 'Connection', 'close' );
	}
	req.send( send );
	if( ! func ) return text;
}

Y se puede utilizar así:

<a href="javascript:alert( quickAjax( 'http://www.google.com' ) );">Que responde Google ?</a>

Que responde Google ?

Veamos las partes del código:

function quickAjax( url, func, send, extra ) {

La función recibe 4 parámetros:

url: la direccion de la página o CGI que se invoca internamente. Puede ser absoluta o relativa. Puede contener parámetros que se envian a la pagina por metodo GET.
func: la función que se invocará cuando el llamado termine.
send: los datos, cuando se invoca la pagina en modo POST.
extra: datos extras con que se invocará a func, para evitar el uso de variables globales.

	var method = send == null ? 'GET' : 'POST';

El metodo en que se efectúa el submit a la pagina se calcula segun el valor de send.

	if( window.XMLHttpRequest ) {

Si existe el objeto XMLHttpRequest, se utiliza. En el caso de Internet Explorer, es necesario usar ActiveXObject( 'Microsoft.XMLHTTP' ) que es la versión Microsoft del mismo objeto. El objeto XMLHttpRequest tiene el evento onload cuando termina la carga; en el caso de Microsoft.XMLHTTP es necesario capturar el evento onreadystatechange.

		req.onload = function() {
			if( func ) func( req.responseText, extra );
			text = req.responseText;
		}

La respuesta de la pagina queda almacenada en req.responseText y se gatilla el evento onload; es por esto que debemos configurar que este evento ejecute la función que nosotros hemos proveido, con los parámetros adecuados.

	try {
		req.open( method, encodeURI( url ), func ? true : false );
	} catch( e ) {
		return 'error en req.open';
	}

Ahora por fin ejecutamos el submit, usando el metodo req.open. Notar que es necesario capturar los posibles errores que se produzcan.

	if( method == 'POST' ) {
		req.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
		req.setRequestHeader( 'Connection', 'close' );
	}

Cuando enviamos información a través del método POST es necesario informale al servidor a través de estos encabezados, para que la interprete correctamente.

	req.send( send );

Si es que hay algún dato que enviar (método POST) lo enviamos con el método req.send.

	if( ! func ) return text;
}

Finalmente, si no hemos definido una función para capturar el resultado del submit, retornamos el resultado.