Esta matéria é mais uma utilidade geral do que uma matéria voltada especificamente para o público de ColdFusion, isso porque o que se faz via CF é muito pouco.
Aqui vamos brincar um pouco com Ajax e CSS. Estou utilizando a Lib jQuery (ww.jquery.com) para fazer a transação Ajax. O CSS é a perfumaria que vai dar uma aparência mais “formatada” ao formulário. Neste caso não é para ser bonito, apenas legível.
Mas onde vamos buscar o endereço atravésdo CEP?
Para isso vamos usar um serviço fornecido gratuitamente pelo site “republicavirtual.com.br“
Mãos à obra!
Baixe a última versão da lib jQuery no site “jquery.com“
Eu gosto de usar esta API do jQuery para consultas “http://jquery.bassistance.de/api-browser/“
Vou explicar rapidamente alguns dos recursos do jQuery que utilizo neste exemplo.
Para indicar os objetos e elementos de uma página, o jQuery utiliza um método conhecido no CSS, por exemplo:
No CSS:
- Indicar um elemento pela Tag
textarea{
color:red;
}- Indicar um elemento pelo atributo “class”
.nomeDoEstilo{
color:red;
}
- Indicar um elemento pelo atributo “id”
#idDoElemento{
color:red;
}- Agora a mesma sequência no jQuery:
$("input")
$(".nomeDoEstilo")
$("#idDoElemento")O jQuery dispõe de muitas funções totalmente úteis, que só facilitam nossa vida e torna o desenvolvimento de qualquer rotina muito mais produtiva. Para esta matéria vamos utilizar apenas 3 dessas funções:
- val(): Retorna o valor dentro do atributo “value” de um elemento “input” ou o valor selecionado de um “select” ou o conteúdo de um “textarea”.
- show(): Exibe qualquer elemento escondido atravéS do “style display”.
- hide(): Esconde qualquer elemento atravéz do “style display”.
Toda vez que utilizamos uma função no jQuery, temos que referenciá-la através de um elemento obtido via jQuery. Ou seja, se eu preciso saber o valor digitado no campo “CEP”, eu preciso indicar este campo:
Ex.:
$("#cep").val();Para alterar o valor, basta informá-lo também utilizando a função val(),
Ex.:
$("#cep").val("000000");Uma conexão ajax é bastante simples utilizando jQuery. A função ajax possui vários atributos complementares que não são obrigatórios,
Ex.:
$.ajax({
url: "retorno.js",
dataType: "script"
});Neste exemplo, minha conexão ajax espera que do outro lado exista um javascript para ser executado, a página não precisa ser JS, mas não pode ter espaços exagerados e deve ter um javascript válido.
O atributo dataType faz toda a diferença dependendo da sua necessidade (xml, html, script, json), no meu exemplo, se o arquivo “retorno.js” possui um “alert(‘Pan!’);” nossa resposta será a janela de alert “Pan!”
Agora sim, vamos criar um arquivo “.htm” qualquer
index.htm
Este arquivo deve conter a base de um html. Nele vamos incluir o CSS, o SCRIPT jQuery e o formulário, não vou descrever o CSS porque não é de minha autoria, foi extraído do site designmeltdown.com
[INÍCIO DO CÓDIGO DA PÁGINA INDEX.HTM]
<html>
<head>
<title>Exemplo busca CEP Ajax</title>
<metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1">
<!-- Faça o include do estilo -->
<linkrel="stylesheet"type="text/css"href="estilo.css">
<!-- Faça o include da lib do jQuery -->
<scripttype="text/javascript"src="scripts/lib/jquery.js"></script>
<scripttype="text/javascript">
// Função única que fará a transação
function getEndereco() {
// Setamos os parâmetros que serão utilizados pelo Ajax
var url ="ajx_cep_xml.cfm"; // Nome do arquivo da execução
var parameters ="cep="+$("#cep").val(); //Parâmetros que serão necessários,
parameters +="&data="+Date(); //Este data é Fake, só para forçar o IE a buscar sempre uma informação nova
// Aqui entra o Ajax
$.ajax({
type:"POST",
url: url,
data: parameters,
dataType:"script",
beforeSend:function(){
//Estou dizendo para o ajax exibir a mensagem de "carregando" antes de executar a consulta
$("#loadmsg").show();
},
complete:function(){
//Estou dizendo para o ajax ocultar a mensagem de "carregando" quando o processo terminar
$("#loadmsg").hide();
},
error:function(){
//Caso ocorra algum erro, estou dizendo para o ajax ocultar a mensagem de "carregando" e me alertar.
$("#loadmsg").hide();
alert("Não foi possível encontrar o endereço");
}
});
}
</script>
<style>
/**
Só mais um esilo para enfeitar o nosso "carregando..."
*/
#loadmsg{
position:absolute;
background:url(img/loading_32_2.gif) top left no-repeat #FAFAD2;
padding:10px 5px 10px 35px;
float:right;
border:1px solid #CCCCCC;
font-family:verdana;
font-size:10px;
color:#000000;
}
</style>
</head>
<body>
<divid="loadmsg"style="display:none;z-index:1;">Carregando...</div>
<!--
O formulário é simples. A única coisa diferente é o atributo "onBlur" no campo "cep". O onBlur executa um comando javascript assim que o campo perde o foco. Neste caso eu chamo a função javascript "getEndereco()"
-->
<formid="StyleMe"name="StyleMe"method="post"action="">
<fieldset>
<legend>Formulário de exemplo</legend>
<labelfor="cep">CEP:</label>
<inputname="cep"id="cep"size="9"maxlength="8"onBlur="getEndereco()"/>
<br/>
<labelfor="rua">Logadouro:</label>
<inputname="rua"id="rua"size="50"/>
<br/>
<labelfor="bairro">Bairro:</label>
<inputname="bairro"id="bairro"size="30"/>
<br/>
<labelfor="cidade">Cidade:</label>
<inputname="cidade"id="cidade"/>
<br/>
<labelfor="estado">Estado</label>
<inputname="estado"id="estado"size="2"maxlength="2"/>
<br/>
<inputtype="button"value="Ok"class="button">
</fieldset>
</form>
</body>
</html>
[FIM DO CÓDIGO DA PÁGINA HTM]Agora vamos criar a página CFM que fará a pesquisa do CEP. Vamos chamá-la de “ajx_cep_xml.cfm”
[INÍCIO CÓDIGO DA PÁGINA AJX_CEP_XML.CFM]
<!--- Eu usei cfsetting para desabilitar o debug caso esteja ligado, qualquer código html na página fará com que o retorno do jQuery não seja executado causando um erro --->
<cfsettingshowdebugoutput="no">
<!---
Estou utilizando o recurso "suppresswhitespace" da tag "cfprocessingdirective";
Este recurso faz com que todo o espaço em vazio excedente seja descartado, mantendo somente o que realmente nos interessa, é como se fosse um TRIM pra sua página inteira:
--->
<cfprocessingdirectivesuppresswhitespace="yes">
<!---
Vamos criar uma variável que vai conter nossa url de conexão somada ao parâmetro CEP que vem via POST do nosso Ajax:
--->
<cfset vUrlXML = "http://cep.republicavirtual.com.br/web_cep.php?cep="&form.cep&"&formato=xml">
<!---
Usando CFHTTP fazemos a conexão ao serviço de CEP
--->
<cfhttpurl="#vUrlXML#"method="GET"resolveurl="Yes"charset="iso-8859-1"/>
<!---
Agora usamos a função XMLParse com o conteúdo retornado pelo CFHTTP e atribuímos o seu retorno à nova variável chamada "xml"
--->
<cfset xml = XmlParse(CFHTTP.FileContent)>
<!---
Agora que temos uma estrutura de XML, podemos manipular a informação que recebenos do nosso amigo da república.
O retorno é uma estrutura XML que pode variar no caso de não encontrar o CEP
<?xml version="1.0" encoding="iso-8859-1" ?>
<webservicecep>
<resultado>1</resultado>
<resultado_txt>sucesso - cep completo</resultado_txt>
<uf>SP</uf>
<cidade>São Paulo</cidade>
<bairro>Vila das Vitórias</bairro>
<tipo_logradouro>Rua</tipo_logradouro>
<logradouro>Rodrigues Silva</logradouro>
</webservicecep>
Se não encontrar o retorno será este
<?xml version="1.0" encoding="iso-8859-1" ?>
<webservicecep>
<resultado>0</resultado>
<resultado_txt>cep não encontrado</resultado_txt>
</webservicecep>
--->
<cfif xml.webservicecep.resultado.xmltext>
<!--- Se o serviço encontrou seu endereço, nós criamos um retorno javascript jQuery válido que fará o preenchimento dos seus devidos campos --->
<cfoutput>
$("##rua").val("#Trim(xml.webservicecep.tipo_logradouro.xmltext)# #Trim(xml.webservicecep.logradouro.xmltext)#");
$("##bairro").val("#Trim(xml.webservicecep.bairro.xmltext)#");
$("##cidade").val("#Trim(xml.webservicecep.cidade.xmltext)#");
$("##estado").val("#Trim(xml.webservicecep.uf.xmltext)#");
</cfoutput>
<cfelse>
<!--- Caso não encontre, ele retorna um "alert" que será exibido na sua página --->
alert("CEP não encontrado");
</cfif>
</cfprocessingdirective>
[FINAL DO CÓDIGO DA PÁGINA CFM]Com isso está concluído este exemplo de preenchimento automático de endereço através do CEP. Abaixo você pode fazer o download dos arquivos que foram utilizados neste exemplo.
Espero que este exemplo seja útil, até logo!
Download: CEP.zip
De 0 a 10, o quanto você recomendaria este artigo para um amigo?