Desmistificando o AJAX – Parte IV
Raphael Paiva
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:
|
Cidade |
Nº de Javaneses |
CE |
-Caucaia -Fortaleza -Sobral |
60 400 1 |
PB |
-João Pessoa |
200 |
PE |
-Caruaru -Recife |
40 550 |
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.