Preenchendo formulário HTML automaticamente com AJAX

Inicialmente, poderíamos adicionar algum tipo de botão ou listener que ficasse responsável em fazer uma requisição HTTP enviando o CEP, e então, recarregasse o formulário automaticamente.

Porém, quando estamos em formulários de cadastro de endereço, como por exemplo em sites de e-commerce, é muito comum adicionarmos apenas o CEP e as informações já aparecerem sem ao menos recarregar a página, certo?

Da nossa forma inicial, ou seja, recarregando a página, não entregaríamos essa experiência para o usuário... E agora?

Entendendo o AJAX

Através do Javascript conseguimos enviar requisições para determinadas URLs e obter suas respostas sem que as páginas sejam recarregadas, em outras palavras, quando o usuário sair do campo do CEP ou clicar em um botão, a busca do mesmo será efetuada e as informações serão preenchidas para usuário sem que a página recarregue.

Esse método de requisição no Javascript é conhecido como AJAX. Legal, mas como poderíamos aplicar esse tal de AJAX? Em um primeiro momento podemos pensar em simplesmente realizar o download de uma biblioteca contendo a funcionalidade que precisamos, talvez a mais famosa seja o JQuery.

Porém não parece ser uma boa idéia incorporar uma biblioteca em nosso projeto apenas para realizar um AJAX, pois estaríamos utilizando cerca de 10% do que a mesma pode nos oferecer.

Então como devemos solucionar o problema sem criar uma dependência com terceiros? Criaremos nossa própria funcionalidade para buscar os CEPs para atingir o resultado desejado.

Pegando o formulário HTML

Nosso primeiro passo será de fato pegar o nosso formulário HTML para aplicarmos o AJAX. Para este exemplo farei uso deste formulário que está no meu Github, ou seja, se você quiser seguir o passo a passo, pode baixar também! ;)

Com o HTML pronto, precisamos começar a implementação da busca de CEP conforme nosso cliente havia solicitado, para tal recurso iremos utilizar o web service do viacep, um serviço gratuito na web que nos permite recuperar informações referente a determinados CEP's.

Criando requisições com XMLHttpRequest

O Javascript nativo possui um objeto responsável por realizar requisições AJAX conhecido como XMLHttpRequest, ou seja, por meio dele podemos recuperar dados de uma determinada URL. Apesar do nome, ele pode ser usado para recuperar qualquer tipo de dado e fornece suporte aos protocólos HTTP, FILE e FTP.

Vamos então criar uma instância do objeto para começarmos a utilizá-lo:

Com o objeto criado, vamos utilizar o método open para começarmos a criar a nossa requisição:

O método open recebe três parâmetros, sendo eles:

1. O verbo HTTP a ser utilizado para realizar a requisição, o mesmo deve seguir o padrão REST.
2. A URL que pretendemos obter os dados.
3. Um argumento booleano informando se a requisição deve ser assíncrona ou síncrona.

Agora precisamos implementar a propriedade onreadystatechange que é disparada sempre que nossa requisição sofre alguma alteração durante seu processamento:

Repare que passamos uma função de callback, ou seja, uma função que sempre será executada assim que a requisição sofrer alguma alteração. Quando implementamos essa função precisamos tomar alguns cuidados, o primeiro é verificar se a mesma foi finalizada, mas como fazer essa verificação? Fazemos isso através do xhr.readyState:

O código 4 nos informa que a requisição foi finalizada, porém ainda não é suficiente, afinal, finalizada não significa que foi bem sucedida, portanto, é necessário verificar se ela foi realizada com sucesso também! Portanto, faremos uso do xhr.status pra isso:

O código 200 nos informa que a requisição obteve sucesso durante seu processamento. Isso significa que agora podemos acessar a resposta que o servidor nos enviou e realizar alguma função desejada.

Preenchendo os campos no formulário

Até o momento já devemos ser capazes de obter as informações do nosso serviço de CEP, começaremos então a criar uma função que será invocada a cada clique em um botão:

O primeiro passo será pegar a referência do campo CEP para obtermos seu valor:

Feito isso já podemos começar construir nossa URL:

Com nossa URL pronta, podemos começar a implementar o XMLHttpRequest conforme visto anteriormente:

Tudo pronto, certo? Entretanto nosso web service exige que o CEP venha apenas com números, em outras palavras, se deixarmos apenas os dados que estamos pegando do campo referente ao CEP, podemos enviar, por exemplo, um CEP com o seguinte formato "12345-123", que é uma forma comum em formulários na web.

Caso isso aconteça nossa requisição irá falhar e não conseguiremos obter as informações... Como podemos resolver o problema? Precisamos de fato retirar a formatação do CEP antes de enviá-lo da seguinte maneira:

Realizamos um replace para retirar o - do CEP, agora para testar nosso serviço podemos informar o CEP 13845-373 em nosso formulário e clicar no botão, onde iremos ver a resposta do servidor:

Como podemos ver, através do responseText conseguimos obter a resposta do nosso servidor, porém o JSON está em formato de string, sendo assim, precisamos convertê-lo para um objeto JSON em Javascript, podemos fazer isso através do JSON.parse:

Ao mandar nosso formulário buscar o CEP novamente, iremos notar a mudança da saída em nosso console que agora passou a ser um objeto e não uma string:

Para finalizar, precisamos pegar os dados do objeto e passar para nossos inputs, para isso vamos criar uma função que recebe o JSON como parâmetro e popula nossos campos:

Nossa função completa fica da seguinte maneira:

Ao realizarmos a busca novamente iremos notar que nossos inputs serão preenchidos com a resposta do servidor:

Veja que agora já somos capazes de realizar requisições AJAX do tipo GET com Javascript puro. Dessa forma evitamos a necessidade de depender de uma biblioteca para um simples recurso e conseguimos entregar a funcionalidade nova para nosso cliente.