Dominando a API de AJAX do JSF - Revista Java Magazine 97

Adicionar AJAX em aplicações web aprimora a interação do usuário com a aplicação. O propósito ao utilizar esta tecnologia é fornecer ao usuário final uma experiência agradável, isto é, uma boa usabilidade para que ele possa usufruir das funcionalidades do software. Com este recurso é possível enviar requisições assíncronas ao servidor sem a necessidade de recarregar toda a página.

Embora seja um conceito antigo, apenas nos últimos anos seu uso passou a ganhar atenção, e ao que tudo indica, a Google foi a primeira a implementar esta tecnologia em seus serviços, como é o caso do Gmail e do Google Maps.

Para compreender a importância e utilidade do AJAX, imagine um formulário grande, no qual após o preenchimento o usuário deve clicar em um botão para enviar os dados ao servidor. Em seguida o servidor processa os dados recebidos e retorna para o usuário uma mensagem de sucesso ou os possíveis erros encontrados. Não seria melhor se o usuário fosse informado dos campos com dados incorretos durante o preenchimento do formulário?

Este é apenas um exemplo da usabilidade que esta tecnologia oferece. Neste contexto, neste artigo vamos apresentar como implementar esse tipo de recurso empregando JavaServer Faces 2 e sua API para AJAX.

O que é AJAX?

AJAX é o acrônimo para Asynchronous JavaScript and XML (ou JavaScript e XML Assíncronos). Esta tecnologia é uma técnica que une ferramentas já existentes a requisições e respostas assíncronas.

Para entender o funcionamento desta técnica, primeiro é necessário saber como funciona o modelo cliente-servidor. Neste modelo, o cliente envia uma requisição ao servidor e aguarda pela resposta, ou seja, solicita ao servidor para que ele processe algo e espera por um retorno. O servidor processa essa requisição assim que ela chega, e quando esta operação estiver concluída, uma resposta é gerada e enviada para o cliente.

No caso do AJAX, o cliente referenciado no cenário acima, é o browser do usuário, que executará o código escrito na linguagem JavaScript. Este é desenvolvido de forma que dispare requisições para o servidor conforme o usuário interage com a página. Essas requisições são assíncronas porque elas são enviadas para o servidor e processadas de maneira não ordenada, ou seja, não possuem sincronia.

Assim que as requisições chegam ao servidor, elas são processadas, e ao finalizar o processamento da requisição, uma reposta é gerada e enviada para o cliente, geralmente em XML. Quando essa resposta chega ao cliente, o código JavaScript a interpreta e atualiza os valores da página, caso necessário.

Nos dias de hoje existem vários frameworks que auxiliam no desenvolvimento de aplicações AJAX. O JavaServer Faces é um deles, e em sua versão 2.0, passou a suportá-lo nativamente. Deste modo, as requisições e os códigos JavaScript são encapsulados dentro de componentes, logo, na maioria dos casos, não é necessário escrever código em JavaScript.

A implementação deste cenário e como funciona o ciclo de uma requisição AJAX será demonstrado em detalhes no decorrer do artigo.

AJAX nas versões anteriores e no JSF 2

Nas versões anteriores do JavaServer Faces, a utilização de AJAX era possível por meio do uso de frameworks de terceiros, tais como RichFaces, PrimeFaces, entre outros. No entanto, também era possível implementar uma biblioteca própria para tratar as requisições/respostas de forma assíncrona e manipular os XMLs.

Repare no exemplo da Listagem 1, que usa o framework RichFaces. Com este código, conforme o usuário digita algo no componente de caixa de texto, requisições são disparadas para o servidor, atualizando o valor do atributo texto do bean myBean. Este valor é capturado pelo componente <h:outpuText> a cada resposta do servidor que chega ao cliente.

<h:inputText id=”texto” value=”#{myBean.texto}”>

<a4j:support event=”onkeyup” reRender=”outputText” />

</h:inputText>

"