AJAX com dojo toolkit
A popularidade do AJAX (Asynchronous JavaScript and XML) não para de aumentar, e consequentemente novos frameworks estão surgindo para facilitar a sua utilização.
Geralmente os frameworks de AJAX, obrigam o desenvolvedor a retornar um XML ou alterar a camada de negócios para implementar as chamadas assíncronas ao servidor. O problema disto é que a implementação para as funcionalidades do sistema que utilizam AJAX podem ficar diferente das outras, fugindo o padrão aplicado e gerando uma aplicação mais difícil de se fazer manutenção.
Dentre as diversas opções que existem atualmente para se trabalhar com AJAX, se destaca o dojo toolkit, que é uma biblioteca de javascript, com diversas funções e pacotes utilitários. O interessante do dojo, é que ele oferece a possibilidade de realizar chamadas assíncronas ao servidor, como por exemplo executar um Servlet ou qualquer outro link disponível de uma forma simples e direta. Após a execução, o resultado é retornado automaticamente e fica disponível em uma variável, a qual pode ser utilizada para atualizar apenas a região desejada da página.
Neste artigo será mostrado como realizar uma chamada assíncrona ao servidor, com uma função genérica que poderá ser utilizada em diversas páginas, de uma forma que seja possível utilizar AJAX com praticamente nenhum esforço.
Fazendo o download
Faça o download do dojo aqui: http://dojotoolkit.org/download/
O arquivo de download contém vários exemplos, e o arquivo com as funções javascript "dojo.js", o qual é o único arquivo necessário para se utilizar AJAX. O arquivo dojo.js deve ser colocado no seu projeto.
Para implementar o exemplo você vai precisar de um servlet container, como por exemplo o Tomcat ou Jetty. Para deixar o exemplo bem simples, vamos criar apenas dois arquivos JSP.
Combos aninhados com AJAX
Para demonstrar a utilização do dojo, vamos implementar o clássico exemplo dos combos aninhados, onde ao selecionar algum valor no primeiro combo, o segundo combo precisa ser atualizado para refletir os valores correspondentes ao seu combo "pai". Neste exemplo, teremos um combo com nomes de marcas de veículos, como por exemplo Chevrolet, Ford e Fiat. Após selecionar alguma marca, todos os veículos pertencentes a ela serão visualizados no segundo combo.
Para desenvolver este exemplo utilizando AJAX, precisamos "quebrar" a implementação em duas partes.
Parte 1 - Contém apenas a busca de todos os carros para determinada marca. Corresponde a um Servlet ou JSP que deve retornar um combo preenchido com todos os carros pertencentes a marca fornecida como parâmetro.
Parte 2 - Página que contém os dois combos (marcas e carros). Ao selecionar uma marca, deve consultar de forma assíncrona os carros e atualizar o conteúdo do segundo combo com o resultado retornado.
Implementando a Parte 1 (busca de carros)
O código fonte do arquivo carro.jsp pode ser visualizado abaixo:
|
<% //Para o IE nao fazer cache do <div> response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); response.setDateHeader ("Expires", 0);
String s = request.getParameter("marca"); if(s == null){ %> <select> <option value="">Vazio</option> </select> <% }else if(s.equals("chevrolet")){ %> <select> <option value="">Vectra</option> <option value="">Ipanema</option> <option value="">Monza</option> </select> <% }else if(s.equals("ford")){ %> <select> <option value="">Fiesta</option> <option value="">EcoSport</option> <option value="">Focus</option> </select> <% }else if(s.equals("fiat")){ %> <select> <option value="">Tempra</option> <option value="">Uno</option> <option value="">Palio</option> </select> <% } %> |
O exemplo acima vai retornar um combo para a marca informada como parâmetro. Note que para simplificar o exemplo, foi utilizado somente jsp, mas em uma aplicação real provavelmente um framework MVC seria o recomendado, como por exemplo o Struts, WebWork ou Click.
Para testar a busca de carros, você pode abrir a seguinte URL no browser:
http://localhost/sistema/carro.jsp?marca=chevrolet
http://localhost/sistema/carro.jsp?marca=ford
http://localhost/sistema/carro.jsp?marca=fiat
Implementando a Parte 2 (AJAX)
Agora que já temos a página de busca de carros, precisamos construir a página que realmente utilizará AJAX. O código fonte da segunda página, pode ser visualizado abaixo:
|
<html> <head> <title>DOJO</title> <script type="text/javascript" src="js/dojo.js"></script> <script type="text/javascript" src="js/utils.js"></script> </head> <body>
<select onChange="ajax('carro.jsp?marca='+this.value,'carroDiv')"> <option value="">Selecione o carro</option> <option value="chevrolet">Chevrolet</option> <option value="ford">Ford</option> <option value="fiat">Fiat</option> </select>
<br><br>
<div id="carroDiv" />
</body> </html> |
Note que no início do arquivo busca.jsp são declarados dois arquivos javascript. O primeiro é o dojo.js, o qual é responsável por toda a "mágica". O segundo arquivo (utils.js), foi construído para este artigo para demonstrar a utilização do dojo tookit. Este arquivo possui a função "ajax(url,div)", que é utilizada para disparar chamadas assíncronas ao servidor e atualizar o div informado como padrâmetro automaticamente após obter o resultado.
Note que no combo que contém todas as marcas, a função “ajax” é chamada no evento onChange, para que a busca dos carros possa ser realizada após a seleção da marca. Esta função possui 2 paramêtros:
1 - A URL que deve ser executada.
2 - O id do "div" que vai receber o retorno da URL chamada. Note que no fim da página é definido o div com o mesmo "id" passado no argumento da função:
<div id="carroDiv" />
Abaixo pode-se verificar o fonte do arquivo utils.js:
|
function ajax(url,divId) { |
A função dojo.io.bind, recebe a URL para a qual a request deve ser realizada e a função que vai tratar o retorno. Serão retornados o conteúdo e o status da request. Se o status for igual a “load’, significa que a request foi efetuada com sucesso, e a variável “data” contém o HTML retornado pelo servidor. A função é bem simples, e a request é feita automaticamente pelo dojo. Como o resultado é uma página HTML, a seguinte linha de código fará a atualização do conteúdo do div:
myDiv.innerHTML = data;
Conclusão
O dojo toolkit é sem dúvida uma das mais simples e poderosas bibliotecas para AJAX. No artigo foi desenvolvido um arquivo javascript (utils.js) que pode ser utilizado para realizar chamadas assíncronas ao servidor de uma genérica, recebendo uma URL e o id do "div" onde o resultado será exibido. Fica como sugestão ao leitor utilizar a mesma função de uma forma diferente, como por exemplo ao clicar em algum botão:
<input type="button" value="Mostrar carrros Fiat"
onClick="ajax('carro.jsp?marca=fiat','carroDiv')" >
Espero que tenham gostado do artigo, e que o AJAX possa aumentar ainda mais a qualidade das aplicações desenvolvidas, proporcionando uma maior interatividade entre o usuário e o sistema, assim como uma economia maior de recursos utilizado pelo servidor.
Referências
