Consulta interativa sem refresh com AJAX

AJAX, Javascript, PHP 110.837 visualizações

Fala pessoal, como o artigo de AJAX vem sendo muito acessado, resolvi fazer outro. Nesse artigo nós iremos aprender como fazer consultas no banco de dados sem a necessidade de refresh na página. Irei utilizar como exemplo, um simples “sistema de noticias”, onde cadastraremos noticias no banco de dados e através de um formulário faremos a busca de uma determinada noticia e exibiremos seu conteudo. Vamos lá!

Veja o resultado final, clicando aqui. (Procure por “Lorem Ipsum“, pois é o exemplo que está cadastrado)

1. Banco de dados

Antes de mais nada vamos criar nossa tabela no banco de dados, com três campos: id, titulo e conteudo. E depois inserir dois registros para utilizarmos como exemplo.

--
-- Estrutura da tabela `noticias`
--

CREATE TABLE `noticias` (
  `id` int(11) NOT NULL auto_increment,
  `titulo` varchar(200) NOT NULL,
  `conteudo` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Extraindo dados da tabela `noticias`
--

INSERT INTO `noticias` (`id`, `titulo`, `conteudo`) VALUES
(1, 'Lorem Ipsum', 'Praesent at sapien ultricies neque mattis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed nulla. Ut interdum erat ut orci. Nunc lorem pede, sagittis quis, tristique ac, blandit ac, arcu. Nam eget elit. Nullam in nisi. Nulla pede. Donec pulvinar gravida pede. Phasellus consequat nibh ut purus. Nulla et ipsum. Etiam tellus. Maecenas tincidunt tincidunt mi. Phasellus sed eros. Suspendisse orci. Nunc tincidunt mollis nisl. Sed quam.'),
(2, 'Lorem Ipsum 2', 'Morbi et arcu eget urna viverra varius. Integer sapien. Nam nulla ligula, tincidunt et, tempor ac, luctus eget, enim. Aenean ut nisi pretium metus elementum ultricies. Nam accumsan ligula quis magna. Sed non nisi. Quisque varius. Maecenas augue. Cras imperdiet sollicitudin tellus. Etiam a nisi eget sapien dignissim hendrerit. Curabitur vel nisi. Pellentesque in turpis.');

2. A página

Agora nossa página principal onde será feito a busca e a exibição dos dados:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Consulta interativa sem refresh com AJAX</title>
<script type="text/javascript" src="funcs.js"></script>
</head>

<body>
<h1>Consulta interativa sem refresh com AJAX</h1>
<br />
<input type="text" id="busca" onkeyup="buscarNoticias(this.value)" />
<div id="resultado"></div>
<br /><br />
<div id="conteudo"></div>
</body>
</html>

Antes de mais nada, incluimos o arquivo das funções, funcs.js, essas serão responsáveis pela requisição AJAX. Depois criamos um campo de busca onde a cada letra que você digitar ele irá fazer um requisição no banco de dados procurando uma noticia com o titulo igual ao digitado, tudo isso através da função buscarNoticias() – colocamos como parâmetro o valor do campo, ou seja, this.value. E ainda criamos duas divs, onde será exibido os titulos das noticias (resultado) e o outro onde será exibido o conteúdo da mesma (conteudo).

3. A função buscarNoticias()

Iremos criar essa função dentro do nosso arquivo funcs.js:

var req;

// FUNÇÃO PARA BUSCA NOTICIA
function buscarNoticias(valor) {

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

// Arquivo PHP juntamente com o valor digitado no campo (método GET)
var url = "busca.php?valor="+valor;

// Chamada do método open para processar a requisição
req.open("Get", url, true);

// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {

	// Exibe a mensagem "Buscando Noticias..." enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('resultado').innerHTML = 'Buscando Noticias...';
	}

	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {

	// Resposta retornada pelo busca.php
	var resposta = req.responseText;

	// Abaixo colocamos a(s) resposta(s) na div resultado
	document.getElementById('resultado').innerHTML = resposta;
	}
}
req.send(null);
}

Não vou entrar muito em detalhes. Aqui enviamos o valor para um arquivo PHP chamado busca.php, e nele iremos verificar se o valor existe no nosso banco de dados. De qualquer maneira, há resposta retornada pelo nosso busca.php será colocada na div resultado.

4. O arquivo busca.php

Antes de mais nada, vamos criar um arquivo para fazer a conexão com o banco de dados, iremos chamá-lo de conn.php, preencha-o com as informações de seu servidor:

<?php
$host = "localhost";
$usuario = "root";
$senha = "";
$banco = "nomedobanco";

$conn = mysql_connect($host, $usuario, $senha);
$db = mysql_select_db($banco, $conn);
?>

Pronto, agora que já temos nosso arquivo para realizar a conexão com o banco de dados, vamos criar o nosso arquivo de busca – busca.php:

<?php
// Incluir aquivo de conexão
include("conn.php");

// Recebe o valor enviado
$valor = $_GET['valor'];

// Procura titulos no banco relacionados ao valor
$sql = mysql_query("SELECT * FROM noticias WHERE titulo LIKE '%".$valor."%'");

// Exibe todos os valores encontrados
while ($noticias = mysql_fetch_object($sql)) {
	echo "<a href=\"javascript:func()\" onclick=\"exibirConteudo('".$noticias->id."')\">" . $noticias->titulo . "</a><br />";
}

// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

Aqui nosso arquivo PHP, irá retornar as noticias encontradas e cada noticia terá um link chamando mais uma função, dessa vez será a função exibirConteudo() – que recebe como parâmetro o ID da noticia. Então assim que o usuário clicar na noticia encontrada (onclick), a função exibirConteudo() será chamada para exibir o conteudo da noticia desejada.

5. A função exibirConteudo()

Dentro do nosso mesmo arquivo funcs.js, iremos adicionar essa função:

// FUNÇÃO PARA EXIBIR NOTICIA
function exibirConteudo(id) {

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

// Arquivo PHP juntamento com a id da noticia (método GET)
var url = "exibir.php?id="+id;

// Chamada do método open para processar a requisição
req.open("Get", url, true);

// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {

	// Exibe a mensagem "Aguarde..." enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('conteudo').innerHTML = 'Aguarde...';
	}

	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {

	// Resposta retornada pelo exibir.php
	var resposta = req.responseText;

	// Abaixo colocamos a resposta na div conteudo
	document.getElementById('conteudo').innerHTML = resposta;
	}
}
req.send(null);
}

Essa função funciona da mesma maneira que a buscarNoticias(), porém ela irá enviar o ID ao arquivo exibir.php e a resposta será colocada na div conteudo.

6. O arquivo exibir.php

Bom agora iremos criar o arquivo PHP para selecionar o conteúdo do banco de dados da noticia especificada.

<?php
// Incluir aquivo de conexão
include("conn.php");

// Recebe a id enviada no método GET
$id = $_GET['id'];

// Seleciona a noticia que tem essa ID
$sql = mysql_query("SELECT * FROM noticias WHERE id = '".$id."'");

// Pega os dados e armazena em uma variável
$noticia = mysql_fetch_object($sql);

// Exibe o conteúdo da notica
echo $noticia->conteudo;

// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

Esse arquivo simplesmente irá recuperar a ID enviada através do método GET pelo nosso javascript, irá procurar no banco de dados o registro com essa ID e retorna-lo para que seje colocado na div conteudo.

7. Finalizando

Mais uma vez, nós podemos concluir que com o AJAX é possível muito mais interatividade em nossos sistemas. Esse foi só um pequeno exemplo mais poderiamos utiliza-lo, tanto para consulta quanto para exclusão ou alteração no banco de dados. Espero que você tenha conseguido entender ao menos um pouco de como funciona as requisições com AJAX.

Em minha opnião o artigo Validação de campos sem refresh com AJAX ficou mais detalhado em relação aos códigos, caso você não tenha entendido muito bem, de uma olhada nele.

Download dos arquivos

Até a próxima!
Abraços

Publicado por Rafael Couto

Published