Sunday, July 18, 2010

Atualização Automática de Conteúdo com jQuery

jQuery é uma das ferramentas mais poderosas hoje em dia para um desenvolvedor web.
É tão bom e ao mesmo tempo tão simples! Perfeito para nós :D

Então vamos mostrar para você como usar jQuery para criar um simple e eficiente autalizador automático de conteúdo.

Html:
<html>
    <head>
        <title>Conteúdo Automático</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div id="receptor"></div>
    </body>
</html>

Javascript:
<script type="text/javascript">
    $(function(){
        var tempoAtualizacao = 0;
        
        function atualiza(){
            $.get('refresh.php',{},function(resposta){
                $('#receptor').html(resposta);
                tempoAtualizacao = setTimeout(atualiza,15000); // we set the loop
            });
        }

        function cancelaAtualiza(){
            clearTimeout(tempoAtualizacao);
        }
        
        atualiza(); // chamamos pela primeira vez a atualização
    });
</script>

Agora vamos entender.
$.get() é uma função do jQuery que envia a requisição GET. $.get tem 3 parâmetros, o primeiro é a URL, o segundo são parâmetros a serem passados (se necessário) e o terceiro é a resposta.

Algo assim:
$.get(url, parametros,function(resposta){...});

A url deve redirecionar para seu arquivo .php (.html ou qualquer outra linguagem) que vai administrar a requisição, retornando a resposta.

A função setTimeout cria uma espécie de loop, chamando novamente a nossa função a cada 15000 ms.

Para cancelar a atualização automática basta simplesmente chamar a função cancelaAtualiza();

OBS: Você pode usar $.get, $.post ou até mesmo $.load.

No comments:

Post a Comment