Barra de Progresso com AJAX

Uma das necessidades com que nos deparamos na hora de realizar projetos longos na web é indicar ao usuário
o quanto é preciso esperar. Às vezes é bastante complicado criar uma
barra de progresso que mostre o estado atual do processo que está sendo
executado.

Uma forma de realizar essa tarefa é usando AJAX.
Fazemos uma chamada AJAX que executa a ação, e quando o objeto AJAX tem
o estado LOADING (readyState == 3), podemos obter a resposta do script chamado e passá-lo para mostrar o percentual da ação que está sendo realizada.

Para isso, desenvolveremos um script (res. php,
por exemplo) que devolva a porcentagem seguida por um hífen. Por
exemplo, quando passar por 1% será retornado pelo script “1-“, quando
passar por 5% será retornado “1-2-3-4-5”. Processando isso podemos
saber, através do último número, o percentual já processado.

O PHP seria o seguinte:

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

E o JavaScript seria assim:

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

Como não existe nada perfeito, e menos ainda o Internet Explorer, esse script só funcionou no Firefox, Opera, Safari e Chrome.