Barra de Progresso com AJAX

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.

Por Programação Pular para comentários

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.

Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Quantos celulares a Motorola tem em linha?
5(14,46%)
10(55,60%)
15(11,61%)
20(9,57%)
26(8,76%)