Olá desenvolvedores, seguindo com a implementação de um web service, neste caso, para buscar o cep e preencher de forma automática os campos de endereço. No tutorial onde escolhemos o serviço, falamos também um pouco sobre o que é um web service, e os cuidados necessários com a escolha da tecnologia de implementação deste web service. Agora é hora de colocar a mão na massa.

No site ViaCEP, escolhemos um exemplo usando jQuery. O jQuery é uma biblioteca de funções Javascvript que interage com o HTML. O objetivo dessa biblioteca é a simplificação dos scripts interpretados pelo navegador do cliente. Assim, o que seria implementado em Javascript com muitas linhas, com jQyery, o lema “Write less, do more” (escreva menos, faça mais) é verdadeiro. É possível criar diversificados efeitos com poucas linhas de código.

Assim, com o jQuery podemos selecionar elementos da DOM (árvore de elementos HTML), manipular o css, criar vários efeitos e animações, utilizar Ajax e eventos.

O AJAX – Asynchronous JavaScript and XML é um conjunto de técnicas de desenvolvimento voltado para as aplicações e sistemas web. Com o AJAX é possível criar páginas mais interativas. No “background” o AJAX trabalha de forma assíncrona, isto é, processando em segundo plano qualquer requisição ao servidor.

IMPLEMENTANDO O FORMULÁRIO

Vale ressaltar que o formulário que criaremos utiliza um evento chamado blur, um evento que é acionado quando o elemento perde o foco. Funciona assim, o usuário informa o CEP no campo indicado e quando pressiona, por exemplo, a tecla tab para ir para outro campo, automaticamente todos os campos serão preenchidos.

A implementação do CEP será na página cadastroUsuario.jsp, dessa forma o primeiro passo é fazer a importação da biblioteca jQuery. Atente-se, a biblioteca deverá ser importada dentro do head.

Uma dica importante após a importação da biblioteca, é, atualize a página F5 e depois CTRL + SHIFT + J, para acessar o console do navegador e verificar se a importação foi feita com sucesso. Se algum erro aparecer, será necessário rever o link de importação.

O próximo passo será a criação de um novo campo para o usuário inserir o CEP, irei posicioná-lo logo após o campo do telefone. Bem como os demais campos, rua, bairro, cidade, estado e o código do IBGE, Estes campos, a exemplo dos anteriores, deverão estar estruturados dentro de uma célula e consequentemente sendo cada um deles uma nova linha da tabela. O primeiro campo, o do CEP receberá o evento onblur que receberá a função consultaCep(). Em sua implementação proceda para os campos cidade, estado e o código do IBGE da mesma forma como exemplifica a imagem abaixo.

IMPLEMENTANDO A FUNÇÃO

Dentro da função o que iremos fazer primeiro é pegar o CEP utilizando jQuery e passar o id. E para fins de teste colocaremos um alert. Se testar agora com a alert você verá que já funciona.

O passo seguinte é fazer a requisição de consulta ao web service via cep, por meio do AJAX. Quando a consulta AJAX é disparada, o fluxo de processamento sai de dentro do sistema, isto é, ele é redirecionado para o endereço para qual estamos apontando.

Assim, estamos incorporando o serviço web em nosso projeto, isto é, consumindo um serviço externo ao projeto. Desse modo na função implementada, o retorno json será recebido pela variável dados.

Após a consulta precisamos então “setar” os dados que preencherão os demais campos. Assim, se o CEP informado for válido e consequentemente foi encontrado na base de dados, os dados pertinentes ao CEP informado serão exibidos.

Assim, agora é só testar. Lembrando sempre de iniciar o servidor. O resultado da nossa implementação, é mostrado abaixo. E claro, é válido para qualquer CEP.

E se o CEP não for encontrado? Seria interessante que os campos fossem exibidos vazio, ou seja, que retornassem ao estado anterior.

EM POUCAS PALAVRAS

Teste com o seu CEP também, dos seus amigos e se divirta mostrando para todos o sistema que você está desenvolvendo. Um sistema completo de cadastro de usuário. Mas ainda não é tudo. No próximo tutorial iremos trabalhar com o banco de dados, porque além de exibir os dados em tela, precisamos gravá-los também. Eu fico por aqui e nós nos vemos no próximo.