Contruindo uma fila de requisições em Ajax

Olá pessoal,

Estou passando um passo a passo de como se criar uma fila de requisições e Ajax, pois como eu acredito que vcs já saibam, se vc fizer muitiplas requisições no Ajax ao mesmo tempo com o mesmo objeto Xmlhttprequest da merda….

Abaixo vai um trecho do artigo do Elcio Ferreira sobre o assunto

****************************

Para começar criamos nossa fila de conexões, um Array, e uma variável com o índice do elemento da fila que vai ser executado:

//Fila de conexões
fila=[]
ifila=0

Agora nossa função ajaxHTML deve apenas exibir o “Carregando …”, inserir os parâmetros que ela recebe na fila e testar se a fila está em execução. Se não estiver, executa o elemento atual da fila. Fica assim:

//Carrega via XMLHTTP a url recebida e coloca seu valor
//no objeto com o id recebido
function ajaxHTML(id,url){
    //Carregando...
    document.getElementById(id).innerHTML="<span class='carregando'>"+
                                          "Carregando...</span>"
    //Adiciona à fila
    fila[fila.length]=[id,url]
    //Se não há conexões pendentes, executa
    if((ifila+1)==fila.length)ajaxRun()
}

Note a chamada à função ajaxRun. Ela vai ficar bem parecida com nossa ajaxHTML do passo anterior. Basicamente, vai criar a conexão e executá-la, com uma onreadystatechange que faz duas coisas: coloca o HTML recebido no objeto HTML e testa se há conexões na fila esperando execução, se houver, executa a próxima:

//Executa a próxima conexão da fila
function ajaxRun(){
    //Abre a conexão
    xmlhttp.open("GET",fila[ifila][1],true);
    //Função para tratamento do retorno
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4){
            //Mostra o HTML recebido
            retorno=unescape(xmlhttp.responseText.replace(/+/g," "))
            document.getElementById(fila[ifila][0]).innerHTML=retorno
            //Roda o próximo
            ifila++
            if(ifila<fila.length)setTimeout("ajaxRun()",20)
        }
    }
    //Executa
    xmlhttp.send(null)
}

Você pode ver o código completo no arquivo ajaxutil.js. Foi construído para que possa ser reaproveitado em qualquer projeto. Veja como o ajax.js ficou. Exatamento igual ao do primeiro artigo, exceto toda a chamada ao XMLHttpRequest, que foi substituída por:

//Carrega o HTML
ajaxHTML("titulo","funcoes.php?h="+n)
ajaxHTML("conteudo","funcoes.php?n="+n)

Se tivéssemos que carregar mais regiões, bastaria acrescentar linhas aqui.

****************************

Se quiserem ver o artigo na integra esta em http://www.tableless.com.br/artigos/ajaxdemo2/


5 Comentários on “Contruindo uma fila de requisições em Ajax”

  1. Portela disse:

    Esse blog é de meninas.

  2. Felipe disse:

    De meninas?
    Então acho que nesse caso temos que apresentar uma imagem sua comprometedora…

  3. Marcelo Disconzi disse:

    De verdade, meu próprio frameWork para manipulação de Ajax, aceita n requisições simultaneas, passagem de variáveis etc… de forma muuito mais elegante, computacionalmente falando. quem tiver interesse diz entre em contato.

  4. couto disse:

    Ola’ Marcelo,
    Parabens por seu framework. Caso queira compartilhar seu eficiente algoritmo, sera um prazer para todos nos.
    Abraco.

  5. Couto disse:

    Como nosso amigo marcelo nao quis compartilhar seu super algoritmo conosco, eu criei um baseado nesse ai(que realmente nao funciona). Nao sei se o meu ficou tao poderoso como o do nosso colega, mas funciona muito bem. Caso tenham interesse eh so acessar esse blog:

    http://blog.zuntto.com/ajax-implmentando-uma-fila-de-requisicoes/
    , tem ate exemplo pra download. :p
    Abracos,


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s