Olá pessoal. Nesse artigo irei ensiná-los como criar requisições em Ajax utilizando Javascript puro.

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ç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.

O artigo

Para aprendermos hoje, apenas utilizaremos o Bloco de Notas. Iremos utilizar somente HTML e Javascript.

Primeiro, iremos criar o index.html.

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

<html>
<head>
<title>
Criando requisição Ajax utilizando Javascript puro
</title>
</head>

<body>

<div>
<h3>
Criando requisição Ajax utilizando Javascript puro
</h3>
</div>

<div>
<a href="#" id="hrfInvokeScript">
Chamar requisição Ajax
</a>
</div>

<div id="retorno" style="padding: 10px; border: 1px solid; margin-top: 10px;">
Aqui será o nosso retorno da requisição...
</div>

</body>
</html>

Agora, criaremos o arquivo requisição.html, com o código abaixo.

<p style="color: red">
Essa requisição foi feita em Ajax utilizando Javascript puro... 🙂
</p>

Agora, inserimos o código Javascript abaixo, na página index.html

<script>
var hrfInvoke = document.getElementById("hrfInvokeScript");
hrfInvoke.addEventListener("click", function() {
	var divRetorno = document.getElementById("retorno");
	var xmlhttp = new XMLHttpRequest();	
	xmlhttp.onreadystatechange = function() {
		   if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
			  if (xmlhttp.status == 200) {
				  divRetorno.innerHTML = xmlhttp.responseText;
			  }
			  else if (xmlhttp.status == 400) {
				 divRetorno.innerHTML = 'Erro 400';
			  }
			  else {
				  divRetorno.innerHTML = xmlhttp.status;
			  }
		   }
	   };
	xmlhttp.open("POST", "requisicao.html", true);
	xmlhttp.send();
});
</script>

Pronto! Nosso artigo está finalizado. Abaixo, você pode conferir o resultado da nossa solução 🙂

Tela 1 - Criando requisições em Ajax utilizando Javascript puro

Tela 1 – Criando requisições em Ajax utilizando Javascript puro

 

Tela 2 - Resultado final - Criando requisições em Ajax utilizando Javascript puro

Tela 2 – Resultado final – Criando requisições em Ajax utilizando 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 😀

Se 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.

Posted by Thiago Vaini