javascript

Atualização automática assíncrona com AJAX

Share This:

Vamos fazer uma lista com atualização automática e assíncrona com AJAX, você pode usar esta lista para um portal de notícias por exemplo, ou para diversos outros projetos.
Para isso precisamos de um arquivo .html e outro .php, no primeiro faremos o layout e chamaremos o AJAX, no segundo faremos a conexão com o banco de dados, mas para começar crie uma tabela chamada lista no seu banco de dados com este script:

CREATE TABLE IF NOT EXISTS `lista` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`titulo` text NOT NULL,
`texto` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB 
DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Depois vamos ao arquivo index.html onde devemos criar uma div com o nome lista dentro do body, e deixe-a vazia:

<div id="lista">
</div>

No cabeçalho do arquivo inclua a biblioteca jQuery, que deve estar na mesma pasta do projeto e crie o código que realiza o AJAX:

<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 comeca();
 })
 var timerI = null;
 var timerR = false;

function para(){
 if(timerR)
 clearTimeout(timerI)
 timerR = false;
 }
 function comeca(){
 para();
 lista();
 }
 function lista(){
 $.ajax({
 url:"lista.php",
 success: function (textStatus){
 $('#lista').html(textStatus); //mostrando resultado
 }
 })
 timerI = setTimeout("lista()", 60000);//tempo de espera
 timerR = true;

}
 </script>

Veja que determinei o valor de 60000, para o método setTimeout, valor que é equivalente a 60 segundos.
Dando continuidade faremos agora o arquivo lista.php, que é usado para conexão e consulta ao banco de dados, para isso é preciso o usuário e senha do banco, no exemplo usamos o servidor local: localhost, com usuário padrão: root, e senha em branco.

<?php
 mysql_connect('localhost', 'root', '') or die('Erro ao conectar com o servidor'); //Conectando no servidor
 mysql_select_db('lista') or die ('Erro ao selecionar o banco de dados'); //selecionando o banco de dados
 $sql='select * from lista order by id desc'; //buscando registros
 $resultados=mysql_query($sql)
 or die (mysql_error());
 if (@mysql_num_rows($resultados)==0)
 echo "Não há nenhum item cadastrado";
 while($res=mysql_fetch_array($resultados)){
 ?>
 <h2><?php echo $res[1] ?></h2>
 <p><?php echo $res[2] ?></p>
 <?php
 }
?>

Pronto, agora para testar cadastre itens no banco de dados estando com a página aberta.