Ok! Já chega dessa história de evitar usar esse negócio que é tão comentado hoje em dia, e que você só conheceu “por cima” por achar engenhoso e complicado de meter a mão. Vamos aprender (ou pelo menos tentar)! E pra você que já sabe, vai confirmar o aprendizado ou até mesmo me ensinar 
Eu já havia comentado sobre ele aqui mas meu objetivo agora é começar do 0 (zero), passo-a-passo, um exemplo da aplicabilidade de PHP + AJAX + MYSQL, pra fazer você entender cada linha de código e o que cada coisa faz.
Pronto(a)? Go!
1. O que faremos?
Para os viajantes criativos este exemplo será uma base parar a criação de vários outros brinquedos úteis em suas páginas apartir de agora. Faremos um campo auto-sugestão. Apartir de um campo de texto simples, à medida que um usuário vai entrando com um texto, a página vai mostrando o que provavelmente ele está procurando.
1.1 E vou precisar de que?
Um bloco de notas, um banco de dados MYSQL ou outro, e um servidor que rode PHP de qualquer versão.
2. Começando… (azul: código, verde: comentário)
- Crie: form.html
Insira lá o código abaixo e vamos aos comentários:
<html>
<script type=”text/javascript”>
var http = false;
/*
Este bloco IF é necessário antes de começar qualquer implementação do AJAX. Ele cria os objetos específicos de cada navegador para manipulação das solicitações ao servidor. Os navegadores Mozilla Firefox, Safari, Opera e Konqueror atualmente usam XMLHttpRequest, que é com um objeto JavaScript nativo. O Internet Explorer foge desta regra e implementa o recurso ActiveX. É por isso que a forma de se iniciar uma implementação de AJAX nas páginas acontece de forma diferente.
*/
if(navigator.appName == “Microsoft Internet Explorer”) {
http = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
http = new XMLHttpRequest();
}
/*
Esta aqui é a função da nossa mini lógica de negócio. Ela vai receber a entrada do usuário através do campo texto chamado “nome”. Lá no campo “nome’, à medida que uma tecla é digitada a função “procurar()” vai ser acionada (onKeyUp=”procurar(this.value)”), ou seja, a cada entrada do usuário o Javascript será acionado e enviará de forma totalmente rápida e transparente os dados para a função PHP, que faremos logo adiante; assim, em milissegundos a coisa vai acontecer.*/
function procurar(nome) {
http.open(“GET”, “buscaPessoas.php?nome=” + nome, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById(‘labelNome’).innerHTML = http.responseText;
}
}
http.send(null);
}
/*
Explicando o código de forma mais técnica:
O objeto (http) criado acima vai receber os parametros semelhantes à um formulário normal <form>: método de submissão e página que receberá os dados do form. O “onreadystatechange” manipula eventos na página, normalmente uma chamada qualquer a uma função JavaScript. O “readystate” determina a situação atual da solicitação. Varia de 0 a 4, sendo 0 não-iniciada; 1 carregando, 2 carregada, 3 em processamento, 4 concluída. Iremos passar portanto, quando a página estiver concluída (status 4) o resultado da nossa futura função php no “labelNome”. Daí o “http.send” envia a solicitação ao servidor, podendo passar algum parâmetro, o que não é o nosso caso, já que estamos fazendo um “GET” e passando parâmetro via URL (“nome”).
*/
</script>
<!– Aqui nosso campo nome e o método que acionará a função procurar() que criamos acima. A cada tecla digitada a função Javacript vai ser acionada, que consequentemente fará a página buscaPessoas.php enviar o valor do campo para ser consultado… isso veremos ali na frente. –>
Buscar um nome: <input type=”text” name=”nome” size=”12″ onKeyUp=”procurar(this.value)”> <span id=”labelNome”></span>
</html>
Ok. Já temos o formulário e as funções necessárias ao nosso Auto-sugestão do lado do cliente. Agora vamos ao código “server-side” que magicamente parecerá “client-side” pra você.
- Crie agora: buscaPessoas.php
Insira nela o código abaixo e vamos aos comentários:
<?php
/*
Se você tem um banco MYSQL à disposição, vamos usá-lo. Teste se consegue conectar, e vamos em frente…
*/
function sugerir($nome) {
//crie a sua conexão php ao seu banco, neste exemplo usei MYSQL:
mysql_connect(“enderecodoseubanco”,”login”,”senha”);
mysql_select_db(“nomedoseubanco”);
/*
crie uma tabela “usuario” e uma coluna “nome”. Daí você insere uns nomes lá para utilizarmos aqui. Então, faz um Select procurando por nomes que contenham o que foi digitado lá no formulário pelo usuário. Entendeu né?. Ah, o “like” do SQL significa: com o termo, e as porcentagens descartam início e fim deste trecho, podendo ele estar no meio de uma palavra.
*/
$sql = “SELECT nome FROM usuario where nome like ‘%” . $nome . “%’” ;
$qry = mysql_query($sql); //faz a consulta...
$linha = mysql_fetch_array($qry); //joga o conjunto de resultados numa variável
$num = mysql_num_rows($qry); //traz o número de linhas retornadas
/*
Se nada for digitado no campo ou a consulta não retornar resultados, mostra-se uma mensagem (opcional – você pode deixar em branco se quiser). Se conseguiu encontrar um registro que bateu lá no banco, então mostra pra o usuário.
*/
if($nome == “” || $num == 0) {
return ‘Ops! nada encontrado.’;
} else {
return $linha['nome'];
}
}
//Aqui mandamos o php utilizar o que chegou pela URL (nossa função “procurar(nome)” , lembra?)
echo sugerir($_REQUEST['nome']);
?>
E é só. Rápido, não? Agora o que falta é você ler tudo, entender direitinho e testar. Vai por mim, ler tudo neste caso aqui vai te ajudar a virar um verdadeiro conhecedor de AJAX e consequentemente ter sucesso criando futuras aplicações. Ah, eu prometi nunca publicar o meu projeto final de curso na rede, mas uma situação como essa eu acho merecedora de um material de apoio escrito à próprio punho pelo papai aqui. Então, agora vamos aos links:
- Baixar os arquivos mastigados
- Baixar minha monografia “TECNOLOGIA ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) APLICADA A UM SISTEMA WEB” (Dezembro de 2007)
Não esquece de vir contar o que é que deu nesta sua jornada, ok?
