Esse artigo faz parte da revista Java Magazine edição 46. Clique aqui para ler todos os artigos desta edição

img

Atenção: por essa edição ser muito antiga não há arquivo PDF para download.Os artigos dessa edição estão disponíveis somente através do formato HTML. 

Ajax Simples com JS ON-RPC

Conheça um poderoso framework Ajax para Java EE

 

Descubra como exportar métodos de classes Java e utilizá-los de forma transparente em seu código JavaScript, com um framework open source baseado em JavaScript Object Natation>

 

Ari Dias Neto e Alex Barbosa Coqueiro

 

Já faz um bom tempo que a adoção da tecnologia Ajax (Asynchronous JavaScript and XML) chama a atenção, tanto da comunidade de desenvolvedores Java EE, como dos usuários de sistemas web. Aplicações baseadas em Ajax, como o GMail, aproximam o usuário da experiência de interagir com uma aplicação desktop, e fizeram com que os usuários aumentassem o seu nível de exigência no ambiente web.

Essas novas expectativas recaíram sobre os desenvolvedores de aplicações web que, para atender aos requisitos adicionais viram-se estimulados a usar Ajax nas suas soluções. Mas como acontece na adoção de qualquer nova tecnologia, há um período de aprendizagem e certa desorientação em relação ao caminho a se seguir.

Quando pesquisamos na internet sobre Ajax, nos deparamos com uma grande quantidade de sites e artigos (aqui mesmo na Java Magazine, já foram publicados pelo menos seis e este não é o único que trata da técnica nesta edição). Há também uma série de livros que trazem diferentes abordagens sobre a utilização de Ajax. A questão é como adotar a tecnologia com o mínimo esforço de aprendizado e com bons resultados. É isso o que veremos neste artigo: como o Ajax pode ser uma técnica prática e simples de implementar. Ao final, teremos uma aplicação web que popula uma lista de contatos através de chamadas Ajax.

Para desenvolver o exemplo, usaremos o IDE Eclipse com o WTP (Web Tools Project). Lembramos que no site do WTP (eclipse.org/webtools) existe uma versão do Eclipse com este plug-in incluso e que, se você já tem o IDE instalado, pode também baixar e instalar somente o WTP do site de atualizações do Callisto. Para testar a aplicação, usaremos o Apache Tomcat. Todos os arquivos e códigos do exemplo estão disponíveis no site da Java Magazine.

 

O que mudou com o Ajax

A utilização de Ajax mudou a forma como as aplicações web são estruturadas. Antes de sua adoção, os eventos de uma página web eram tratados como uma nova requisição, seguida da atualização de toda a página. Isso constituía um paradigma comumente chamado de Request/Wait/Response. Nesse paradigma, toda vez que o usuário faz uma requisição, ele aguarda o retorno de uma nova página do servidor, e mesmo que essa página tenha o mesmo conteúdo da página anterior, ela é novamente carregada e interpretada pelo navegador.

Quando são utilizadas chamadas Ajax a página atual não precisa ser totalmente atualizada e os retornos das chamadas são interpretados geralmente através de códigos JavaScript no cliente. Assim, somente uma parte da página será alterada, se for necessário.

A Figura 1 mostra a diferença entre o antigo paradigma Request/Wait/Response e a abordagem do Ajax. Observe a linha que define a interação do usuário. No primeiro paradigma, ela apresenta longos espaços durante os quais o usuário não interage com a aplicação. Já na segunda abordagem, baseada em Ajax, não há rupturas significativas na linha de interação do usuário: o navegador web não fica bloqueado enquanto a requisição é feita, e o usuário pode continuar interagindo com a aplicação.

 

 img

Figura 1. Diferença entre aplicação web padrão e outra baseada em Ajax

 

Ajax, XML e JSON

O uso de XML é intrínseco ao Ajax. Para que uma requisição Ajax ocorra, usamos um objeto chamado XMLHttpRequest, que é disponibilizado pelos navegadores web Firefox, Mozilla e outros (e pelo IE a partir da versão 7). É este objeto que permite a um código JavaScript fazer chamadas remotas aos servidores. O navegador Internet Explorer, até a versão 6, fornece o objeto ActiveXObject, que funciona de forma semelhante ao XMLHttpRequest. (O framework que veremos a seguir deixa essas diferenças transparentes para o desenvolvedor.)

Normalmente o retorno das chamadas Ajax é tratada como XML. Isso implica que o seu código JavaScript deverá percorrer toda a estrutura do XML e interpretá-lo. Outra abordagem é tratar o retorno do servidor como um objeto em uma notação padronizada, chamada JavaScript Objetct Notation – JSON.

Existem duas grandes vantagens na utilização de JSON. A primeira delas é a redução da quantidade de dados que retornam do servidor. A descrição de um objeto em JSON é bem mais “enxuta” que a utilizada por um arquivo XML. A Figura 2 demonstra esta diferença entre os dois formatos, com um exemplo simples de descrição de produto.

Outra vantagem de se utilizar o JSON é que, de posse da string de descrição do objeto, você precisa apenas chamar o método eval() do JavaScript, para já ter o objeto pronto para o uso. Não há a necessidade de percorrer toda a estrutura de um arquivo XML, o que diminui a complexidade de código JavaScript.

Agora que vimos as diferenças entre JSON e XML e as vantagens de usar o JSON em aplicações Ajax>, vamos apresentar na prática do o framework JSON-RPC-Java, que usa essa notação e simplifica muito a integração de JavaScript com Java.

 img


Figura 2. Exemplo demonstrando a diferença entre o formato XML e JSON na descrição de um produto.

 

Construindo o exemplo

...