Fazendo uma requisição em Ajax sem uso de Plugins

Neste artigo irei mostrar como podemos trabalhar com Ajax sem usar nenhum tipo de plugin, fazendo uma requisição totalmente na "mão" por meio de código puro.

por Gregory Monteiro

Olá pessoal, nesse artigo vamos ver como fazer uma requisição ajax totalmente “na mão”, sem o uso de plugins.

A maioria dos programadores deve conhecer que para fazer o Ajax funcionar você utiliza praticamente 3 funções em JavaScript são elas: uma função para pegar o objeto xmlHttp do browser, uma função que verifica os status de “loading” da página e por fim a função que efetivamente pega as informações e envia para a página onde serão apresentados os resultados (ver Listagens 1, 2 e 3).

Listagem 1. Função que pega o objeto xmlHttp do browser

function GetXmlHttpObject() {
	var xmlHttp = null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

Na listagem 1 a função GetXmlHttpObject verifica qual navegador está sendo usado e retorna o objeto xmlHttp do navegador.

Listagem 2. Função que verifica os status de “loading” da página

function stateChanged() {
	if (xmlHttp.readyState==1 || xmlHttp.readyState==2 || xmlHttp.readyState==3) {
		document.getElementById("textoAjax").style.display="none";
	}
	if (xmlHttp.readyState==4) {
		document.getElementById("textoAjax").innerHTML=xmlHttp.responseText;
		document.getElementById("textoAjax").style.display="block";
	}
}

Na listagem 2 é verificado o status de processamento da nossa requisição pelo método readyState.

A propriedade do readyState prende o status da resposta do usuário. Cada vez que o readyState muda, a função do onreadystatechange estará executada.

Estão aqui os valores possíveis para a propriedade do readyState:

Estado	Descrição
0	Os pedidos não são inicializados
1	Que o pedido foi ajustado acima
2	O pedido foi emitido
3	O pedido está no processo
4	O pedido está completo

Listagem 3. Função que transmite as informações pelo método GET

function show() {
	if (xmlHttp == null) {
		alert ("Seu browser não suporta AJAX!");
		return;
	}else{
		var url = "pagina.html";
		xmlHttp.onreadystatechange = stateChanged;
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
	}
}

Na listagem 3 é verificado se o navegador suporta ajax então é feito uma requisição através do método GET para o arquivo “página.html”. Depois que um pedido é feito, nós necessitamos de uma função que possa receber os dados que são retornados pelo usuário. A propriedade do onreadystatechange armazena a função que processará a resposta para a nossa requisição.

Para passar as informações de usando o método POST basta fazer uma pequena alteração na função que transmite as informações (Listagem 3).

Na linha 8 mudar:
De:

xmlHttp.open("GET",url,true);

Para:

xmlHttp.open("POST",url,true);

Essa alteração seta no objeto xmlHttp o método post

Acrescentar abaixo dessa linha o seguinte código:

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Essa alteração Envia as informações de cabeçalho apropriado para a página que as receberão

Na linha 9 mudar:
De:

xmlHttp.send(null);

Para:

xmlHttp.send("var1="+str1+"&var2="+str2+"&var3="+str3);

Essa alteração envia as informações em variáveis, assim como numa querystring, porém, utilizando o método POST. (veja o código completo na Listagem 4)

Listagem 4. Função que transmite as informações pelo método POST

function show() {
	if (xmlHttp == null) {
		alert ("Seu browser não suporta AJAX!");
		return;
	}else{
		var url = "pagina.asp";
   		xmlHttp.onreadystatechange = stateChanged;
   		xmlHttp.open("POST",url,true);
   		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   		xmlHttp.send("var1="+str1+"&var2="+str2+"&var3="+str3);
	}
}

Agora vamos ao exemplo, crie uma página chamada “pagina.html”. (Listagem 5)

Listagem 5. Código da “pagina.html”

Requisição ajax feita com sucesso!

Em seguida crie uma página chamada “index.html” no mesmo diretório. (Listagem 6)

<html>
<head>
<title>index.html</title>
<script>
var xmlHttp = GetXmlHttpObject();
function show() {
	if (xmlHttp == null) {
		alert ("Seu browser não suporta AJAX!");
		return;
	}else{
		var url = "pagina.html";
		xmlHttp.onreadystatechange = stateChanged;
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
	}
}

function stateChanged() {
	if (xmlHttp.readyState==1 || xmlHttp.readyState==2 || xmlHttp.readyState==3) {
		document.getElementById("textoAjax").innerHTML="Carregando...";
	}
	if (xmlHttp.readyState==4) {
		document.getElementById("textoAjax").innerHTML=xmlHttp.responseText;
	}
}

function GetXmlHttpObject() {
	var xmlHttp = null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}
</script>
</head>
<body>
<div id="textoAjax"></div>
<script>show();</script>
</body>
</html>

Confira na figura 1 o resultado em um servidor localhost.

Figura 1. Resultado da requisição feita por ajax

Fico por aqui e bons códigos.