domingo, 1 de junho de 2008

Atualizando a página automaticamente.

As vezes criamos páginas que terão conteúdos dinâmicos e atualizados com frequência, e ainda por cima, gostaríamos que a atualização acontecesse de forma periódica e automática para nossos usuários. Por exemplo poderíamos citar um site com informações sobre cotações, onde as informações são atualizadas a cada 1 minuto.

Para implementar esta idéia temos várias opções, as duas mais básicas são utilizar javascript ou usar o elemento HTML META.

Javascript

Uma opção com javascript é utilizar o window.setTimeOut, para fazer com que passado o tempo definido, o usuário seja direcionado para a própria página.

Exemplo de atualização em 5 segundos:


<html>
<head>
<title>Exemplo de atualização de página
com javascript</title>
<script type="text/JavaScript">
<!--

function doLoad()
{
setTimeout( "refresh()", 5*1000 );
}

function refresh()
{
window.location.href = window.location;
}
//-->
</script>
</head>
<body onload="doLoad();">
Última atualização as

<script type="text/JavaScript">
<!--
document.write('<b>' + (new Date()).toLocaleString() + </b>');
//-->
</script>

</body>
</html>


Elemento Meta


O elemento HTML META permite que seja adicionado ao documento, a página HTML, informações sobre o próprio documento. Várias informações podem ser adicionadas a página desta forma, como autor, informações sobre cache, informações para bots de pequisa e várias outras. No caso, estamos interessado na atualização(Refresh).

Para utilizarmos a atualização(Refresh), devemos adicionar um elemento meta dentro do elemento head, especificar o atributo http-equiv com o valor refresh, além do atributo content, que contêm o tempo de atualização em segundos e a url destino(se não for a mesma).

<meta equiv="refresh" content="[TEMPO EM SEGUNDOS];[URL DESTINO(Opcional)]">

Neste exemplo é feito a atualização da página atual em 5 segundos:

<html>
<head>
<meta equiv="refresh" content="5">
</head>

...

</html>




Há também a possibilidade de se utilizar AJAX, para que não seja necessário a atualização de toda a página, mas somente dos dados que são dinâmicos da página.

Referências:
http://developer.mozilla.org/pt/docs/Utilizando_meta_tags
http://www.w3schools.com/tags/tag_meta.asp
http://msdn.microsoft.com/en-us/library/ms533689(VS.85).aspx
http://grizzlyweb.com/webmaster/javascripts/refresh.asp