[Ajax] Refrescar div cada cierto tiempo
Introducción
Si tenemos un dato que queremos actualizar cada cierto tiempo, ya puede estar en un div o cualquier otro contenedor, lo que debemos hacer es una petición ajax establecida en un intervalo que se repetirá siempre. Aplicaciones como Twitter o Gmail ya lo hacen.
En realidad hay múltiples formas de realizar esto, pero una forma fácil de hacerlo es utilizar un plugin de jquery.
Timers
Timers es el plugin en cuestión, y comprimido se queda en 1.54 KB, algo más que razonable. Tiene varias funciones, pero vamos a centrarnos en el uso para lo que queremos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script language="javascript" src="jquery.min.js"></script> //Incluimos Jquery <script language="javascript" src="jquery.timers-1.0.0.js"></script> //Incluimos el plugin <script type="text/javascript"> $(document).ready(function(){ var j = jQuery.noConflict(); j(document).ready(function() { j(".refreshMe").everyTime(10000,function(i){ j.ajax({ //Aquí se hara la petición (sin nada) url: "refresh-me.php", cache: false, success: function(html){ //Aquí refrescamos el div j(".refreshMe").html(html); } }) }) }); j('.refreshMe').css({color:"red"}); }); </script> <body> <div class="refreshMe">Esto se va a refrescar cada 10 seg</div> </body> |
Primero de todo incluimos Jquery y el plugin en cuestión (más abajo tienes los links para todo), y después establecemos el tiempo con j(“.refreshMe”).everyTime, que indica que los elementos con los selectores “.refreshMe” van a ser actualizados. También aquí establecemos el tiempo que queremos(10 segundos).
En la petición no se manda ningún parámetro, por simplicidad, pero se podría hacer de igual forma.
Demo
En este enlace, puedes ver como funciona, simplemente se llama a la función rand de php, que genera un número “aleatorio” y se actualiza el valor en el html.
Enlaces
Plugin | Repositorio Jquery
Vía | That Agency

Un comentario
Para prescendir del plugin, también se puede usar javascript plano con la función setInterval()