Para los que todavía no hayan oído hablar de Ajax, antes de nada vamos a explicar un poco por encima lo que es. Para empezar, Ajax es el acrónimo de "Asynchronous JavaScript And XML" (en español, JavaScript y XML asíncrono).
Ajax es básicamente la combinación de varias de las tecnologías ya existentes como son XHTML, CSS, JavaScript y XML (es decir, nada nuevo) junto con el objeto XMLHTTPRequest (que tampoco es precisamente nuevo). Este último objeto es el que permite que desde el navegador del cliente se mantenga una comunicación asíncrona con el servidor y transparente para el usuario.
Es decir, el objeto XMLHTTPRequest ayudado por un poco de JavaScript nos va a permitir comunicarnos con el servidor desde el navegador del cliente para después hacer cambios sobre la página web sin necesidad de recargarla, ganando en velocidad e interactividad.
¿Y cómo hago una llamada Ajax?
Primero hay que crear el objeto XMLHTTPRequest. Puesto que este objeto se consigue de forma diferente en cada navegador, lo mejor es crear una función genérica a la que llamemos cada vez que lo necesitemos y hacerla cross-browser, es decir, de forma funcione en todos los navegadores o, mejor dicho, en el mayor número posible de ellos y sobre todo en los más comunes (Internet Explorer y Firefox).
Podéis utilizar la siguiente función que os propongo, donde se consigue que sea lo más «cross-browser» posible a base de utilizar expresiones try-catch. Es una formula muy común de conseguir el objeto XMLHTTP, por lo que probablemente la veréis en muchos otros sitios.
function getXMLHTTP(){
var obj = null;
try {
obj = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2) {
obj = null;
}
}
if (!obj && typeof XMLHttpRequest != "undefined") {
obj = new XMLHttpRequest();
}
return obj;
}
Una vez que tenemos el objeto sólo falta utilizarlo para hacer una llamada al servidor y utilizar los datos que nos devuelva dentro de la página. Lo mejor y lo más limpio es tener otras dos funciones JavaScript más: una que haga la llamada propiamente dicha y otra (el callback) que es llamada cuando el navegador cliente recibe los datos de respuesta.
Primero vamos a preparar nuestro callback, que en este ejemplo recibirá los datos y los mostrará por pantalla mediante un simple alert para no complicarnos demasiado con los detalles.
function miCallback(respuesta) {
alert(respuesta);
}
En segundo lugar vamos a crear la función que envía las peticiones al servidor utilizando el objeto Ajax. Vamos a tratar de hacer una función genérica preparándola para que reciba dos parámetros: la url a la que enviaremos la petición primero y la función callback después.
function enviaPeticion(url,callback) {
objAjax = getXMLHTTP();
objAjax.open("GET",url,true);
objAjax.onreadystatechange = function() {
if (objAjax.readyState == 4) {
callback(objAjax.responseText);
}
}
objAjax.send(null);
}
Para probar el código, vamos a crear una página nueva (yo la he llamado «ajaxTest.htm«) que contenga un texto (el que queramos). A continuación creamos otra página donde introduciremos las funciones que hemos estado creando entre etiquetas script dentro del head y colocaremos el siguiente enlace en el cuerpo del documento.
<div>Pulsa <a href="#" onclick="enviaPeticion('ajaxTest.htm',miCallback)">aquí</a> para enviar la petición.</div>
Ahora ya estamos listos para probar nuestra primera aplicación Ajax. Pinchando en el enlace, el alert de nuestro callback nos mostrará el texto que habíamos introducido en el fichero «ajaxTest.htm«.
En próximos tutoriales veremos cómo podemos utilizar lo que hemos aprendido aquí para hacer alguna otra aplicación con más utilidad.