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.