Atualizar DIV de segundos em segundos com PHP/JQuery/AJAX

AJAX, JQuery, PHP 45.844 visualizações

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.

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.

<!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

// 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> com id igual à “frase”, ou seja, #frase;
  • Linha 14: Utilizamos então a função setInterval() para chamar a função atualizar() 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ção setInterval() 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.

<?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.

<?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 do LIMIT 1 pegamos o primeiro resultado;
  • Linha 13: Armazenamos a frase em uma variável, pois o SELECT retornará 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/atualizar-div-de-segundos-em-segundos-com-php-jquery-ajax/

Obs: Este artigo é um remake deste.

Veja também

  1. Atualizar DIV de segundos em segundos com PHP/XAJAX
  2. Carregamento dinâmico de registros com PHP/JQuery/AJAX
  3. Sistema de votação simples com PHP/JQuery/AJAX
  4. Upload dinâmico com PHP/jQuery

Publicado por Rafael Couto

Published