Introdução ao AJAX (Parte II) – Construindo uma aplicação simples com AJAX e PHP

No primeiro artigo da série estivemos escrevendo sobre as tecnologias necessárias para a construção de uma aplicação que utiliza AJAX para minimizar os tempos de carregamento de página e dar mais dinamismo a uma consulta ou mesmo uma página convencional, caso não tenha ainda tido acesso a este conteúdo considere acessar, Introdução ao AJAX (Parte I) – Tecnologias envolvidas. Hoje iremos construir uma pequena aplicação para demonstrar o potencial desta fantástica técnica chamada AJAX.

Primeiro exemplo em AJAX

Este exemplo é para aqueles leitores que são um pouco afoitos e desejam logo ver o que se está pesquisando em ação. Certamente não utilizaremos as melhores técnicas de programação a esta altura mas já teremos condições de mostrar o potencial e também familiarizar com alguns comandos e termios relativos ao AJAX. Iremos construir um aplicativo que faz, simplesmente, requisições AJAX enquanto o usuário está digitando um texto em uma caixa.

ajax

Enquanto o usuário está digitando, o script realiza uma chamada ao servido de forma assíncrona, em intervalos regulares para tentar reconhecer o nome que está sendo digitado. O servidor é chamado regularmente, em intervalos que se aproximam a um segundo, por isso não precisamos nem de um botão de ação. Para você, talvez, não veja nada de extraordinário a acontecer, pois é uma funcionalidade simples, porém este é o primeiro exemplo e tentaremos fazer os leitores a entender o funcionamento do AJAX como um todo. O que de mais “impressionante” é a mensagem que vêm, automaticamente, do servidor e é exibida automaticamente na tela, sem que precisemos recarregar a página.

Serão necessários 3 arquivos para realizar nossa primeira “mágica”:

  • index.html
  • exemplo-1.js é um arquivo contendo código JavaScript que é carregado no cliente junto com o index.html. Este arquivo guardará as requisições que iremos fazer ao servidor em forma de AJAX.
  • exemplo-1.php é o script que identificará se o cliente é conhecido ou não e retornará a mensagem para o index.html.

HTML

<!DOCTYPE html> 
<html> 
<head> 
	<title>Primeiro exemplo de AJAX</title> 
	<script type="text/javascript" src="exemplo-1.js"></script> 
</head> 
<body onload='process()'> 
Insira seu nome para pesquisa: <input type="text" id="nome" /> 
<div id="resposta"></div> 
</body> 
</html>

JAVASCRIPT

var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {

	var xmlHttp;
	// se estiver executando em IE
	if(window.ActiveXObject) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			xmlHttp = false;
		}
	}
	// se estiver executando no Mozilla ou outros browsers
	else {
		try {
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			xmlHttp = false;
		}
	}
	if(!xmlHttp)
		alert("Error creating the XMLHttpRequest object.");
	else
		return xmlHttp;
}

function process() {

	if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
		// requisição de fato
		name = encodeURIComponent(document.getElementById("nome").value);
		xmlHttp.open("GET", "exemplo-1.php?nome=" + name, true);
		xmlHttp.onreadystatechange = handleServerResponse;
		xmlHttp.send(null);
	} else
		setTimeout('process()', 1000);

}

// executed automatically when a message is received from the server
function handleServerResponse() {

	if(xmlHttp.readyState == 4) {
		// status 200, representa sucesso
		if(xmlHttp.status == 200) {
			xmlResponse = xmlHttp.responseXML;
			xmlDocumentElement = xmlResponse.documentElement;
			helloMessage = xmlDocumentElement.firstChild.data;
			// mostrando a resposta do servidor
			document.getElementById("resposta").innerHTML = '<i>' + helloMessage + '</i>';

			setTimeout('process()', 1000);
		} else {
			alert("There was a problem accessing the server: " + xmlHttp.statusText);
		}
	}
}

PHP

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
echo '<response>';

// retrieve the user name
$nome = $_GET['nome'];
// generate output depending on the user name received from client
$nomes_cad = array('JAIR', 'JOÃO');
if (in_array(strtoupper($nome), $nomes_cad))
	echo 'Olá, ' . htmlentities($nome) . '!';
else if (trim($nome) == '')
	echo 'Por favor, insira seu nome!';
else
	echo htmlentities($nome) . ', você não está cadastrado!';
// close the <response> element
echo '</response>';
?>

O que aconteceu realmente?

Apenas visualizando o código e o que aconteceu na tela do computador talvez não seja suficiente para que você entenda o que realmente o código representa. Tentarei agora explicar com mais detalhes o que ocorreu no código. Assim que o arquivo HTML é carregado ele faz uma requisição AJAX através da função process() que está no arquivo javascript. Está função faz a requisição AJAX do tipo GET para o arquivo exemplo-1.php, o qual verifica se o nome digitado está vazio, pertence ao grupo de nomes “cadastrados” ou não, dependendo de cada uma dessas situações a resposta será diferente. A função process() trata de chamar a função handleServerResponse para que trate a resposta e atualize a div resposta com o conteúdo da resposta, depois disso o método processe() dorme por 1000 milissegundos para que volte a ser executado.

Neste primeiro exemplo podemos ter uma ideia do que o AJAX é capaz, este é apenas o primeiro exemplo prático que teremos durante está série, espero que todos acompanhem e aprendam.

E você já conhecia o AJAX, o que está achando?

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br