Utilizando timer com JavaScript e AJAX JQuery

Olás,

Hoje uma pequena dica de JavaScript / JQuery: Como fazer um “Ajax get” com timer.

Vamos lá, depois de colocarmos as referencias necessárias para o JQuery, devemos utilizar o seguinte código:

 

<script>
    $(document).ready(function() {
        function getData() {
            $.ajax({
                url: "http://localhost/dados.php",
                beforeSend: function() {$("#conteudo").empty();$("#conteudo").append("Carregando");}                    
            }).done(function(data) {
                $("#conteudo").empty();         
                $("#conteudo").append(data);
            });
        }
        getData();
        setInterval(getData, 50000);
    });
</script>

Explicando:

Dentro do  $(document).ready(function() colocamos os scripts que irão fazer a mágica.

Na função getData colocamos a chamada ajax:

Parametros

  • url: caminho do script que irá retornar os dados;
  • beforeSend: ação que deve ser realizada antes de obter o resultado da url solicitada, loading, por exemplo;
  • .done: é o que acontece após o recebimento dos dados, nesse caso o resultado é salvo na var data.

Após a criação da função, devemos fazer a primeira chamada, pois quando utilizamos o timer, ele executa somente após ao tempo determinado.

A parte principal é o setInterval(getData, 50000). Aqui temos  a parte principal, que efetivamente irá fazer a requisição de tempos em tempos, nela devemos atentar a 2 fatos:

  1. A função que será executada deve ser chamada sem o “()” (parênteses) no final;
  2. O segundo parâmetro é o intervalo de tempo e milissegundos;

 

Bom, é isso, espero que seja útil!! Até mais! =D

PS: Nesse tutorial utilizamos o JQuery somente pelo fato de abstrair o AJAX, de qualquer forma, ele irá funcionar normalmente se você não utilizar uma lib JavaScript.

comments powered by Disqus