Karuta’s ASP & M$ SQLserver

Dicas, códigos e outras coisinhas de meus estudos para não esquecer…

Requisições AJAX síncronas e assíncronas em jQuery

Posted by karuta em setembro 30, 2014

28/07/2010 –  escrito por: 

Depois de desenvolvermos uma boa quantidade de telas utilizando o jQuery,  desta vez desvendarei um dos mistérios da função Ajax do jQuery:  como fazer e em que casos utilizar as requisições síncronas. Primeiramente, vou descrever um cenário em que o conceito de assíncrono/síncrono esteja bem definido.

Por padrão, o método jQuery.Ajax vem com o parâmetro async setado como true. Isso significa que as requisições assíncronas estão habilitadas. Ás vezes, é necessário que “enlacemos” as requisições Ajax, ou seja, realizar uma requisição Ajax somente quando a anterior termine, e aí sim, realize a próxima. Suponha que uma requisição (1)  realize a chamada de uma páginaindex.html, e, nesta página, exista o seguinte elemento:

1
<input id="campo" name="campo" value="Valor do Campo" />

Nesta mesma requisição, no seu parâmetro success, há uma nova requisição (2), que foi definida, em seu  parâmetro success, um alert do valor do campo “campo” da requisição anterior.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jQuery.ajax({ /*Requisição 1*/
  url: 'index.html',
  async: false,
  success: function(data) {
    jQuery('.destino').html(data);
    jQuery.ajax({ /*Requisição 2*/
      url: 'index2.html',
      async: false,
      success: function() {
         alert(jQuery("#campo").val());
     }
 }
});

A necessidade de a requisição 1 ser síncrona se explica da seguinte forma:  Se a requisição 1 fosse assíncrona, quando a requisição 2 fizesse chamada ao input “campo” para executar o alert, (linha 11),  devido à velocidade da conexão e outros fatores, o elemento “campo” não existiria no HTML e o alert mostraria o famoso “undefined”.

Já na requisição síncrona, como mostrei no exemplo,  o alert da requisição 2 só executará quando a requisição 1 estiver completa, retornando o valor (value) “Valor do Campo” no alert.

Abaixo, uma representação gráfica da linha do tempo do nosso exemplo:

Comparativo: Requisição Síncrona x Assíncrona

Repare que na requisição síncrona, a requisição 1 é executada por completo, e a requisição 2 só é executada quando a primeira termina, fazendo com que os elementos necessários para a correta execução do código estejam presentes no formulário. Na requisição assíncrona, as requisições são executadas quase que simultaneamente, e corre-se o risco de que nem todos os elementos necessários para execução do código estejam presentes no formulário.

Espero ter ajudado!

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

 
%d blogueiros gostam disto: