Carregamento dinâmico de registros com PHP/JQuery/AJAX

Olá pessoal, tudo certo? O artigo de hoje foi baseado em uma sugestão que achei interessante. Trata-se de um carregamento dinâmico de registros, assim como no twitter que, em nossa home, quando clicado em “more” ele nos traz mais tweets. Outro exemplo é o formspring.me que quando clicado em “more” ele nos traz mais perguntas. No nosso caso, iremos utilizar frases como exemplo.

Confira o resultado final, clicando aqui.

1. Banco de dados

Como sempre, vamos criar nossa tabela no banco de dados e incluir alguns registros de exemplo:

-- Estrutura da tabela `frases`
CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `texto` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
  `autor` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13;
 
-- Extraindo dados da tabela `frases`
INSERT INTO `frases` (`id`, `texto`, `autor`) VALUES
(1, 'A imaginação é mais importante que o conhecimento.', 'Albert Einstein'),
(2, 'O mundo não está ameaçado pelas pessoas más, e sim por aquelas que permitem a maldade.', 'Albert Einstein'),
(3, 'Tente mover o mundo - o primeiro passo será mover a si mesmo.', 'Platão'),
(4, 'Os homens erram, os grandes homens confessam que erraram.', 'Voltaire'),
(5, 'Só os mortos conhecem o fim da guerra.', 'Platão'),
(6, 'Duas coisas são infinitas: o universo e a estupidez humana. Mas, no que respeita ao universo, ainda não adquiri a certeza absoluta.', 'Albert Einstein'),
(7, 'Se minha Teoria da Relatividade estiver correta, a Alemanha dirá que sou alemão e a França me declarará um cidadão do mundo. Mas, se não estiver, a França dirá que sou alemão e os alemães dirão que sou judeu. ', 'Albert Einstein'),
(8, 'Educai as crianças, para que não seja necessário punir os adultos.', 'Pitágoras'),
(9, 'Não existem métodos fáceis para resolver problemas difíceis.', 'René Descartes'),
(10, 'A natureza fez o homem feliz e bom, mas a sociedade deprava-o e torna-o miserável.', 'Jean Jacques Rousseau\r\n'),
(11, 'Muitos odeiam a tirania apenas para que possam estabelecer a sua.', 'Platão'),
(12, 'Os homens dizem que a vida é curta, e eu vejo que eles se esforçam para a tornar assim.', 'Jean Jacques Rousseau');

2. Conexão (conn.php)

Vamos criar nosso arquivo que será responsável pela conexão com o banco de dados:

<?php
// Informações para conexão
$host = 'localhost';
$usuario = 'root';
$senha = 'senha';
$banco = 'banco';
// Realizando conexão e selecionando o banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Definindo o charset como utf8 para evitar problemas com acentuação
$charset = mysql_set_charset('utf8');
?>

3. Estrutura (index.php)

Agora iremos montar a estrutura inicial de nossa página:

<?php require_once('conn.php') ?>
 
<!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="en" lang="en">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Carregamento dinâmico de registros</title>
</head>
 
<body>
 
<div id="frases">
    <?php
    // Selecionando as três últimas frases cadastradas
    $query = mysql_query('SELECT * FROM frases ORDER BY id LIMIT 0,3');
    // Exibindo frases selecionadas
    while ($frase = mysql_fetch_object($query))
        echo "<p lang='{$frase->id}'>\"{$frase->texto}\" <br /> <em>{$frase->autor}</em></p>";
    ?>
</div>
 
<span id="status"></span> <a href="javascript:func()" id="mais">Mais frases »</a>
 
</body>
</html>

Linha 1: Incluímos o arquivo de conexão;
Linha 16: Selecionamos as últimas três frases cadastradas em nossa tabela;
Linha 18 e 19: Passamos por cada frase e então exibimos seu texto e autor dentro de um parágrafo (p). Colocamos o id dessa frase dentro da propriedade LANG;
Linha 23: Criamos um elemento (span) com ID igual a “status” onde será colocado o loader. Logo adiante criamos um link que será responsável por buscar mais frases.

Portanto, todas as frases estão dentro de uma DIV com ID igual a “frases” e cada parágrafo (p) dentro dessa DIV representa uma frase.

4. jQuery

Agora iremos baixar a última versão do jQuery. Depois de baixado, basta incluí-lo em nossa página (de preferência no cabeçalho):

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

Incluído o jQuery, vamos ao nosso código:

<script type="text/javascript" language="javascript">
    $(function($) {
        // Quando clicando em "Mais frases"
        $("#mais").click(function() {
            // Recuperamos o id da última frase selecionada, que foi armazenado na propriedade LANG
            var ultimo = $("#frases p:last").attr("lang");
            // Mensagem de carregando
            $("#status").html("<img src='image/loader.gif' alt='Enviando' />");
            // Faz requisição ajax e envia o ID da última frase via método POST
            $.post("ajax/buscar.php", {ultimo: ultimo}, function(resposta) {
               // Limpa a mensagem de carregamento
               $("#status").empty();
               // Coloca as frases na DIV
               $("#frases").append(resposta);
            });
        });
    });
</script>

Linha 4: Quando clicado no nosso link “Mais frases” que tem como ID “mais”;
Linha 6: Recuperamos o valor da propriedade LANG do último parágrafo (p:last), ou seja, recuperamos o id da última frase selecionada;
Linha 8: Colocamos na DIV “status” a imagem do nosso loader;
Linha 10: Fazemos a requisição com nosso arquivo buscar.php e passamos, através do método POST o id da última frase selecionada;
Linha 12: Quando terminado a requisição, limpamos a DIV “status”, através do método empty(), ou seja, removemos o loader;
Linha 14: Colocamos cada frase retornada na DIV “frases”, logo após o conteúdo já existente, por isso utilizamos o método append().

5. PHP (ajax/buscar.php)

Por último, vamos ao arquivo responsável por buscar as frases, a partir da última já exibida:

<?php
// Conexão
require_once('../conn.php');
 
// Recuperando informações
$ultimo = (int) $_POST['ultimo'];
 
// Selecionando mais três frases, a partir da última
$query = mysql_query("SELECT * FROM frases WHERE id < {$ultimo} ORDER BY id DESC LIMIT 0,3");
 
// Retornando frases
while ($frase = mysql_fetch_object($query))
    echo "<p lang='{$frase->id}'>\"{$frase->texto}\" <br /> <em>{$frase->autor}</em></p>";
?>

Linha 3: Incluímos o arquivo de conexão;
Linha 6: Recuperamos o id da última frase selecionada, passado através do método POST;
Linha 9: Selecionamos apenas as frases que tem um id menor que o da última, ordenados em ordem decrescente e apenas os três primeiros resultados (LIMIT 0,3);
Linha 12 e 13: Passamos por cada frase e então exibimos seu texto e autor dentro de um parágrafo (p). Colocamos o id dessa frase dentro na propriedade LANG, seguindo a mesma estrutura da página inicial.

6. Conclusão

Bom pessoal, por hoje é isso. Vimos mais uma vez a facilidade de manipular os elementos de nossa página com jQuery. Espero que vocês tenham gostado.

Download dos arquivos

Abraços.

16 comments

Fabrício N 30 de maio de 2010 at 15:17

Perfeito Rafael, mais uma vez solucionando dúvidas e problemas, abraço.

Reply ↓
Rodrigo 1 de junho de 2010 at 23:59

Parabéns, ótimo tutorial.

Reply ↓
Iaponã Pedroza 10 de setembro de 2010 at 23:57

Perfeito Rafael. Caraca cumpadi, Deus te abençôe por essa inteligencia e facilidade de compartilhar que vc tem. Vida longa e próspera parceiro! ||\\//||

Reply ↓
Rafael 15 de setembro de 2010 at 12:47

Parabéns fera
Venho acompanhando seus tutoriais, o que tenho a dizer é que são muito bons.

Continue sempre ai ajudando a galera.

Abraço.

Reply ↓
Zinhani 24 de novembro de 2010 at 21:06

Olá,

É possível fazer um carregamento continuo?

Digamos que dados são atualizados constantemente em um banco (sql) e precisamos carregar esses dados de forma continua sempre que for atualizado.

Da mesma forma que vc fez com as msgs mas sem precisar clicar em um botão.

Obrigado

Reply ↓
- Rafael 1 de dezembro de 2010 at 8:25
  
  Olá Zinhani,
  
  Nesse caso, você poderia utilizar um timer para ficar atualizando, assim como nesse artigo:
  http://faael.net/atualizar-div-de-segundos-em-segundos-com-php-xajax/
  
  Abraço.
  
  Reply ↓
Denis 22 de fevereiro de 2011 at 12:57

Ola Rafael primeiramente parabens cara você é muito bom e tem uma didática incrível, eu tenho uma dúvida e gostaria de saber como saná-la.
Em relação ao carregamento dinâmico de registros como é feito o do facebook? sei que é bem parecido com o que você fez ai porem o evento deve ser outro neh? algum evento q ao chegar ao final da pagina carregue os outros registros como isso eh feito?

Reply ↓
Emmanuel 22 de março de 2011 at 16:53

Caro rafael, no internet explorer , esta mostrando um erro na linha 1, caracter 1, o que poderia ser?

Reply ↓
Fabrício 2 de agosto de 2011 at 2:11

Olá Rafael, estou tentando adaptar o sistema de carrregamento dinâmico no sistema de votação simples, mas estou tendo alguma dificuldades na parte de Ajax, não consigo mostrar mais frases para votar… sabe como resolver? Abraço

Reply ↓
Carine Monteiro 16 de agosto de 2011 at 20:32

Olá Rafael, parabéns pelo blog, muito interessante e tem me ajudado.
Usei este post como exemplo e configurei tudo certo para pegar os registros do meu BD, utilizo duas funções Xajax na mesma página em DIVs diferentes.
Mas localmente as duas funcionam, já quando coloco no servidor, uma delas não é carregada. Tem algum idéia do que pode ser?
Abraços

Reply ↓
Adriano Ricardo 22 de outubro de 2011 at 14:26

Olá parceiro, esta de parabéns, você tem um conteúdo incrível e apenas com 19 anos (igual a mim), sou de Avaré e estou morando ai do seu lado em Jaú hehe

Estou com uma dúvida, sabe me dizer a diferença técnica entre empty() e hide()?

levando o ingles ao pé da letra fica:
hide() -> esconder
empty() -> vazio ou deixar vazio

Eu creio que hide() apenas esconde mas o elemento continua e o empty() limpa deixando a área limpa sem elementos, estou correto?

Reply ↓
- Rafael 3 de novembro de 2011 at 19:07
  
  Olá Adriano,
  
  Obrigado.
  Exatamente. Lá no site do jQuery tem a documentação completa, vale a pena conferir. Ex: hide(), empty().
  
  Abraço.
  
  Reply ↓
Erick Basilio 28 de dezembro de 2011 at 21:01

Parabéns pelos seus tutoriais! Seu site é muito útil e bem organizado, continue assim!

Reply ↓
Yuri 25 de janeiro de 2012 at 7:44

Rafael, nesse artigo a onde foi ultilizado o arquivo “buscar.php”?
Pois no index já tem a consulta mysql qua traz as frases.

Abraço.

Reply ↓
JLânio Morais 27 de janeiro de 2012 at 16:35

Meus parabéns! Ótimo post, e excelente conteúdo aqui no site.

Reply ↓
Matheus Felipe 19 de fevereiro de 2012 at 12:13

Parabéns, show de bola…
Olha to quebrando a cabeça com um sistema de rede social que estou desenvolvendo, queria fazer um sistema tipo o do facebook e do orkut ( quando tiver atualizações ele avisar com mensagem e quando a pessoa clicar na mensagem carregar as ultimas notificações de seus amigos)………..
E pq eu ñ progamo em javascript, ai fica muito dificil….
Vlw por ler essa minha duvida OBG….

Reply ↓

Rafael Couto

Desenvolvimento e simplicidade na web