Artigo da WebMobile 5 - Entendendo Ajax

Clique aqui para ler este artigo em pdf

Clique aqui para ler todos os artigos desta edição

Entendendo o AJAX

A popularização da web nos trouxe a possibilidade de criar novas interfaces para os sistemas de informação. Sistemas web trouxeram grandes vantagens como a possibilidade de serem acessados em qualquer parte do planeta, a capacidade de serem utilizados em qualquer plataforma cliente que suporte um browser HTTP e a enorme facilidade de atualização. Hoje em dia, a grande maioria dos pacotes de software das mais diferentes áreas utilizam esse tipo de interface. De pequenas aplicações em intranet aos grandes sistemas de gestão; de um software simples de administração de usuários a um complexo firewall. Quase todas as versões mais recentes destas novas aplicações trazem interfaces com o usuário através da web. Interfaces de controle de e-mail via web (os webmails) hoje em dia são provavelmente mais usadas que os clientes desktop tradicionais, e certamente é a aplicação com interface web mais utilizada na internet. Este mesmo exemplo do webmail também demonstra uma das desvantagens deste tipo de interface: o elevado tempo de resposta do sistema. Quem está acostumado a usar um cliente de e-mail tradicional, e se vê obrigado a usar um webmail geralmente se irrita com a diferença na velocidade de acesso às suas mensagens e com a pobreza da interface web em relação à aplicação desktop.

Ao observar o processo do HTTP fica fácil notar que na maioria das vezes a etapa que mais consome o tempo de reposta é a geração do HTML e seu envio ao browser. Esse processo, combinado com a existência de um design carregado com dezenas de imagens e tabelas dentro de tabelas acentuam ainda mais o problema. Normalmente, para cada clique do usuário ou formulário submetido, a tela é completamente recarregada com seus cabeçalhos, rodapés, menus, tabelas, imagens, etc. Ou seja, o usuário vê o sistema desaparecer da tela e reaparecer aos poucos depois de vários segundos. O programador web normalmente não se sente responsável pelo problema já que considera a geração do HTML e um belo design como ferramentas que não podem ser descartadas.

Mas, eis que surge uma revolução chamada GMail. Para os usuários comuns, a surpresa com os 1GB de espaço de armazenamento. Para os programadores, o espanto de perceber como uma aplicação web com inúmeras funcionalidades pode ser tão leve, amigável e ter um tempo de resposta tão curto. Desde então, vem entrando em discussão a utilização da metodologia de interfaces web conhecida como AJAX.

O que é AJAX?

AJAX é uma sigla para o termo Asynchronous JavaScript and XML. Quem ouve falar pela primeira vez sobre o termo e procura informações em sites de busca acaba bastante perdido. Muitos pensam em achar algum framework ou biblioteca com este nome e acabam não encontrando nada do que é esperado. Isso acontece por que o AJAX não é um software nem uma linguagem de programação, mas sim uma metodologia de construção de interfaces web dinâmicas e leves. Ele envolve a utilização de tecnologias distintas que se tornaram padrões há algum tempo. É a forma de utilização em conjunto destas tecnologias que define o AJAX, criando uma forma de interação com a web bem diferente daquilo que estamos acostumados.

O que mais assusta a quem quer começar a usar a metodologia do AJAX é justamente a necessidade de conhecer toda lista de tecnologias associadas a ele. Esta lista compreende XML, XHTML/DHTML, CSS e JavaScript usando o padrão DOM em conjunto com a classe XMLHttpRequest:

·XML: formato padrão dos dados trocados entre browser e servidor;

·XHTML / CSS: definidores do design da interface;

·JavaScript: linguagem de programação usada para criar o motor do AJAX. A comunicação assíncrona com o servidor deve ser feita utilizando a classe XMLHttpRequest.

·DOM: usado no lado servidor para criação de documentos XML, e no lado cliente para processamento dos documentos recebidos e para a geração do XHTML dinâmico.

Tudo isso sem citar a necessidade do conhecimento de uma linguagem web responsável pela geração de conteúdo do lado servidor. Qualquer linguagem pode ser usada no lado servidor, mas em projetos grandes é aconselhável utilizar alguma que tenha um bom suporte para processamento de XML.

Somente a visão desta lista de tecnologias é suficiente para perceber que a forma de desenvolvimento para web usando a abordagem do AJAX é realmente mais complexa do que a forma tradicional. Mas o resultado final é, muitas vezes, bastante recompensador, garantindo um menor tráfego na rede, uma interface mais rica, dinâmica e com um menor tempo de resposta.

A abordagem do AJAX consiste em usar todas estas tecnologias no lado cliente para criar uma camada adicional de software entre o browser e o servidor web. O menor tempo de resposta neste caso é explicado pelo fato do usuário interagir com um código que já está em sua memória, ao invés de sempre ir ao servidor para atualizar dados na interface gráfica. Observe na Figura 1 um comparativo simplificado do AJAX com uma abordagem de desenvolvimento tradicional.

Figura 1. Abordagem original X abordagem AJAX.

O motor AJAX é um conjunto de rotinas em JavaScript cujas principais funções são o envio de requisições HTTP para o servidor usando a classe XMLHttpRequest, e o processamento das respostas em XML destas requisições para, enfim, atualizar a interface com usuário através da geração dinâmica de XHTML formatado com CSS. O tráfego HTTP durante o uso da aplicação diminui por que as respostas em XML contêm apenas dados estruturados, que quase sempre são bem menores que páginas HTML inteiras enviadas pela rede. Além disso, um motor AJAX bem construído pode manter estes dados estruturados de requisições anteriores, criando um cache em memória. Isso permite, por algum tempo, a navegação em um conjunto de dados dinâmicos sem a necessidade de enviar um único byte pela rede! Alguns sistemas trabalham com implementações do padrão MVC (Model View Controller) todo escrito em JavaScript dentro do motor AJAX.

Outra característica interessante do AJAX é a sua natureza assíncrona. O mecanismo básico da web é o HTTP, e este é baseado em um processo simples de requisição-resposta. Na abordagem web tradicional, browser e servidor sempre atuam um de cada vez de forma síncrona. Ou seja, quando o usuário pede uma página, precisa aguardar todo o processo de conexão-requisição-resposta para começar a interagir com o conteúdo. Depois que o conteúdo chega, é a vez do servidor esperar que o usuário leia a página ou preencha um formulário para só então uma nova requisição ser feita. Na abordagem do AJAX, com utilização do objeto XMLHttpRequest, é possível fazer requisições HTTP que não provocam a recarga da página. O usuário pode interagir com a página mesmo que a resposta do servidor às últimas requisições AJAX ainda não tenham chegado. Tomando novamente o exemplo do GMail, note que ao mesmo tempo em que você lê ou escreve um e-mail no formulário de envio, o motor AJAX pode estar checando na sua caixa de entrada no servidor se há uma mensagem nova e ainda pode estar enviando ao servidor os dados sobre as últimas mensagens que você marcou como spam. Desse modo, as operações são assíncronas por natureza, uma vez que diferentes trechos de script podem rodar ao mesmo tempo. Isso traz todas as vantagens (e toda a complexidade!) de podermos executar tarefas de modo concorrente no browser. Algumas interfaces podem ser 100% assíncronas, nas quais todo o código JavaScript é baixado na primeira requisição para fazer a manipulação dos eventos e das requisições HTTP. Isso faz com que a carga da página inicial seja um pouco mais lenta, porém provoca uma diminuição do tráfego posterior na rede e do tempo de resposta do sistema (esse é o caso do nosso exemplo do GMail). Mas também é possível usar o AJAX apenas em algumas partes do sistema, fazendo uma mistura entre a abordagem síncrona e a assíncrona. " [...] continue lendo...