[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.

<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.