Battle Web 2.0: AJAX

Discuta essa postagem no Fórum Omega Geek, clicando aqui.

Na semana passada eu falei um pouquinho sobre Web 2.0, os conceitos e idéias deste novo paradigma de criação de conteúdo na web. Hoje vou me aprofundar um pouco mais no lado técnico do negócio e explicar um pouquinho sobre a sigla que, de todas as outras relacionadas ao assunto, foi a que mais ganhou destaque com a onda da Web 2.0: AJAX.

Além de limpar panelas, o AJAX também é uma nova maneira de troca de informações entre seu browser e um servidor de algum website. Na verdade o método pelo qual os dados são trocados continua sendo o bom e velho HTTP (protocolo de redes de computadores para troca de dados pela internet), o AJAX não passa de uma camada acima disso, e uma camada bem conhecida por programadores old-school.

O fato é que assim como o termo Web 2.0, o termo AJAX só existe pra dar nome a uma nova mentalidade para uso de coisas que já existiam: AJAX significa Asynchronous Javascript And XML (Javascript e XML assíncrono) e é exatamente isto, Javascript trocando XML de maneira assíncrona. Daí todos os programadores que sabem Javascript (são MUITOS) e conhecem XML (ainda são MUITOS) se perguntam: se é só isso, o que faz meu código ser AJAX ou não? A palavra mágica aí é Asynchronous, e é exatamente ela que faz toda a diferenca na hora do cliente do website usar o serviço que tal site presta.

Pra quem não entendeu nada até aqui, uma breve explicação: Javascript é uma linguagem para programar instruções interpretadas por um browser da internet, como o Firefox ou o Internet Explorer. Estas instruções servem para manipular o código HTML que “monta” o site, que é estático. XML é um formato de arquivo para definição e armazenamento de dados.

AJAX é basicamente um código escrito em Javascript que é executado no seu browser recebendo dados do servidor em formato XML de maneira assíncrona. A palavra ‘assíncrono’ é referência ao modo como a requisição por XMLs é feita: o código faz a requisicão e não fica esperando a resposta. Ao invés, ele continua executando outras tarefas e, quando a resposta chega, ela é tratada.

Na prática, num website comum, você clica em algum link que envia uma requisição de dados ao servidor. Esta requisição (que utiliza o protocolo HTTP) pode ser, por exemplo, para mostrar uma nova mensagem postada num fórum ou exibir uma imagem.
Enquanto a resposta não chega você tem apenas duas opções: esperar ou cancelar a requisicão (pressionando ESC ou clicando em Stop ou Parar no seu navegador).

A mesma funcionalidade em AJAX acontece da seguinte maneira: você clica num link e a requisição, também HTTP, é enviada ao servidor. O website cria uma thread responsável por esperar a reposta. Enquanto isso você continua usando o site normalmente. Quando a resposta chega ela é tratada de alguma maneira cabível, por exemplo, mostrando-a ao cliente ou colocando-a em algum cache temporário.

Reparem no diagrama abaixo como realmente a palavra ‘assíncrono’ faz todo o sentido. Com AJAX as ações que o usuário toma (input) e as atualizações no website (display) não estão em sincronia com as trocas de dados entre cliente e servidor.

Alguns exemplos práticos do uso de AJAX:

– Gmail: se você usa o Gmail já deve ter reparado que apesar de ser um aplicativo web ele mais se parece com um cliente de e-mails desktop, tudo parece fluir mais naturalmente já que dificilmente você vê aquela mensagem ‘Loading…’ no topo da tela. O que acontece é que, muito provavelmente, quando você acessa seu e-mail, assim que o Gmail termina de renderizar sua caixa de entrada ele já inicia automaticamente uma nova requisição ao servidor para recuperar suas mensagens não-lidas. Assim, quando você clicar em alguma mensagem que deseja ler, é provável que ela já esteja guardada em algum tipo de cache na sua memória, sendo necessário apenas mostrá-la e, consequentemente, te salvando preciosos milissegundos de espera de comunicação com o servidor.

– Google Documents: o mesmo princípio se aplica ao Google Documents quando você, por exemplo, salva um documento que está sendo editado. Não é necessário esperar que o documento seja salvo no servidor, basta clicar em ‘Salvar’ e continuar utilizando o editor de textos.

Com a popularizacão da Web 2.0 e seus filhotes é muito comum ver pessoas utilizando o acrônimo AJAX para se referir a algumas pop-ups ou efeitos que vemos em websites, embora estes sejam em sua maioria apenas Javascript enfeitando a maneira como a página é exibida, sem troca de informações por XML de maneira assíncrona nem nada.
Mas como tudo isto faz parte daquela característica de ser ‘user-oriented‘ dos aplicativos Web 2.0, é normal que os termos acabem se misturando.

Agora quando você for no supermercado com sua mãe/namorada/mulher vai sempre se lembrar que AJAX se usa de forma assíncrona, ou seja: compre o produto e enquanto o resultado (panelas limpas) não chega, aproveite pra fazer outras atividades no meio tempo!

Anúncios

2 Responses to Battle Web 2.0: AJAX

  1. feanari disse:

    Achei uma piada de minha autoria no seu texto. Quem eu processo??
    xD

  2. PFaria disse:

    adorei o post, muito elucidativo!

Deixe um comentário

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: