Provavelmente você já recebeu alguma reclamação quanto à “interatividade” do seu site. “Por que este nosso site é tão quadradão? Toda vez que a gente seleciona um Estado, tem que esperar tudo recarregar para aparecer a lista de cidades! Pô, no site xxx é tudo mais simples e rápido”.
Nesta altura, você já leu algum dos diversos artigos sobre o tema e toma a decisão, “agora é hora de usar”.
No começo, como todo casamento, as coisas funcionam de primeira e é tudo tão simples, tão bonito. Basta criar o objeto XMLHttpRequest, se não funcionar, usa Microsoft.XMLHTTP, se ainda assim não funcionar, tenta o objeto Msxml2.XMLHTTP. Depois disso, com poucas linhas de código, seu primeiro combo de cidades está funcionando de forma dinâmica igual ao site xxx.
Depois de algum tempo, você percebe a necessidade de evoluir a idéia. Tem que tratar erros, tem que colocar um gif animado para mostrar que a página está carregando etc. Agora, a coisa fica feia!
Nada disso, o segredo é não reescrever o mesmo código que desbravadores, antes de você, tiveram que fazer no braço. Um ótimo framework para construção de aplicações dinâmicas Ajax é o Prototype: com apenas poucas linhas é possível fazer coisas maravilhosas! Faça o download do prototype, copie o arquivo prototype.js para o seu Desktop, crie um arquivo teste.htm, também na pasta Desktop, com o conteúdo abaixo e veja a surpresa:
<script type="text/javascript" src="prototype.js" mce_src="prototype.js" ></script>
<div id="divCep"></div>
<input type="text" id="campoCep" name="campoCep"/>
<a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="new Ajax.Updater('divCep',
'http://davi.locaweb.com.br/blog/form.asp', {asynchronous:true, parameters:'cep='+
document.getElementById ('campoCep').value}); return false;" >Validar
Cep</a>
A primeira linha é o ‘include’ do prototype; a segunda linha é a área onde será exibido o retorno da página executada pelo Ajax, no caso uma mensagem informando se o CEP é válido ou não; a terceira linha contém o campo de entrada do CEP; a quarta e última linha é a mais importante para nós. Vamos explicar resumidamente:
Ajax.Updater é o objeto que iremos executar, divCep é a área onde “colaremos” o retorno da página que iremos executar, http://davi.locaweb.com.br/blog/form.asp é a página que irá fazer a validação, asynchronous:true informa se a execução da página pode ser feita de forma assíncrona com a página principal, parameters são os parâmetros que devemos informar à página para que ela possa fazer o seu processamento.
Agora que já demos o gostinho, vamos nos despedir. Mas, se você deseja seguir adiante, aí vão alguns endereços com mais informação sobre o assunto. Divirta-se.
http://prototype.conio.net/ página oficial, http://www.sergiopereira.com/articles/prototype.js.html contém uma documentação muito boa, existe uma versão em português ;-).
Conheça também:
http://www.adobe.com/products/flex/, interatividade ao extremo usando a tecnologia “flash”.
http://www.openlaszlo.org/, segue a mesma proposta do flex, usa tecnologia “flash”.