refrescar diferentes divs con javascript y ajax

En un POST anterior les deje un tutorial de como refrescar un div tag sin necesidad de refrescar la pagina completa, bien en esta ocasión e pulido mejor el código y e creado una función que refresque cualquier cantidad de DIVs sin necesidad que se refresque la pagina completa..
Esto facilita el uso del código para cualquier circunstancia que nos enfrentemos al crear nuestra web..

ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con Ajax

Refrescando diferentes div tags usando javascript y ajax.

La función que usaremos se llama refreshDivs(divid , secs , url) , la función acepta 3 parámetros mandatarios:

  • divid = este es el ID del div que quieres refrescar.
  • secs = los segundo en que deseas que el div se refresque.
  • url = La dirección del documento que deseas que aparezca en el DIV.

El URL puede ser cualquier clase de documento, sea php, html, shtml etc ..

Ok ahora el paso a seguir es colocar en tu html entre los “<head>” tags el siguiente código abajo mostrado.

<script type="text/javascript" language="javascript">
function refreshDivs(divid,secs,url)
{

// define our vars
var divid,secs,url,fetch_unix_timestamp;

// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}

// Timestamp para evitar que se cachee el array GET

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
</script>

La parte del código donde indicamos que divs hay que refrescar es la siguiente:

window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}

Utilizando el evento window.onload hacemos que nuestro explorador corra la función y esta nos refresque los divs que deseamos que sean refrescado sin necesidad de recargar o refrescar la pagina completa..
Repite las funciones con diferentes div, tiempos y urls no hay limitaciones a la cantidad de veces que quieras usarla.

En nuestro ejemplo, usare documentos php, pero no es necesario puede ser cualquier clase de documentos mientra sean soportados por tu webserver o hosting service.

div1.php

div1.php sera un simple script que cambiara números al azar, como verán este es el documento llamado en la función arriba que es refreshDivs(‘div1′,5,’div1.php’).

Este documento sera llamado cada 5 segundos y se mostrara en el div1
Los otros dos ejemplos son similares a este primero, solo cambian el ID del DIV el tiempo en segundos y la url o la dirección del documento PHP.

<?php
echo "<p style=\"background-color:#FF7400\">Aqu&#237; obtendremos n&#250;meros al asar ".rand(1, 1000)."</p>";
?>

div2.php

div2.php repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() .

<?php
$veces = rand(1,20);

for($i= 0; $i <= $veces; $i++)
  {
	  echo "<p style=\"background-color:#356AA0\">".$i." Por favor repite me, ".$veces." veces.</p>";
  }
?>

div3.php

Es el mismo caso para el div3.php, repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() , con la única diferencia que el color de el fondo es diferente y la cantidad de segundos a refrescar…

<?php
$veces = rand(1,20);

for($i= 0; $i <= $veces; $i++)
  {
	  echo "<p style=\"background-color:#C79810\">".$i." Por favor repite me, ".$veces." veces.</p>";
  }
?>

Estos son simples ejemplos donde podrás observar como trabaja la función de la que hablamos..

Otros usos

No solo puedes refrescar con Ajax divs si no también otros html tags, como span , form, tablas, H, P y otros mas , tan solo tienes que definir un id para esa tag, una nota importante es que al documento que se llame debe correr o parsear el contenido en tu servidor, ya que el Ajax es en el Cliente osea tu explorador.

Si este documento es un archivo TXT y tiene código javascript es posible que tu explorador lo corra pero si es archivo TXT tiene código PHP, JSP o u otros no sera parseado por el Ajax, lo que pinteara en tu pagina es el código en si tal cual..

Veamos todo el código con el HTML:

<html>
<head>
<title>Ejemplos de como refrescar varios div tags usando javascript y ajax.</title>
<script language="Javascript" type="text/javascript">
function refreshDivs(divid,secs,url)
{

// define our vars
var divid,secs,url,fetch_unix_timestamp;

// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}

// Timestamp para evitar que se cachee el array GET

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

Puedes ver los ejemplos funcionando dando click en Refrescar varios Divs tags con javascript y ajax.

La función esta completa pues chequea que los parámetros estén definidos si no lo están un javascript alert te advetira del problema y el script terminara su función..

Por favor si te a gustado el código deja tu mensaje, y si encuentras algún problema no temas en postear aquí mismo gracias por Leer..

90 thoughts on “refrescar diferentes divs con javascript y ajax”

  1. Hola,
    Me puedes mostrar el codigo que estas usando…?
    es algo asi?

    <?php echo '<script>alert("bienvenidos");</script>'; ?>

    tengo que ver que lo as escrito.

  2. Buenas sabes este tutorial fue de muchisima ayuda me has salvado, pero tengo una pequeña pregunta, tambien funciona con html5?
    Lo que sucede es que estoy probando para que me actualize un foother que si se actualiza el problema en si es que en la parte donde va el foother me vuelve a parecer toda la pagina

  3. me parece de gran ayuda tu trabajo así por personas como tu es que el conocimiento sigue creciendo muchas gracias

  4. hola amigo, probe el código y no funciona, no actualiza el div especificado, en este caso en mi website..

  5. muchas gracias amigo funciona perfectamente el codigo era lo que estaba buscando de nuevo muchas gracias y espero sigas publicando mas tutos de interes relacionados al tema.

  6. hola.
    como estas. soy novato entre novatos..
    pero necesito lo siguiente…haber si me puedes ayudar…

    necesito informar un dato en una pagina web..

    algo asi como: Sala 1 Ocupada… desde 11:00 a 12:00
    Bueno…eso lo necesito mostrar en un smartv,,,,puede que necesite dos lineas…una para la sala 1 y otra para la sala 2…lo ideal seria poder darle formato a esas lineas…me refiero al tipo deletra y si se puede que se desplase tipo marquesina…..sera mucho?

  7. Saludos
    Soy novato entre novatos.

    Necesito mostrar en una pagina una entrada que va a cambiar de acuerdo a los eventos que se completen:

    “Sala 1 ocupada hasta las 11:00”
    “sala 2 disponible”

    Como se puede hacer eso…donde ingreso la información para actualizar la pagina… puede ser tipo marquesina?

    Favor de ayudar…Help-

Leave a Reply

Your email address will not be published. Required fields are marked *