Usa ajax para refrescar un tag div
Buscando una forma de refrescar un tag div sin necesidad de hacerlo a la pagina completa, me encontré con una guia en ingles, que me resulto sumamente fácil y efectiva de hacerlo.. Ajax (Asinchronous JavaScript and XML) es una poderosa herramienta, que hace el trabajo sin necesidad de que tu pagina se refresque completa y además que no parpadee en el momento de refrescarse. Para proseguir debes de estar seguro que tu Hosting soporta Ajax y que tenes conocimientos básicos para editar los code que te voy a proporcionar, es procedimiento es fácil y no es complicado, si salves que un tag div entonces lo tenes todo para continuar.. son tres archivos que editaremos en este ejemplo.
- ajax.js
- index.html
- tiempo.php
Ajax.js tiene el XMLHttpRequest asi que esta es el archivo importante lo podes renombrar si quieres, recuerda eso si, que si lo haces debes recordar que nombre fue el que le pusiste pues lo usaremos mas adelante…
código del archivo ajax.js copia y salva lo como ajax.js
// Cambia estos parametros
var seconds = 5; // el tiempo en que se refresca
var divid = "timediv"; // el div que quieres!
var url = "tiempo.php"; // el archivo que ira en el div
////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////
function refreshdiv(){
// 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 for preventing IE caching the GET request
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// The code...
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
// Start the refreshing process
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}
Seguimos con el index.html, este puede ser tu html, aquí usare este ejemplo solamente.
Código del Index.html copia lo y pega el código y salva lo como index.html
<html>
<title>Refresca undiv tag sin necesidad de refrescar toda la pagina</title>
<head>
<script src="ajax.js"></script>
</head>
<body>
<b>Este es el tiempo actual(se actualiza cada 4 segundos):</b>
<script type="text/javascript">
refreshdiv();
</script>
<div name="timediv" id="timediv">
</div>
</body>
</html>
Ahora una cosa importante es colocar en el <head> tag de tu HTML el script que le dice a tu pagina donde encontrar el ajax.js lo cual es este codigo <script src=”ajax.js”></script> recuerda que tienes que serrar el </head> o si no no funcionara, en el ejemplo usamos un simple html pero si lo quieres usar tienes que colocarlo en el tuyo…
Ahora bien en el mismo index.html encontras que existe este código.
<script type="text/javascript">
refreshdiv();
</script>
<div name="timediv" id="timediv">
</div>Este código también debe ir en tu html, es el que le dice al ajax.js que inicialice el proceso de refrescar y dice la ubicación del div, como ves el div no tiene contenido, el contenido esta en el tercer archivo que utilizaremos tiempo.php, este puede ser cualquier archivo sea , php,html,shtml etc. básicamente el contenido que tenga ira en el div de el html, en este ejemplo tiempo.php tendra códigos para dar la hora en el webserver. Recuerda que esta Guia es para principiante.
El archivo tiempo.php
Este archivo tiene un simple código para mostrar la hora en el servidor en que este tu pagina web..
<?
// Format time output
$str = "It is %a on %b %d, %Y, %X - Time zone: %Z";
// Echo results
echo(gmstrftime($str,time()));
?>
Con esto se termina la guia, espero sea de tu agrado no es difícil de seguirla para novatos como nosotros, comenta la guia.. gracias
Hola la verdad me parecio increible tu trabajo funciona a la perfeccion.
Gracias , por tu comentario sigo aprendiendo cada dia…
Man funciona perfecto y ya lo adapte a mi web y es mejor de lo que pensaba! IE, Firefox y Chrome lo corren al pedo! Eres uno de mis mentores del momento!
Felicidades! Y por cierto visita mi web cuando quieras y aconcejame para mejorarla!
http://dynlearning.com.ve
Esta expectacular tu web, cuando quieras nos pasamos Links no…
Avisa si te avientas.
Hola man gracias por el aporte pero me ¿? como seria para recargar los datos de una pagina entera osea no en un div toda la pagina(listo archivos desde una BD) y quiero q actualice cada x segundos espero que me puedas ayudar
deceo refrescar mi pagina para ver mis solicitudes de amigos
Bueno para empezar que clase de pagina es la que quieres que aparesca en el DIV..?
GRacias.
por tu script me sirvio bastante, y ademas lo adapte con base de datos.
Thanks!
Ni entiendo Java y menos Ajax, pero solo necesitaba esto para modificar los Div de mi página, gracias porque en verdad me ahorro muchisisimo trabajo…