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

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!