Barra de Progresso com AJAX

Comente abaixo Jonathan Lamim (@jlamim)

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

Uma das necessidades que nos deparamos na hora de realizar projetos longos na web é indicar ao usuário o quanto é preciso esperar. Às vezes é bastante complicado criar um barra de progresso que mostre o estado atual do processo de 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 passa por 1% será retornado pelo script "1-", cuando 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.

 
Esta informação foi útil?
0 0
Relacionados
Comentários
Recentes
últimos reviews
  • 6,0
    [Vídeo] Review Samsung Galaxy Gran Prime Duos TV
    Testamos nestas 2 últimas semanas o Samsung Galaxy Gran Prime Duos TV, a nova aposta da marca sul-coreana no mercado de ...
  • 6,7
    Review Zenfone 6
    Maior aparelho da família Zenfone está no Brasil por R$ 999,00 e espera alcançar a mesma popularidade do Zenfone 5.
  • 8,1
    Review Samsung Galaxy S5
    O smarphone primogênito da família Galaxy é a evolução de seus descendentes, evolução porque não há grandes novidades, m...

TOPO