2

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?

3
  • "uma conexão POST/GET" você quer dizer uma requisição normal do navegador com um link ou formulário? Commented 4/11/2015 às 10:50
  • @Sanção sim estes dois tipos de conexão do navegador
    – Ricardo
    Commented 4/11/2015 às 10:51
  • É o mesmo tipo de conexão, protocolo HTTP. Ajax síncrono não é recomendável. Commented 4/11/2015 às 11:01

1 Resposta 1

4

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

inserir a descrição da imagem aqui

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);
            }
        }
    }
}
5
  • Emir, fiquei curioso quanto a uma coisa, no método callAjaxAsync você não deveria ter feito uso do evento readystatechange e ter chamado o callback 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
  • Emir, corrigi o seu exemplo, agora está ajustado. Commented 4/11/2015 às 12:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .