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 janeiro 31, 2012

Primeiro quero agradecer ao colega  que postou esse texto em:  http://goo.gl/edg4g

Esse artigo me “salvou” pois surgiu um trabalho onde eram carregados vários pedaços em $.ajax (jquery)… e alguns pedaços continham DIVs, que era “populadas” por outros $.ajax (e assim por diante…)… foi resolvido, deixando os $.ajax na ordem correta onde  as DIVs que deveriam ser “populadas” por outros $.ajax,  foram carregadas antes e todos $.ajax com o parâmetro async: false

 

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:

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.

01 jQuery.ajax({ /*Requisição 1*/
02   url: 'index.html',
03   async: false,
04   success: function(data) {
05     jQuery('.destino').html(data);
06
07     jQuery.ajax({ /*Requisição 2*/
08       url: 'index2.html',
09       async: false,
10       success: function() {
11          alert(jQuery("#campo").val());
12      }
13
14  }
15 });

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íncronaComparativo: 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.

Uma resposta to “Requisições AJAX síncronas e assíncronas em jQuery”

  1. Fico feliz por ter ajudado, colega! Grata surpresa ter encontrado alguém que se beneficiou daquele artigo.

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: