Início > Desenvolvimento, JS > Requisições AJAX síncronas e assíncronas em jQuery

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

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ágina index.html, e, nesta página, exista o seguinte elemento:

<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.


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

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!

Categorias:Desenvolvimento, JS
  1. Daniel
    03/06/2011 às 7:17 PM

    Vlwwww cara!! Ajudou d+!

    • 03/02/2013 às 5:31 PM

      Ajudou demais, apesar de conhecer os conceitos, não sabia que existia tal propriedade no AJAX Jquery, obrigado….. vlwww

  2. ryuken
    23/10/2013 às 7:04 PM

    espetaculo

  3. Milhomens
    03/02/2014 às 12:18 AM

    Extremamente claro, extremamente esclarecedor!
    Obrigado.

  1. 29/07/2010 às 8:50 PM
  2. 07/05/2014 às 11:40 AM
  3. 15/01/2016 às 4:10 PM

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: