Busca simples em Ajax

Bem pessoal, criei um topico a um tempo atras, mas acho q pela dimensão do mesmo não foi muito aproveitado, é sobre um exemplo de paginação com Ajax http://forum.imasters.com.br/index.php?showtopic=290538

Sendo assim, resolvi criar um tutorial sobre uma busca simples em Ajax

você vai precisar ter um minimo de conhecimento em Javascript, Sql(banco de dados) e claro PHP

Vamos lá

1º Passo - criando a tabela do banco de dados, já com dados inseridos para o teste

CREATE TABLE `clientes` (
 `id` int(11) NOT NULL auto_increment,
 `nome` varchar(60) default NULL,
 `sobrenome` varchar(60) default NULL,
 `fone` varchar(10) default NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM;

insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (1,'joão','sousa','1111111111');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (2,'maria','silva','2222222222');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (3,'francisco','assis','3333333333');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (4,'josé','ribeiro','4444444444');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (5,'raimundo','soares','5555555555');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (6,'marta','sá','6666666666');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (7,'regina','carvalho','7777777777');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (8,'alberto','duarte','8888888888');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (9,'joana','souza','9999999999');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (10,'marina','diniz','1234567891');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (11,'miguel','alves','9876543219');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (12,'joaquim','ferreira','1122334455');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (13,'carlos','jr','9988774455');
insert into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (14,'danilo','almeida','4567891235');

2º Passo - seu arquivo de configuração de banco de dados, chamei de banco.php

<?php
$servidor = "seu servidor"; //SERVIDOR ONDE ESTÁ LOCALIZADO O BANCO DE DADOS
$bd = "seu banco"; //NOME DO BANCO DE DADOS
$usuario = "seu usuario"; //USUÁRIO PARA TER ACESSO AO MYSQL
$senha = "sua senha"; //SENHA DE ACESSO AO MYSQL

//CONECTANDO AO BANCO
$conn = @mysql_connect($servidor, $usuario, $senha)
or die("ERRO NA CONEXÃO, INFORME AO ADMINISTRADOR<br>Verifique:<br>Endereço do Servidor<br>Usuario do banco<br>Senha do banco<br><br>Arquivo: banco.php");

//SELECIONA O BANCO DE DADOS A SER UTILIZADO
$db = @mysql_select_db($bd, $conn)

 or die("ERRO NA SELEÇÃO DO BANCO DE DADOS, INFORME AO ADMINISTRADOR<br>Verifique:<br>O nome do Banco<br><br>Arquivo: banco.php");
?>

3º Passo - O código javascript que executa o ajax, atraves do objeto XmlHttpRequest (deem uma estudade sobre ele) , chamei script.js

function ajax(url)
{

req = null;

if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET",url,true);
req.send(null);

} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {

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

req.send();
}
}
}

function processReqChange()

{

if (req.readyState == 1) {
document.getElementById('pagina').innerHTML = 'Carregando,Aguarde...';
}

else if (req.readyState == 4) {

if (req.status ==200) {

document.getElementById('pagina').innerHTML = req.responseText;

} else {

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

4º Passo - Nosso cliente.php

<?php
require("banco.php");
?>
<script src="script.js"></script>
<script>
	function pesquisa(valor)
	{
 url="buscar_cliente.php?valor="+valor;
 ajax(url);
	}
</script>
<?php
if ($_GET[codigo]){
	$sql = "select id,nome,sobrenome,fone from clientes where id='$_GET[codigo]'";
	$sql_result = mysql_query($sql);
	$l = mysql_fetch_array($sql_result);
	$id = $l[0];
	$nome = $l[1];
	$sobrenome	= $l[2];
	$fone = $l[3];

	echo "
	Id: <strong>$id</strong> <br>
	Nome: <strong>$nome</strong> <br>
	Sobrenome: <strong>$sobrenome</strong> <br>
	Fone: <strong>$fone</strong> <br>
	<a href=\"cliente.php\">voltar</a>
	";

}

else{

	echo "
	<form name=\"form1\">
	<b>Descrição</b><br/>
	<input type=\"text\" size=\"47\" name=\"nome\" id=\"nome\" onKeyUp=\"pesquisa(this.value)\">
	<br/>
	</form>
	<div id=\"pagina\"></div>";

}

5º Passo - o arquivo que fará a busca, atraves da url passada pelo GET do script.js, chamo buscar_cliente.php

<?php
header("Content-Type: text/html; charset=ISO-8859-1",true);
require("banco.php");
if(!empty($_GET["valor"]))

{

$sql = "select id,nome from clientes where nome like '$_GET[valor]%' order by nome";
$resultado = mysql_query($sql) or die ("Houve erro!! Digite corretamente sua busca!");
$linhas = mysql_num_rows($resultado);
if($linhas>0){
echo "<table border=\"0\" cellpadding=\"3\" cellspacing=\"3\" width=\"15%\">";
echo "<tr bgcolor=\"#DDDDDD\"><th>Nome</th></tr>\n";

while ($l = mysql_fetch_array($resultado)) {

 $codigo = $l[0];
 $nome = $l[1];

 echo "<tr bgcolor=\"#AADDFF\"><td><a href=\"cliente.php?codigo=".$codigo."\">".stripslashes($nome)."</a></td></tr>";
	}

}

else{

 echo "<tr bgcolor=\"#AADDFF\"><td>Consulta vazia, por favor tente outra vez!!</td></tr>";
 }

}
?>

aqui vcs podem ver funcionando: http://cgsoftweb.com/teste/busca/cliente.php

Bem, espero q aproveitem http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

abraços