Bleg - Interactividad, Usabilidad y Web » Blog Archive » AJAX en 30 segundos

AJAX en 30 segundos

15 de Diciembre, 2007

Me parece que mucho material sobre AJAX un tanto alarmista.... no sé... lo complican demasiado, al menos a mi parecer. Muchas personas han estado utilizando métodos similares mucho antes de que a alguien se le ocurriera llamarlo AJAX. Y realmente no es tan complejo como muchos lo hacen ver.

Así que para muestra un boton:

JavaScript:
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(action) {
http.open('get', 'rpc.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|') != -1) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}

Esto crea varios objetos para recibir y enviar la petición así como una función para manejar la respuesta. Podés incluir este js en tu página si querés. Ahora.. para hacerlo funcionar es necesario ejecutarlo con un evento onClick o a un href común como este:

HTML:
<a href="javascript:sndReq('foo')" xhref="javascript:sndReq('foo')">[foo]</a>

Esto significa que cuando alguien haga clic en esta liga lo que sucederá será es que se envie una solicitud a rpc.php?action=foo.

Y en rpc.php deberías tener algo como esto:

PHP:
switch($_REQUEST['action']) {
case 'foo':
/* HACER ALGO! */
echo "foo|foo done";
break;
...
}

Ahora... analicemos un segundo el handleResponse. Lo que hace es que parsea el string “foo | foo done” y lo corta en el "|" y usa lo que sea que esté antes del "|" como el ID del elemento DOM en la página y lo que esté despues como el nuevo innerHTML de ese elemento.

Esto significa que si tenés un div como este en la página:

HTML:
<p id="foo">&nbsp;</p>

Cuando des clic en el link, dinámicamente va a cambiar a:

HTML:
<p id="foo"> foo done</p>

Y eso es todo. Lo que sigue es solo agregar y construir sobre esto. Reemplazando la simple respuesta "id | contenido " con una sintaxis XML más rica y/o hacer la petición más compleja tambien. Antes de instalar a ciegas una librería AJAX, dale un vistazo para ver si hace lo que necesitas, que muchas veces son más de lo que se requiere y el usuario termina descargandolas gratuitamente.