Existe alguma diferença de performance e de funcionamento entre um AJAX Síncrono e uma conexão POST/GET? Ambos travam a thread (o navegador congela) mas existe outros diferenciais entre os tipos de conexões?
-
"uma conexão POST/GET" você quer dizer uma requisição normal do navegador com um link ou formulário?– Pedro SançãoCommented 4/11/2015 às 10:50
-
@Sanção sim estes dois tipos de conexão do navegador– RicardoCommented 4/11/2015 às 10:51
-
É o mesmo tipo de conexão, protocolo HTTP. Ajax síncrono não é recomendável.– Lucas Fontes GasparetoCommented 4/11/2015 às 11:01
1 Resposta
Ajax e Protocolo Http(Get, Post)
O ajax é uma forma de comunicação entre cliente server que utiliza alguns tipos de protocolo. Entre esses estão o Http que utiliza oe métodos post e get para trafegar informações entre cliente e servidor. A idéia do ajax surgiu da necessidade de efetuar um comunicação com o lado servidor sem a necessidade de carregar a página novamente. Antes disso só era possível efetuar essa comunicação através de um get ou post. Era comum o uso de iframes para tal comunicação. Com a implementação do ajax foi possível dar mais dinamismo as páginas web. Foi uma grande evolução para a época(não me lembro o ano exatamente) e até hoje é amplamente utilizado.
Performance Http(iframe) e Ajax
Sobre a questão de performance, o ajax tem a vantagem de trafegar somente as informações pertinentes a solicitação. Ex.: Em um consulta de cliente o lado server pode implementar uma api restfull e retornar somente o json relacionado a esse cliente. Já na utilização de um iframe seria necessário além dos dados relacionados ao cliente trazer possíveis arquivos de js e css que estivessem relacionados a página em questão. Observe que o ajax retorna exatamente o que você quer.
Ajax síncrono e assíncrono
A diferença entre ambas é simples. O ajax síncrono como o próprio nome já diz aguarda o retorno da chamada para dar prosseguimento ao programa. O que isso quer dizer? O teu browser vai ficar esperando a chamada ser finalizada para dar prosseguimento a rotina que está executando. E ai que acontece o dito "IE parou de funcionar".
Particularmente evito utilizar a consulta de forma síncrona para evitar esse tipo de problema. Já o ajax assíncrono trabalha de forma a não efetuar o lock da rotina em questão até o retorno da chamada. É comum utilizar em um método que efetua essa consulta um parâmetro que chamamos de callback. Esse parametro indica uma função a ser executada ao termino da consulta. Dessa forma evitamos o travamento do browser.
Exemplo chamadas:
function init(){
var dataSync = callAjaxSync();
console.log(dataSync);
callAjaxAsync(function(dataAsync){
console.log(dataAsync);
}, function (errorAsync) {
console.error(errorAsync);
});
}
function callAjaxSync(){
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);
request.send(null);
return request.responseText;
}
function callAjaxAsync(callback, onError){
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', true);
request.send(null);
request.onreadystatechange = function(event) {
if (request.readyState == 4) {
if (request.status == 200) {
callback(request.responseText);
} else {
onError(request.statusText);
}
}
}
}
-
Emir, fiquei curioso quanto a uma coisa, no método
callAjaxAsync
você não deveria ter feito uso do eventoreadystatechange
e ter chamado ocallback
dentro dele quando a seguinte condição for satisfeita:request.readyState == 4 && request.status == 200
? Commented 4/11/2015 às 11:26 -
@TobyMosque poderia ter feito sim. Mais para fins de tornar o exemplo mais enxuto possível não usei. Mais na prática precisa ser usado sim. Isso é algo que passa despercebido por muita gente já que frameworks como jquery abstraem esse tratamento. Mais como falei se não usar um framework o correto é efetuar o tratamento Commented 4/11/2015 às 11:38
-
Emir, a questão que o exemplo precisa esta correto, o seu na pratica vai sempre retornar
nulo
. Commented 4/11/2015 às 11:42 -
@TobyMosque, certo esse detalhe passou despercebido. Já efetuei o ajuste Commented 4/11/2015 às 11:53
-