Criando requisições Ajax em Javascript puro


imprimir

Introdução

Nesse artigo iremos aprender como fazer uma requisição em Ajax utilizando Javascript puro. É verdade que hoje em dia é mais fácil, e até mais comum, utilizarmos jQuery para fazer requisições em Ajax. No entanto, caso você fizer uma aplicação simples sem jQuery, esse artigo irá lhe ajudar muito.

Antes de começar…

Antes de começarmos nosso artigo, é importante ler sobre o XMLHttpRequest().

Recomendo a leitura do site W3Schools – http://www.w3schools.com/xml/dom_http.asp
Lá você encontrará melhor especificado sobre o que é, para que serve, seus métodos e propriedades.

É importante saber que esse artigo somente funciona se você tiver hospedado as páginas que criaremos em algum servidor web, do contrário não irá funcionar, pois os navegadores não aceitam esse tipo de requisição feito na máquina local por questões de segurança.

Artigo

Acredito que todos sabem o que é uma requisição em Ajax, não é mesmo? Mas, para quem não sabe, requisição em Ajax nada mais é do que fazer uma requisição a um arquivo (.html, .txt, .json, …) e manipular o conteúdo do retorno sem que precisemos dar um reload na página em que estamos.

Exemplificando, podemos utilizar Ajax em uma adição, edição ou exclusão de registros, para carregar uma lista e preencher uma tabela com o resultado, quando escolhemos a UF e a cidade em que moramos principalmente e em diversas outras ocasiões.

Vamos aprender como se faz? Hoje não irei utilizar o Visual Studio para criar nossa aplicação, pois trata-se de algo simples, o que o bloco de notas serve bem para nossa ocasião.

Primeiramente iremos criar o arquivo index.html.

Nele, usarei o HTML básico que está abaixo.

Agora, criaremos o arquivo requisicao.html (ele será requisitado e retornará com o código que colocarmos nele), com o código abaixo.

Agora, vamos inseri o código Javascript abaixo, na página index.html (se quiser, você pode – e deve – criar um arquivo .js separado e incluir na página index.html. Mas para ganhar tempo, faremos a lógica diretamente na página).

Pronto! Agora, basta enviar os arquivos criados para o seu servidor e testar. As imagens abaixo mostram como será o nosso resultado final.

Tela1 - Requisição Ajax em Javascript puro
Tela1 – Requisição Ajax em Javascript puro
Tela2 - Resultado final - Requisição Ajax em Javascript puro
Tela2 – Resultado final – Requisição Ajax em Javascript puro

Hoje em dia é mais difícil encontrar sistemas que utilizem somente Javascript puro para interação com o usuário. No entanto, mesmo que pouco, ainda é utilizado e, para quem trabalha com desenvolvimento de site, é sempre importante saber da onde as coisas surgem e para onde elas evoluem 😀 , além de que conhecimento nunca é demais!

Caso vocês tiverem dúvidas, sugestões, ou algo que não deu certo, é só postar nos comentários abaixo que terei o prazer em ajudá-lo.

Espero ter sido útil e ajudado a quem estava em busca dessa dúvida.