Nesse artigo veremos como atualizar uma <div> de segundos em segundos, ou seja, a cada N segundos iremos colocar um valor em uma <div>. Iremos utilizar como exemplo uma página que exibe frases sortidas, que estão em um banco de dados, a cada 10 segundos.
Confira o exemplo em funcionamento, clicando aqui.
Banco de dados
Primeiramente, vamos criar nossa tabela no banco de dados e inserir algumas frases de exemplo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | CREATE TABLE IF NOT EXISTS `frases` ( `id` int(11) NOT NULL AUTO_INCREMENT, `texto` varchar(255) NOT NULL, `autor` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8; INSERT INTO `frases` (`id`, `texto`, `autor`) VALUES (1, ‘”Os homens erram, os grandes homens confessam que erraram.”‘, ‘Voltaire’), (2, ‘”O que sabemos é uma gota, o que ignoramos é um oceano.”‘, ‘Isaac newton’), (3, ‘”Penso, logo existo.”‘, ‘René Descartes’), (4, ‘”Educai as crianças, para que não seja necessário punir os adultos.”‘, ‘Pitágoras’), (5, ‘”Todo o homem é culpado do bem que não fez.”‘, ‘Voltaire’), (6, ‘”A natureza fez o homem feliz e bom, mas a sociedade deprava-o e torna-o miserável.”‘, ‘Jean Jacques Rosseau’); |
A página
Vamos construir a base de nossa página.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Atualizar DIV de segundos em segundo com PHP/JQuery/AJAX</title> <script src=“https://code.jquery.com/jquery-2.1.3.min.js”></script> <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”> </head> <body> <div class=“container”> <h1>Frases sortidas</h1> <div id=“frase”></div> </div> </body> </html> |
Apenas uma página simples que contém uma <div> com id igual a “frase”. Incluímos também a biblioteca JQuery que será utilizada para fazer a requisição AJAX e o Bootstrap apenas para uma melhor aparência.
O lado cliente
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Função responsável por atualizar as frases function atualizar() { // Fazendo requisição AJAX $.post(‘ajax/atualizar.php’, function (frase) { // Exibindo frase $(‘#frase’).html(‘<i>’ + frase.texto + ‘</i><br />’ + frase.autor); }, ‘JSON’); } // Definindo intervalo que a função será chamada setInterval(“atualizar()”, 10000); // Quando carregar a página $(function() { // Faz a primeira atualização atualizar(); }); |
- Linha 1: Criamos a função
atualizar()que é responsável por buscar uma frase no servidor e alocar na<div>; - Linha 5: Fazemos uma requisição AJAX ao servidor. Essa requisição irá retornar um objeto JSON que contém as propriedades da frase (id, texto, autor);
- Linha 8: Exibimos a frase na
<div>comidigual à “frase”, ou seja,#frase; - Linha 14: Utilizamos então a função
setInterval()para chamar a funçãoatualizar()a cada 10000 milésimos, ou seja, 10 segundos; - Linha 19: Por fim, chamamos a função
atualizar()ao carregar a página, para que sorteie a primeira frase, pois a funçãosetInterval()só fará sua primeira chamada após 10 segundos do carregamento da página.
O lado servidor
Conexão
Arquivo responsável pela conexão com o banco de dados utilizando PDO.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php // Informações para conexão $host = ‘localhost’; $usuario = ‘root’; $senha = ‘root’; $banco = ‘rafaelcouto’; $dsn = “mysql:host={$host};port=3306;dbname={$banco};charset=utf8”; try { // Conectando $pdo = new PDO($dsn, $usuario, $senha); } catch (PDOException $e) { // Se ocorrer algum erro na conexão die($e->getMessage()); } |
Atualizar
Em seguida, criaremos o arquivo PHP responsável por sortear uma frase e retornar à requisição.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php // Incluindo arquivo de conexão require_once(‘../config/conn.php’); // Selecionando uma frase aleatória $stmt = $pdo->prepare(‘SELECT * FROM frases ORDER BY RAND() LIMIT 1’); // Se selecionado com sucesso if ($stmt->execute()) { // Armazenando frase $frase = $stmt->fetchObject(); // Retornando frase em formato JSON echo json_encode($frase); } |
- Linha 7: Buscamos uma frase sortida no banco de dados. Utilizamos a função
RAND()do MySQL para gerar um número aleatório e ordenamos por ele, e através doLIMIT 1pegamos o primeiro resultado; - Linha 13: Armazenamos a frase em uma variável, pois o
SELECTretornará apenas um registro; - Linha 16: Através da função
json_encode()convertemos o objeto da frase, armazenando anteriormente, em JSON e então retornamos ele.
Conclusão
Bom, a ideia desse artigo foi mostrar como é simples fazer uma requisição AJAX ao servidor em um intervalo pré-definido. Vimos um exemplo bem simples e sem muita utilidade, porém a mesma ideia pode ser utilizada para atualizar um webmail, um painel ou até mesmo um chat simples.
Código fonte disponível em: https://github.com/rafaelcouto/Post1298
Obs: Este artigo é um remake deste.
