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.

A página

Vamos construir a base de nossa página.

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

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

Atualizar

Em seguida, criaremos o arquivo PHP responsável por sortear uma frase e retornar à requisição.

  • 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/Post1298

Obs: Este artigo é um remake deste.

Compartilhe
Share on Facebook1Share on Google+0Tweet about this on TwitterPin on Pinterest0Email this to someone