Desmistificando o AJAX – Parte IV

Raphael Paiva

raphael@sena.com.br

Utilizando no dia-a-dia: Um exemplo real

No exemplo anterior, tínhamos a tarefa apenas de enviar um dado ao servidor e retorná-lo ao cliente e conseguimos executá-la com sucesso, ela já serve para algumas implementações simples de pedido de retorno de um dado simples para o usuário, porém, AJAX pode fazer bem mais! Não retornando apenas um dado, mas uma lista destes, podendo inclusive trabalhar com folhas-de-estilo(CSS)  para melhor visualização do usuário.

Já existem uma série de frameworks que trabalham com AJAX, e estes podem ser incorporados a qualquer aplicação web, com a utilização de qualquer framework MVC, ou seja.. não ache que você está preso ao framework ou ao AJAX, você pode adicioná-lo e retirá-lo de onde quiser e quando quiser.

Alguns exemplos de framework AJAX do mercado:

Framework e APIs de AJAX mais utilizadas na atualidade:

·         DWR - http://getahead.ltd.uk/dwr/

·         AjaxAnywhere - http://ajaxanywhere.sourceforge.net/

·         SaJax - http://www.modernmethod.com/sajax/

·         Rico - http://openrico.org/rico/home.page

·         BackBase - http://www.backbase.com

·         AjaxTags - http://ajaxtags.sourceforge.net/

Todos estes frameworks acima são bastante utilizados no mercado mundial, têm grande suporte e uma série de funcionalidades visuais, como drag´n drop de componentes, preenchimento de grids em tempo real, sugestão de escrita(como no google suggest), etc.

O exemplo que iremos dar neste tutorial não utilizará de nenhum desses frameworks, iremos implementar o AJAX de forma pura, dessa vez retornando do servidor um XML com todos os valores (ao invés de apenas um texto, como no exemplo anterior) e iremos preencher um uma lista de valores.

Requisitos do exemplo

O que iremos implementar para este exemplo é preenchimento de um combobox com uma pequena lista de cidades de acordo com o estado selecionado em outra combo, e após a seleção da cidade, nos será mostrado a quantidade de fãs do Java.

Abaixo, a lista de cidades de acordo com o estado:

Iremos dessa vez, ao invés de retornamos um texto para o servidor, um XML com os dados limpos de formatação HTML, no caso, um arquivo com a seguinte característica:

Arquivo xml de retorno para o cliente

<?xml version='1.0' ?>

<root>

    <estado>

        <cidade nome='Caucaia'>

              <javaneses>15</javaneses>

         </cidade>

         <cidade nome='Fortaleza'>

        <javaneses>400</javaneses>

         </cidade>

         <cidade nome='Sobral'>

         <javaneses>1</javaneses>

         </cidade>

     </estado>

</root>

Para a utilização de xml como passagem de valores, deveremos ter algumas modificações tanto no Servlet, quanto no javascript que tratará do retorno. O web.xml continuará o mesmo.

Nosso Servlet, que estamos chamando de ServletAjax sofrerá duas pequenas mudanças (além da lógica de negócio).

Serão adicionadas duas linhas a serem passadas como parâmetro para o HTML, uma é para informarmos que nossa resposta será um xml e estará codificado no padrão “UTF-8”; a segunda é apenas uma informação para que o browser não utilize seu cache.