7 Visitantes Online
Redes Sociais

Ajax

Você está aqui: Home » Ajax » Busca Dinâmica utilizando AJAX

Busca Dinâmica utilizando AJAX

Postado em 12/04/2006 | 31848 leituras

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Â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>:

<input type="text" name="nome" onKeyPress="pesquisa(this.value)"></td>
</tr>
<tr>
<td>

<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:n" + 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] <br>";
}

}
?>

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

Até mais.

Sobre o Colunista:

Alexandre Vieira de Oliveira

Profissão: Desenvolvedor web com ênfase em php, Técnico em informática com especialização em : montagem e manutenção de computadores, Desenvolvimento de Sistemas, Comunicação de Dados , e acadêmico de Desenvolvimento de Sistemas Web - CEFET-TO

Descrição: conhecimentos em aplicações web... com ênfase na Linguagem PHP e banco de dados mysql.. Atualmente utilizando AJAX.. \n www.comparepalmas.com.br

Bem vindo ao SOS Designers

Empresas

Usuarios

Área de Empresas | Vagas

Área de Usuarios | Curriculos

Ajax

Busca Dinâmica utilizando AJAX

Alexandre Vieira de Oliveira

Outros artigos postados por este autor

Artigos relacionados sobre Ajax