Busca Dinâmica utilizando AJAX

Bom pessoal, hoje aprenderemos como fazer uma busca dinâmica utilizando PHP + MySql + Ajax (Javascript + XML).

Nosso objetivo será o seguinte: Pesquisar pelo nome das pessoas que estão cadastradas no banco de dados, sem que a página seja recarregada (a grande magia do AJAX); a página terá um campo que receberá as informações do usuário, para pesquisa. Na medida que uma palavra é digitada, o script envia uma requisição ao servidor e exibe os registros que estão sendo encontrados.

Bom vamos ao codigo:

Criando a tabela

CREATE TABLE `pessoa` (
  `id_pessoa` int(10) unsigned NOT NULL auto_increment,
  `nome` varchar(45) default NULL,
  PRIMARY KEY  (`id_pessoa`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Inserindo dados no banco


INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES  (1,'ALEXANDRE VIEIRA DE OLIVEIRA'),
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES  (2,'ALEXANDRE TESTANDO'),
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES  (3,'WAGNER DOS SANTOS'),
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES  (4,'VIRGINIA'),
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES  (5,'PEDALA ROBINHO'),
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES  (6,'MASSA DEMAIS');

Página index.php

<html>
<head>
<title>BUSCA DINÂMICA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="script.js"></script>
<script>
function pesquisa(valor)
{
//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX
url="busca_nome.php?valor="+valor;
ajax(url);
}
</script>
</head>

<body>
<table width="657" border="0" bgcolor="#f7f7f7">
  <tr> 
    <td align="center" bgcolor="#CCCCCC"><strong><font color="#FF0000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><- 
      BUSCA DIN&amp;Acirc;MICA -></font></strong></td>
  </tr>
  <tr> 
    <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIGITE 
      AQUI O NOME DA PESSOA</strong></font>: 
  <!--  NOTE Q A CADA TECLA PRESSIONADA É CHAMADA A FUNÇÃO PESQUISA PASSANDO O QUE O USUARIO TEM DIGITADO ATÉ O MOMENTO -->
      <input type="text" name="nome" onKeyPress="pesquisa(this.value)"></td>
  </tr>
  <tr>
    <td>
<!-- AQUI SERÁ APRESENTADO O RESULTADO DA BUSCA DINÂMICA.. OU SEJA OS NOMES -->
<div id="pagina"></div></td>
  </tr>
</table>

</body>
</html>

Arquivo de javascript usado: script.js

// JavaScript Document
// FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP
// E RETORNAR OS RESULTADOS

function ajax(url) 
{ 

//alert(nick);
//alert(dest);
//alert(msg);

    req = null; 
    // Procura por um objeto nativo (Mozilla/Safari) 
    if (window.XMLHttpRequest) { 
        req = new XMLHttpRequest(); 
        req.onreadystatechange = processReqChange; 
        req.open("GET",url,true); 
        req.send(null); 
    // Procura por uma versão ActiveX (IE) 
    } else if (window.ActiveXObject) { 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
        if (req) { 

            req.onreadystatechange = processReqChange; 
         req.open("GET",url,true); 
 
            req.send(); 
        } 
    } 
} 

function processReqChange() 
{ 

    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 

        // apenas se o servidor retornar "OK" 

        if (req.status ==200) { 

            // procura pela div id="pagina" e insere o conteudo 
            // retornado nela, como texto HTML 
            
document.getElementById('pagina').innerHTML = req.responseText; 

        } else { 
            alert("Houve um problema ao obter os dados:" + req.statusText); 
        } 
    } 
}

E a página que faz a busca em si: busca_nome.php

<?php 
if(!empty($_GET["valor"]))
{
// O CAMPO VALOR CONTERÁ O QUE O USUARIO DIGITOU ATÉ O MOMENTO..
// CONECTA AO BANCO COLOCA PARAMENTROS  IP,USUARIO,SENHA
$conexao=mysql_connect("localhost","root","1010");

//SELECIONA O BANCO DE DADOS QUE VAI USAR
mysql_select_db("pessoas");

// EXECUTA A INSTRUÇÃO SELECT  PASSANDO O QUE O USUARIO DIGITOU 
$sql="select * from pessoa where nome like '$_GET[valor]%'";
$resultado=mysql_query($sql) or die (mysql_error());

//VERIFICA A QUANTIDADE DE REGISTROS RETORNADOS
$linhas=mysql_num_rows($resultado);

if($linhas>0){
//EXECUTA UM LOOP PARA MOSTRAR OS NOMES DAS PESSOAS
// VALE LEMBRAR QUE TODOS ESSES RESULTADOS SERAO MOSTRADOS DENTRO DA PAGINA INDEX.PHP
// DENTRO DO DIV 'PAGINA'

while($pegar=mysql_fetch_array($resultado))
echo "$pegar[nome] ";
}

}
?>

É isso ae, espero que tenham gostado do artigo, qualquer dúvida entrem em contato: alexandre.etf@gmail.com

Até mais.

Enviar um Artigo