Busca com Ajax, PHP e MySQL

Dicas AJAX

Aumentar texto
A-A+

Esta é uma simples busca com Ajax, PHP e MySQL, onde a página com o resultado da busca é carregada através do Ajax e mostrada na mesma página do formulário da busca.

O còdigo fonte da página html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<html>
<head>
<title>Busca simples com Ajax, PHP, MySQL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="scripts.js"></script>
</head>

<body>
	<b>Digite o que procura</b>
	<!--Aqui o formulário para a busca-->
	<form name='busca'>
		<input type="text" name="produto">
		<input type="button" value="buscar" onclick="mostraConteudo('busca.php?produto='+document.busca.produto.value,'resultado_busca')">
	</form>
	<!--Fim do formulário busca-->
	<br />

	<b>Resultado da busca</b><br />

	<!--Aqui é onde vai aparecer o resultado da busca-->
	<div id="resultado_busca"></div>

</body>
</html>

O còdigo fonte da página PHP

<?php

//Resgata valor por get digitado no formulário
$busca = $_GET['produto'];


/*Faz conexão com banco 
/*e seleciona base dados
$conexao = mysql_connect('localhost', 'root', '') or die  ("Erro na conexão ao banco de dados.");
mysql_select_db('ajax',$conexao) or die ("Erro ao selecionar a base de dados.");

//Monta consulta SQL
$sql = mysql_query("SELECT * FROM produtos WHERE nome  LIKE  '%".$busca."%'") or die ("Não foi possível realizar a consulta.");
$total_rows = mysql_num_rows($sql);

//Aqui verifica se veio algum resultado
 if($total_rows == 0){
 	
	echo "Nenhum resultado encontrado";
 }
 else{
	
 	//Loop com resultado do select
    while ($result = mysql_fetch_array($sql)) {
	
	 echo $result['nome']."<br />";
	

    }
 }

O còdigo fonte do script Ajax

var xmlhttp = null;
// ConexÃ£o via 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;
    	}
	}
}
	
function mostraConteudo(url, div) {
	// Seleciona objeto
	obj_div = document.getElementById(div);
   	// Verifica se existe xmlhttp
   	if (xmlhttp) {	
   		if(xmlhttp.readyState != 1){	
			xmlhttp.open("GET", url, true);
			xmlhttp.onreadystatechange = function() {
			   	// Verifica estado da requisiÃ§Ã£o
			    if (xmlhttp.readyState == 1) {
			    	obj_div.innerHTML = "Aguarde ...";
			    } else if (xmlhttp.readyState == 4) {
			    	// Verifica status da requisiÃ§Ã£o
					if (xmlhttp.status == 200) {
						obj_div.innerHTML = xmlhttp.responseText;
					} else {
						obj_div.innerHTML = "Erro ao carregar ...";
					}
				}
			}
   		}
   	}
   	xmlhttp.send(null);
}