Barra de Progresso com AJAX
Canal: JavaScript | Autor: Jonathan Lamim Antunes | Publicado em: 27/04/2009 | Views: 3.082Uma 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%3C10000000; $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 obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado
crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra.
Você não pode criar obras derivadas.
jQuery Rating - Sistema de vot.
Com a biblioteca do jQuery podemos cri. Próximo artigo
Exibindo Data e Hora na Página
Esta coluna mostra a função em Java Sc.
Veja matérias relacionadas com o assunto:
| 12/03/2010 | Validando CPF através de JavaScript |
| 17/02/2010 | Definição de AJAX |
| 28/12/2009 | Exibindo Data e Hora na Página |
| 10/08/2009 | PNG transparente no IE (não é PNGfix) |
| 05/08/2009 | jQuery.noConflict(), evitando conflito com outras biliotecas |
| 03/08/2009 | jQuery e o conflito com outras bilbiotecas |
| 16/07/2009 | A função jQuery ou função $() |
| 11/07/2009 | Exportando tabelas HTML para o Excel com jQuery |
| 10/07/2009 | Mensagem de Carregando… com Ajax e jQuery |
| 15/05/2009 | Alternar entre campos de formulário com a tecla ENTER |









Da pra saber quando vai terminar de carregar, etc. Parecido com Flash =D