Ajax: Classe para múltiplas requisições assíncronas

maio 26, 2009

Ainda vejo muitos desenvolvedores tentando fazer duas requisições Ajax ao mesmo tempo e sofrendo muito com os problemas que isso pode causar. Lembrando que ao fazer a segunda requisição (junto com a primeira) você está simplesmente anulando a anterior. Outra opção é a criação de diversas instâncias de XMLHttpRequest, mas também não é viável devido a incompatibilidade e sobrecarregamento do browser.

Recentemente desenvolvi uma classe Ajax que suporta múltiplas requisições utilizando o conceito de fila e venho aqui compartilhar com vocês.
É uma classe simples responsável por encapsular toda a complexidade do Ajax (não que Ajax seja difícil, pelo contrário Ajax é muito fácil desde que seja utilizado corretamente).
Utilizando o padrão Singleton (lembrando que esse padrão não é 100% seguro em JavaScript) criamos uma única instância do objeto XMLHttpRequest para ser usado em todas as requisições.

Código de classe:
Clique aqui para ver

Modo de usar:

1 Ajax.doPost(teste.php, “param=1&param=2”, function()
2 {
3     if (Ajax.getInstance().readyState == 4)
4     {
5         if (Ajax.getInstance().status == 200)
6         {
7             alert(Ajax.getInstance().responseText);
8          }
9          Ajax.next();
10    }
11 });

Código de exemplo:
Clique aqui para ver

Basta chamar o método Ajax.doPost() para executar uma nova requisição sem se importar se a requisição anterior foi concluída ou não, pois o próximo doPost() somente será executado se a requisição anterior foi concluída.

Anúncios

2 Responses to “Ajax: Classe para múltiplas requisições assíncronas”

  1. Jean Carlos Says:

    Bom dia Danilo, estou fazendo uma função para exibir varias divs, o problema e que o conteudo de cada div vem por ajax, sem assim, sua classe me seria útil, mas não funcionou.

  2. silvia Says:

    Muito bom o artigo, simples e objetivo e muito útil. Parabéns


Deixe um comentário

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s

%d blogueiros gostam disto: