Laboratorio: barra de progreso mediante Ajax

Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.

Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.

Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto “1-” cuando lleve el 5% habrá devuelto “1-2-3-4-5-“. Parseando esto podemos saber por el último número cuanto lleva ejecutado.

El PHP sería el siguiente:

for($i=0; $i<10000000; $i++) {
if ($i%10000 == 0) echo ((int) $i/100000).'-';
flush();
}

Y el javascript sería así:

function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
function prueba () {
ajax = ajaxobj();
ajax.open("GET", "res.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState == 3) {
// Mostramos porcentaje
var res = ajax.responseText;
res = res.split('-');
alert(res[res.length-2]);
} else if (ajax.readyState == 4) {
// Fin
alert('FIN');
}
}
// Enviamos algo para que funcione el proceso
ajax.send(null);
} 

Como no hay nada perfecto, y menos aún Internet Explorer, sólo he sido capaz hacer que funcione en FF, Opera, Safari y Chrome.