">wm05_capa.JPG

 

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.

 image003.gif


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.

Neste artigo vamos descrever os detalhes de uso de cada uma das tecnologias que interagem no AJAX, criando uma aplicação web simples que usa esta metodologia. Será usado um Servlet Java que pode ser instalado em qualquer servidor que suporte este padrão. Você precisa conhecer o básico sobre servlets para entender o funcionamento do módulo servidor. Como esta implementação usa generics para diminuir o código, você precisa da versão 1.5 da máquina virtual Java para fazer o exemplo funcionar.

Uma pequena aplicação AJAX

O código do motor AJAX deve ser implementado em um ou mais arquivos *.js à parte. Neste exemplo usaremos um arquivo chamado ajax.js com todas as funções, mas é possível criar arquivos separados para processamento das requisições e para o tratamento de eventos do usuário. É aconselhável encontrar uma IDE que tenha um bom suporte para a edição deste tipo de arquivo, já que nele estará grande parte do código da interface com o usuário. Outra dica interessante é fazer testes usando o browser FireFox e suas ótimas ferramentas de depuração de JavaScript.

Quem já conhece JavaScript sabe do problema infernal de incompatibilidade entre os browsers. É comum ver scripts que funcionam em um browser não funcionarem em outro devido a algumas diferenças entre nomes de objetos do JavaScript. Usuários do FireFox, por exemplo, sempre têm problemas em páginas que insistem em usar o objeto document.all que é proprietário do Internet Explorer.

Mas, problemas de incompatibilidade em todas as áreas de tecnologia sempre se resolveram com uma solução simples: o estabelecimento e utilização de padrões. É justamente o estabelecimento de um padrão que tornou possível a utilização do AJAX em grandes aplicações. Este padrão é conhecido como DOM (Document Object Model).

Para os que estão acostumados a trabalhar com XML, o DOM é um velho conhecido. Ele pode ser encarado simplesmente como um conjunto de interfaces padrão de objetos utilizados para criar e/ou processar documentos que seguem as regras de sintaxe do XML. Ou seja, o DOM não é um software nem uma biblioteca. Ele é uma especificação do W3C que, para a nossa sorte, foi implementado em quase todos os browsers mais utilizados na web. Se um browser faz a propaganda de que implementa o padrão DOM, sabemos então quais os conjuntos de objetos, métodos e atributos podemos usar em JavaScript para processar documentos XML e páginas XHTML. A implementação DOM do JavaScript é usado tanto para processar o XML enviado pelo servidor como também para modificar elementos HTML da página exibida no browser e, assim, movimentar a interface com o usuário. Dessa forma, para criar um motor AJAX que seja realmente cross-browser (suporte múltiplos browsers), basta trabalhar sempre sobre as interfaces DOM. Em vez de usar o document.all para localizar um elemento na página, deve-se usar por exemplo o método document.getElementById(''), que está previsto no padrão DOM e por isso é suportado na maioria dos browsers.

Como vimos, outro elemento essencial é a classe XMLHttpRequest do JavaScript. Esta classe é o recurso básico para comunicação do motor AJAX com o servidor web. É através do uso de objetos  XMLHttpRequest que é possível fazer requisições HTTP sem interrupções visuais para o usuário. Como nem tudo é perfeito, o uso da classe ainda tem um problema de compatibilidade que pode ser facilmente contornado. O XMLHttpRequest surgiu inicialmente no Internet Explorer como um objeto ActiveX que podia ser instanciado via JavaScript. Um pouco depois, outros browsers como os da família Mozilla e o Safari da Apple implementaram o XMLHttpRequest como objetos nativos do JavaScript. Como ainda não há um padrão definido, o código de criação do objeto XMLHttpRequest é o único ponto do motor AJAX em que somos realmente obrigados a checar em qual browser o código está rodando. A Listagem 1 mostra o código da primeira função do arquivo ajax.js que conterá o motor AJAX da aplicação exemplo.

 

Listagem 1. ajax.js.

1.  /**************************************************

2.     Função base para requisição HTTP assíncrona

3.  ***************************************************/

4.  function httpReq(params){

5.     // usamos uma variável local para evitar problemas de concorrência

6.     var ajaxRequest = null;

7.     if (window.XMLHttpRequest)

8.       ajaxRequest = new XMLHttpRequest();

9.     else if (window.ActiveXObject)

10.                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

11.              else alert('AJAX não suportado. Atualize a versão deste browser');

12.             

13.              ajaxRequest.onreadystatechange = dispatch;

14.              ajaxRequest.open("GET", './servlet/ajaxtest.Agenda?'+ params, true);

15.              ajaxRequest.send(null);

16.             

17.               function dispatch(){

18.                  if (ajaxRequest.readyState == 4) {

19.                     if (ajaxRequest.status == 200) {

20.                           var message = ajaxRequest.responseXML.documentElement;

21.                           var op = message.getAttribute('op');

22.                           eval('tratar_'+op+'(message.childNodes);');

23.                     } else {

...

Quer ler esse conteúdo completo? Tenha acesso completo