Tutorial: Como fazer uma div se atualizar sem refresh ou reload da pagina completa?

5

Junho 17, 2012 por Firmino Changani

Como fazer uma div se atualizar sem refresh ou reload da pagina completa?

Eu fiz esta pergunta quando estava desenvolvendo o meu projeto de final de curso e houve a necessidade de tornar a pagina muito dinâmica, como fazer consultas automática na bd, etc.

Requisitos: conhecimentos básicos de HTML, CSS, JQUERY, PHP, MYSQL.

Basicamente irei criar um pagina index.php que vai receber o conteudo de uma outra pagina conteudo.php que vai conter uma consulta de uma tabela na bd.

Na pagina index.php
Depois de incluir o jquery na pagina, criei a variável que armazena a função que chama ou executa uma outra função através de seus argumentos num tempo predefinido (em milissegundos), a sintaxe desta é muito window.setInterval(nossa_função, tempo em milissegundos); no script abaixo defini 1 segundo, quer dizer que a função será chamada a cada 1 segundo.

Depois criamos a função que vai chamar ou requisitar ou até mesmo incluir se preferirem a pagina da consulta na nossa div. Para fazer isso usamos o método .load(), que também tem um sintaxe simples: $(‘#div_que_vai_receber_a_pagina’).load(“pagina_a_incluir.html”);

A parte do JS

var tempo = window.setInterval(carrega, 1000);
function carrega()
{
$('#conteudo').load("page.php");
}


A parte do html

No ficheiro page.php

<?php
$bd = mysql_connect("localhost", "root", "");
$dados = mysql_select_db("ajax", $bd);

$consulta = mysql_query("SELECT * from frases ORDER BY autor");

while($linha = mysql_fetch_array($consulta))
{
$frase = $linha['frase'];
$autor = $linha['autor'];

echo $frase;
echo"
";
echo $autor;
}
?>


E o a tabela.

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=12 ;

--
-- Extraindo dados da tabela `frases`
--

INSERT INTO `frases` (`id`, `frase`, `autor`) VALUES
(1, '"Os homens erram, os grandes homens confessam que erraram."', 'Voltaire'),
(10, 'eafeafffdsfadsfdfdfdffadf', 'dfafsfdfsfdsfdsfsdfds'),
(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'),
(9, 'Antonio Agostinho Neto', 'A, Eu já não espero, eu sou aquele por quem vocês'),
(11, 'afwfewffefeafewaff', 'weaffefafewfaefwafefff');


E já está, temos um script que vai chamar uma função a cada 1 segundo e esta função inclui na div uma pagina com conteúdo dinâmico, de modo pratico a div vai se atualizando a cada 1 segundo.