Uma busca diferente com AJAX

Neste artigo iremos construir uma busca por cada dígito do teclado, com o auxílio do AJAX.
Temos uma página que terá o formulário para a busca e outra que irá receber o dígito e realizar a busca listando os dados encontrados.

Passo 01: Crie o arquivo busca.php e coloque o seguinte formulário e div.

busca.php

<form name="form" action="" onSubmit="return false">
<input name="nome" value="" onKeyUp="recuperardados()">
</form>

<div id="conteudo">
</div>

A ação onKeyUp irá acessar a função que busca os dados pela palavra que estiver no input, o conteúdo trago irá ficar no lugar do div abaixo.

Passo 02: Abra a tag script ainda na página busca.php e insira esse trecho de código dentro que é a nossa função javascript que irá trazer os dados.

function recuperardados() {
var nome = document.form.nome.value;
var ajax = new AJAX();
ajax.Updater("listar.php?digito="+nome,"conteudo","get","carregando os dados...");
}

Na função, recuperamos o valor do input, instanciamos o objeto AJAX e chamamos o método Update passando como parâmetro a página PHP que fará a busca, o nome da objeto html onde o resultado será exibido, o método da busca e a mensagem enquanto os dados são trazidos.

Passo 03: Crie o arquivo ajax.js, inclua esse trecho de código e depois importe esse arquivo em nossa página de busca.

ajax.js

function AJAX() {

this.Updater=carregarDados;
function carregarDados(caminhoRetorno,idResposta,metodo,mensagem) {

var conteudo=document.getElementById(idResposta)
conteudo.innerHTML= mensagem;

var xmlhttp = getXmlHttp();

//Abre a url
xmlhttp.open(metodo.toUpperCase(), caminhoRetorno,true);

//Executada quando o navegador obtiver o código
xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){

//Lê o texto
var texto=xmlhttp.responseText;

//Desfaz o urlencode
texto=texto.replace(/+/g," ");
texto=unescape(texto);

//Exibe o texto no div conteúdo

var conteudo=document.getElementById(idResposta);
conteudo.innerHTML=texto;

}
}
xmlhttp.send(null);
}
}

function getXmlHttp() {
var xmlhttp;
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
return xmlhttp;
}

Temos a função carregarDados que recebe os parâmetros passados na página de busca e traz os dados da nossa página que realiza a listagem.

Passo 04: Crie o arquivo listar.php e coloque o seguinte trecho de código.

<?
$con = mysql_connect("localhost","root","");
mysql_select_db("test",$con);

print urlencode("palavra <b>".$_GET['digito']."</b>");

$sql = "select * from cliente where nome like '%".$_GET['digito']."%'";

$rs = mysql_query($sql,$con);
while($linha = mysql_fetch_array($rs)) {
print urlencode($linha['nome']."");
}
mysql_close($con);
?>

Neste arquivo, nós construimos a query que fará a busca pelo parâmetro que nós recebemos da página de busca.

USE test;
CREATE TABLE cliente
(
id int not null auto_increment,
nome varchar(120) not null,
primary key(id)
);
INSERT INTO cliente(nome) values ("Rogerio");
INSERT INTO cliente(nome) values ("Fabio");
INSERT INTO cliente(nome) values ("Roberto");
INSERT INTO cliente(nome) values ("Adriano");
INSERT INTO cliente(nome) values ("Lucas");
INSERT INTO cliente(nome) values ("Ana");
INSERT INTO cliente(nome) values ("Ana Paula");

Pronto! Agora é só testar.

Até a próxima.

Enviar um Artigo