Fila de Requisições em Ajax
O Ajax está amadurecendo. Hoje já se vê aplicações bem pensadas, onde deveriam estar. Sempre tem o pessoal que abusa, mas já diminuiu muito. Estamos caminhando na direção certa.
Já faz um certo tempo que não falo nesse assunto, mas hoje estou de volta, nem que seja só por agora. Vamos ver como fazer um fila de requisições, pra que todas sejam completadas sem interferência.
Preparação
A fila de requisições baseia-se em uma variável (lógico). Usaremos um simples array:
var fila = new Array();
Precisaremos também de duas funções, uma que coloca a requisição na fila, e outra que executa a fila em ordem.
Colocando na Fila
Para colocarmos um item na fila, usaremos a função queueAjax, descrita abaixo.
var queueAjax = function(id, url) {
// Usando o id, você pode colocar um carregando:
document.getElementById(id).innerHTML = "Carregando...";
// Adicionando nossa requisição:
fila.push([id, url]);
// Não tendo requisições pendentes, lançamos outra função
if(fila.length > 1) executeQueue();
}
Analisando: colocamos id e url na fila, de uma forma ou outra. Se não houverem mais que uma requisição na fila, executamos a função executeQueue() (sem argumentos mesmo). Ela se encarregará de todo o resto.
Executando cada Requisição…
Não precisaremos executar cada requisição manualmente (lógico, a fila é pra isso). Usaremos a função executeQueue() pra isso. Neste momento, estou assumindo que você tem a variável xmlhttp configurada como um objeto XMLHttpRequest.
var executeQueue = function() { var current = fila.shift(); // Retiramos o primeiro membro do array xmlhttp.open("GET", current[1], true); xmlhttp.onreadystatechange = function() { // Aqui você cuida dos readyStates // Quando for 4: (não coloquei o código, poupando espaço) document.getElementById(current[0]).innerHTML = xmlhttp.responseText; // Tá pronto, e passamos ao próximo item, se houverif(fila.length > 0) setTimeout(executeQueue, 100);} xmlhttp.send(null); }
Analisando de novo: fazemos nossa requisição como sempre (poupei código, também pra prevenir Ctrl + C e V). Note que tiramos o primeiro item do array, e colocamos em uma variável.
Quando a nossa requisição atual estiver prontinha, e o resultado no lugar, podemos executar a próxima (se houver), sem que precisemos fazer nada.
Usando tudo isso
Pra usar você só vai precisar chamar uma função: queueAjax(id, url), pra cada requisição que você quiser fazer. Nada mais.
Você também pode estender muito mais esse script, colocando opções, tratamento para as saídas… Dê asas a sua criatividade.







Só pra intender, essa fila de requisições é estática né? Você só executa tudo depois de chamar o método “executeQueue”, correto? Se for tá maneiro. Ahh detalhe, apesar de perdido no início, gostei muito do visual novo…
Sim, só executa com o executeQueue, mas não é necessário chama-lo (quando não está em executação, a função chama, senão ele “se chama” por si só).
O visual novo é legal mesmo. Já tinha visto em outro site e gostei.
Instanciar um NOVO xmlhttprequest para cada requisição não é melhor não julio?
Assim como eu faço naquela minha função simples?
Sei não Micox. Vamos pesquisar.
Tem algo que eu não estou entendendo em sua programação…
if(fila.length > 1) executeQueue(); —> Ele só chama a função executeQueue() se tiverem duas requisições na fila…
Minha pergunta é: E se eu clica apenas uma vz msm?? se eu fizer apenas uma requisição???
vlw!!!
Julio,
Consegui!!! fiz de outra maneira, mas o seu código me ajudou e muito!!!
Obrigadão!