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++) {
  if ($i%10000 == 0) echo ((int) $i/100000).'-';
  flush();
} 

E o JavaScript seria assim:

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 o percentual 
   var res = ajax.responseText;
   res = res.split('-');  
   alert(res[res.length-2]);  
  } else if (ajax.readyState == 4) {  

  // Fim
  alert('FIM');  
 }  
}  

 // Enviamos algo para que o processo funcione
 ajax.send(null);  
}  

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

Fonte: Imasters