[Update 29/04/2015]
O XAJAX está obsoleto. Veja a versão deste artigo utilizando JQuery, clicando aqui.

Olá pessoal. Farei esse artigo a pedido de uma sugestão e também por ser um assunto bem interessante e interativo. Veremos como atualizar um div de segundos em segundos, ou seja, a cada N segundos iremos colocar um valor em uma DIV. Bom, vamos lá.

Irei utilizar como exemplo uma página que exibe frases sortidas (que estão no banco de dados) a cada 10 segundos. Para buscar os dados no banco a cada atualização utilizarei o framework XAJAX, por isso recomendo que você de uma olhada nesse artigo (caso não conheça o framework): Desenvolvimento interativo com o Framework XAJAX.

1. Banco de dados

Primeiramente vamos criar nossa tabela no banco de dados e inserir algumas frases:

CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `frase` varchar(255) NOT NULL,
  `autor` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

INSERT INTO `frases` (`id`, `frase`, `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');

Criamos uma tabela com três campos: a id da frase¹, a frase² e o autor da frase³.

2. PHP/XAJAX

Agora nós precisamos criar a função XAJAX responsável pela busca das frases no banco de dados:

<?php
// Conexão com o banco de dados
$conn = mysql_connect("localhost", "usuario", "senha");
$db = mysql_select_db("banco", $conn);

// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
 
// Instanciamos a classe
$xajax = new xajax();
 
// Registramos a função atualizar()
$xajax->registerFunction("atualizar");
 
// Criamos a função atualizar(), que será responsável por atualizar a div
function atualizar() {
        //Instância do objeto de resposta do Ajax
	$objResponse = new xajaxResponse();
 	// Buscamos uma frase
	$query = mysql_query("SELECT * FROM frases");
	// Verificamos o número de frases
	$numFrases = mysql_num_rows($query);
	// Sorteamos uma frase
	$sortido = rand(0, $numFrases - 1);
	// Frase sortida
	$frase = mysql_result($query, $sortido, 1);
	// Autor da frase sortida
	$autor = mysql_result($query, $sortido, 2);
	// Construimos a resposta
	$resposta = "<i>" . $frase . "</i><br />" . $autor;
	// Colocamos a frase e seu respectivo autor na div
	$objResponse->assign("frase", "innerHTML", $resposta);
	// Devolve a resposta para a página
	return $objResponse;
}

// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>

Legal. Agora vamos construir a base de nossa página, que deve conter a div com id igual a “frase”, pois a resposta do XAJAX será devolvida nessa div:

<html>
<head>
<title>Frases sortidas: Atualizar DIV de segundos em segundos com PHP/XAJAX</title>
</head>
<body onload="xajax_atualizar()">
<h1>Frases sortidas</h1>
<div id="frase"></div>
</body>
</html>

Perceba que no código acima, na tag body, chamamos a função xajax_atualizar() no evento onload, ou seja, quando carregar a página, se isso não for feito, a página terá de esperar 10 segundos para chamar a função e a frase não apareceria no início.

O framework XAJAX requer a impressão do código javascript, sendo assim, chamamos a seguinte no cabeçalho (head):

<?php
// Método para que seje gerado as funções javascript do XAJAX
$xajax->printJavascript("xajax/");
?>

E finalmente iremos utilizar a função javascript que vai fazer o trabalho de atualizar a div para nós:

<script language="javascript" type="text/javascript">
// Chamamos a função criada com XAJAX a cada 10 segundos
setInterval("xajax_atualizar()", 10000);
</script>

No código javascript acima nós utilizamos a função setInterval() que chama alguma função em um determinado intervalo de tempo (em milésimos); No nosso caso, iremos chamar a função atualizar() criada com XAJAX, ou seja, xajax_atualizar() a cada 10000 milésimos, ou seja, 10 segundos.

Bom então nosso projeto fica da seguinte maneira:

<?php
// Conexão com o banco de dados
$conn = mysql_connect("localhost", "usuario", "senha");
$db = mysql_select_db("banco", $conn);
 
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
 
// Instanciamos a classe
$xajax = new xajax();
 
// Registramos a função atualizar()
$xajax->registerFunction("atualizar");
 
// Criamos a função atualizar(), que será responsável por atualizar a div
function atualizar() {
        //Instância do objeto de resposta do Ajax
	$objResponse = new xajaxResponse();
 	// Buscamos uma frase
	$query = mysql_query("SELECT * FROM frases");
	// Verificamos o número de frases
	$numFrases = mysql_num_rows($query);
	// Sorteamos uma frase
	$sortido = rand(0, $numFrases - 1);
	// Frase sortida
	$frase = mysql_result($query, $sortido, 1);
	// Autor da frase sortida
	$autor = mysql_result($query, $sortido, 2);
	// Construimos a resposta
	$resposta = "<i>" . $frase . "</i><br />" . $autor;
	// Colocamos a frase e seu respectivo autor na div
	$objResponse->assign("frase", "innerHTML", $resposta);
	// Devolve a resposta para a página
	return $objResponse;
}
 
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>
<html>
<head>
<title>Frases sortidas: Atualizar DIV de segundos em segundos com PHP/XAJAX</title>
<?php
// Método para que seje gerado as funções javascript do XAJAX
$xajax->printJavascript("xajax/");
?>
<script language="javascript" type="text/javascript">
// Chamamos a função criada com XAJAX a cada 10 segundos
setInterval("xajax_atualizar()", 10000);
</script>
</head>

<body onload="xajax_atualizar()">
<h1>Frases sortidas</h1>
<div id="frase"></div>
</body>
</html>

Clique aqui para fazer download do projeto

Bom pessoal, espero que vocês tenham entendido e que esse artigo possa ser útil a você. Qualquer dúvida entre em contato através de email ou comentário.

Abraços.

Atualizar DIV de segundos em segundos com PHP/XAJAX

1. Banco de dados

2. PHP/XAJAX

Essa artigo foi útil?

Publicado por Rafael Couto