Veremos neste artigo o conceito envolvido na tecnologia AJAX e porque é tão importante incorporá-la às aplicações. Posteriormente são detalhados todos os recursos que o JavaServer Faces, em sua versão 2.0, oferece ao desenvolvedor.
Em que situação o tema é útil:
Empresas de todos os nichos estão migrando seus sistemas para aplicações web. Como podemos notar, os sistemas corporativos não são mais simples formulários de cadastro. Agora, toda página contém regras de negócio, e quanto menos o usuário precisar pensar e digitar, mais produtivo ele será. É aqui que entra o AJAX, auxiliando na usabilidade da aplicação.
Resumo DevMan:
Antes de iniciar o desenvolvimento de aplicações com comportamentos AJAX, é necessário entender o que é uma requisição AJAX, qual a diferença entre ela e uma requisição comum, e o que é possível fazer com este recurso. No decorrer deste artigo, é apresentado como funciona uma requisição AJAX, para em seguida detalhar todos os recursos da API nativa de AJAX do JavaServer Faces 2.
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.
Listagem 1. Implementando AJAX com RichFaces.
<h:inputText id=”texto” value=”#{myBean.texto}”>
<a4j:support event=”onkeyup” reRender=”outputText” />
</h:inputText>
<h:outputText id=”outputText” value=”#{myBean.texto}” />A definição do componente <a4j:support> é parecida com a definição do componente nativo do JSF 2, como pode ser observado na Listagem 2. A diferença é que na nova versão do JSF, o componente é nativo e não fornecido por terceiros.
Listagem 2. Implementando AJAX no JSF 2.
<h:inputText id=”texto” value=”#{myBean.texto}”>
<f:ajax event=”keyup” render=”outputText” />
</h:inputText>
<h:outputText id=”outputText” value=”#{myBean.texto}” /> ... 
