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/