Usa Ajax para Refrescar un Tag Div

08/20/2011

Una mejor forma en la cual puedes refrescar infinidad de divs, lee el nuevo tutorial http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con Ajax
El logo de la tecnologia AJAX..

Buscando una forma de refrescar un div tag, sin necesidad de hacerlo a la pagina completa, me encontré con una guía 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 tu Explorador soporta Javascript o que lo tienes habilitado y que tenes conocimientos básicos para editar los codes que te voy a proporcionar, el procedimiento es fácil y no es complicado, si saves que un tag div entonces lo tenes todo para continuar.. son tres archivos que editaremos en este ejemplo.

  • ajax.js
  • index.html
  • tiempo.php

El documento Ajax.js tiene el XMLHttpRequest así que este es el documento JS mas 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…
Este código es en puro javascript, sin necesidad de otras librerías con JQuery, Prototype etc, si simplemente quieres hacer llamadas a documentos en tus webserver usando AJAX. sigue leyendo.

código del archivo ajax.js copia y salva lo como ajax.js

/*
* Parametros mandatorios
*/
var seconds = 2; // el tiempo en que se refresca
var divid = "contenido"; // el div que quieres actualizar!
var url = "tiempo.php"; // el archivo que ira en el 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
var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Empieza la función de refrescar

window.onload = function(){
refreshdiv(); // corremos inmediatamente la funcion
}

Seguimos con el index.html, este puede ser una pagina html, shtml, php, htm.. Único requisito es que tu explorador soporte javascript, aquí usare como ejemplo index.html.

Código del Index.html copia lo y pega el código y salva lo como index.html

<html>
<title>Refresca un div tag sin necesidad de refrescar toda la pagina</title>
<head>
<script src="ajax.js"></script>
</head>
<body>
<div id="contenido">
<h3>Refrescar una div tag con Ajax</h3>
// Aqui el Div en el que se coloca el contenido de Tiempo.php
<div name="timediv" id="timediv">
</div>
</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 código <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.

<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 codigo a sido actualizado para que la llamada ajax sea inicializada con el evento de Onload de el objeto del window.
El contenido esta en el tercer archivo que utilizaremos tiempo.php, este puede ser cualquier archivo sea , php, html, shtml , html etc. básicamente el contenido que tenga ira en el div de el html, en este ejemplo tiempo.php tendrá un script php, para dar la hora de el WebServer. Recuerda que esta Guía es para principiantes así que no te presiones mucho, poco a poco y todo ira saliendo..

El archivo tiempo.php

Este archivo tiene un simple script php para mostrar la hora en el servidor en que este tu pagina web..

<?php

// Formateamos la salida de la variable.

$str = "It is %a on %b %d, %Y, %X - Time zone: %Z";

// Printeamos el resultado

echo (gmstrftime($str,time()));

?>

Con esto se termina la guía, espero sea de tu agrado no es difícil de seguirla para novatos como nosotros, comenta la guía.. gracias
Nota: si quieres leerte esta guía pero usando Jquery bueno leete Cambiar el logo de tu sitio web con PHP y JQuery .

155 thoughts on “Usa Ajax para Refrescar un Tag Div

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

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

  3. GRacias.

    por tu script me sirvio bastante, y ademas lo adapte con base de datos.

    Thanks!

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

  5. Hola.. oye grandiosa tu explicacion y muchisimo mejor tu script… me funciono a la primera. Gracias.

  6. Muchas pero muchas gracias te pasaste con tu codigo y te agrdezco el tiempo tomado para escribir este post y explicarlo tan a la prefeccion funciona al 1000000% me salvaste la vida …sigue ayudandonos por favor

    1. Muchas pero muchas gracias te pasaste con tu codigo y te agrdezco el tiempo tomado para escribir este post y explicarlo tan a la prefeccion funciona al 1000000% me salvaste la vida …sigue ayudandonos por favor …

      Gracias amigo, apenas y sigo aprendiendo también hise una guia pero usando Jquery , funciona a la perfección .. http://vcomputadoras.com/cambiar-de-logo-con-php-jquery/

  7. Mil gracias!!
    Me ha venido de maravilla pra un proyecto.
    De todas formas tengo una duda y te agradecería mucho a ver si me la puedes aclarar.
    Todo funciona a la perfección, pero en Firefox uso Firebug y me salta un error con esto:
    fetch_unix_timestamp = function()

    Alguna idea?

    Gracias por tu ayuda

    1. [php]var timestamp = fetch_unix_timestamp();
      44 var nocacheurl = url+"?t="+timestamp;[/php]

      Estas variables ayudan a que el request del ajax no sea cacheado por tu explorador evitando asi que se repita el mismo resultado…
      yo uso firefox y no me a ningun error, chequea que las variables esten completas y que esten serradas ‘;’…

      Por demas lo que pusistes no tiene un error, o no escribistes el error que le browser reporta..

  8. Hola

    Gracias por contestarme tan rápido, eres muy amable
    La función y las variables están tal como las pusiste arriba:

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

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

    El error no lo da Firefox por si mismo, lo da el complemento Firebug.
    Esto es exactamente lo que me dice:

    \assignment to undeclared variable fetch_unix_timestamp Line 38\

    He googleado en busca del error, pero no he sido capaz de encontrar una explicación o solución

    Repito, muschas gracias por tu trabajo y dedicar un rato de tu tiempo a contestarme

    saludos cordiales

  9. Lo e probado en mi testbed, i no me da el error que me comentas, también tengo firebug plugin instalado…
    Si es asi puede ser que tu firebug este muy restrictivo i por eso de el error..
    Declaremos la variable entonces, colócala antes del la función:
    [php]var fetch_unix_timestamp ="";

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

    Aver si se quita el error de firebug..

    Me comentas que paso porfavor…

  10. Excelente hermano, me ha servido muchisimo, es facil actualizar un solo div, claro con tu codigo, pero me he roto la cabeza tratando de que sean 3 los divs que se actualicen y no lo logro, tendrás alguna forma de hacerlo, yo he intentado modificando tu código, pero de AJAX apenas empece hoy y aunque conozco un poco de DOM y mucho de php no lo logro, gracias por tu tiempo.

  11. Gracias me sirvió y lo adapté para que funcionara en varios divs con el mismo codigo, si alguien lo quiere que contacte conmigo

  12. Hola, el tutorial es muy bueno, gracias me ha servido de ayuda. Pero tengo una duda, cuando lo utilizo y se me imprimen en el div (timediv en este caso) muchísimos espacios en blanco.

    Me pasa con todos los navegadores, por qué puede ser?

    te agradecería que me contestaras a la pregunta, muchas gracias.

  13. Gracias por tu comentario,

    Lo mejor que debes hacer es revisar el documento que estas accesesando con la function del ajax, aunque no estoy viendo tu script, puede ser que este printeando los espacios de tu documento..

  14. Hola! pienso que tu script es muy bueno, pero tengo una duda.. estoy desarrollando un muro de publicaciones, donde el usuario hace su post y otros lo pueden comentar, tu script funciona muy bien, el detalle es que cuando alguien escribe un comentario.. se actualiza y el texto que el usuario lleva escrito se borra. que puedo hacer? como podria modificar tu script? te lo agradeceria mucho!

  15. Hola,

    Podrías explicarte mejor?

    Como entiendo es así:
    Cuando el div que esta siendo actualizado, el usuario que quiere poner otro POST y esta escribiendo, no le da tiempo de terminar de escribir pues la Forma esta en el mismo DIV que se esta actualizando?
    por lo cual no le da tiempo de postear el mensaje, ya que el div se refresco sin darle suficiente tiempo..
    Aclárame eso pues creo que es asi..
    gracias..

  16. Hola… Muy bueno tu codigo mil gracias.. una consulta habria alguna forma de que cuando se actualiza el DIV haga un efectito asi tipo fade_out();

  17. Hola,

    si es posible, pero tendrías que hacerlo con jquery o MTOOLS lo cual esta fuera del scope de este tutorial, is si se hiciera con puro javascript sin librería seria un montón de trabajo y code..

    gracias por tu comentario.

  18. Hola, no entiendo la parte de Tiempo.php? osea que codigo meto dentro del DIV ? el index.html contiene el DIV a refrescar, que va dentro de ese DIV ?, gracias de antemano.

  19. David,
    Hola, no entiendo la parte de Tiempo.php? osea que codigo meto dentro del DIV ? el index.html contiene el DIV a refrescar, que va dentro de ese DIV ?, gracias de antemano.

    Hola,
    Amigo ese es el detalle, con ajax podes hacer llamadas a otros documentos y pasar la salida del documento a el div que tienes en el HTML, el div en el momento antes de llamar el ajax esta bacillo pero después de la llamada este sera llenado por el resultado de tu documento.. en el ejemplo del tiempo la salida del documento php es el tiempo del servidor el cual es insertado en el DIV bacillo.

  20. hola amigo gracias por tu post esta espectacular funciona a la perfeccion, tengo una pequeña duda dentro de la pagina index.html he creado un menu con hipervinculos y quiero que cuando haga clic en uno de esos me mande a la pagina pero en el mismo div donde se muestra el tiempo.php como lo podria aser gracias por tu respuesta

  21. Hum,
    Deja haber si entiendo, lo que deseas es que cuando alguien cliquee el uno de los enlaces del menú, este corra el script y t cargue el tiempo.php en el div?

    o lo que mas bien quieres es que cuando alguien cliquee en el enlace este corra la function y que te ponga el contenido de otro documento en el div , dependiendo del vinculo del hyperlink?

    correcto?
    estoy echo un nudo..

  22. hola amigo mi pregunta a la parte de

    o lo que mas bien quieres es que cuando alguien cliquee en el enlace este corra la function y que te ponga el contenido de otro documento en el div , dependiendo del vinculo del hyperlink?

    exacto eso es lo q quiero hacer

  23. pues en el codigo del tiempo.php se puede agregar otros codigos de php por ejemplo mostrar otras cosas ke se requieran … la verdad esta muy padre el codigo ya ke siempre se puede hacer cosas muy interesantes

  24. Muy bueno el codigo…pero tengo un ligero inconveniente en IE no me funciona, te agradezco tu colaboracion.

  25. Hola,

    Si me dices cual es el problema, me funciona de maravilla..
    Esta probado para IE7 en adelante..

    espero tu respuesta.

  26. hola que tal el script promete mucho!

    aunque tengo problemas con el tiempo, no refresca cuando se lo pido lo hace cada que se le da la gana 😛 en forma aleateoria no respeta ningun patron de tiempo menos el indicado.

    me gustaria poder tener la opcion para detener el refresh mediante un link en la pagina.

    tambien algo mas complicado poder indicarle los intervalos de tiempo cuando debe refrescarse que no sea por ejemplo cada 5 segundos sino cada tiempo determinado, a 10 luego 25 despues a 15 etc, etc

    Saludos!

  27. Hola UTAN: Exelente tu post.

    Quisiera hacerte una pregunta. Yo tengo un código que refresca un DIV de forma transparente (que no se nota). Mi principal problema es que cuando subo la información que debe mostrarse en el DIV cada 10 egundos, si coincide el tiempo que subo la data al servidor y el refresh en el navegador, el DIV se pone en blanco hasta tanto transcurran los 10 segundos y todo vuelve a la normalidad. Solo pasa eso cuando coincide, sino coincide todo va perfecto.

    Hay algún Código que me ayude en esto. Yo actualizo una pizarra de béisbol y quiero que se refresque de forma que no se note el parpadeo cuando suba la información cada 10 segundos.

    De ante-mano las gracias por tu respuesta.-

  28. Hola,

    Si lo que la llamada del ajax coincide con el documento que quieres mostrar y en el momento no esta disponible entonces el resultado retornado estará vasillo, esto es normal puesto que el ajax request recibe un error 404, el documento no existe hasta que los as subido.

    Lo que aria es cambiar la cantidad de segundos que el ajax request ara para que sea muy pocas veces que coincida .

    Espero que te ayude un poco.
    gracias.

  29. Gracias por la respuesta.

    Esa opción la he hecho, pero resulta que si mientra más tiempo le pongo a la llamada, cuando de el Error 404 tardará ese tiempo que le de en volver a la normalidad.

    Creo que la solución a ese problema sería que en vez de mostrarse el Error 404 (una pagina vacia) se cargara el documento que actualizo, ya sea algo hecho en otra pagina. Pero no se como hacerlo.

    Ojala pudieras ver en horas de la noche la pizarra de la MLB.com al actualizar sus scores, eso es lo que quería lograr. La pizarra está hubicada en la columna izquiera cuando entras a la pagina principal.

    Gracias UTAN, muy amable.

  30. Hola,

    Lo que no entiendo es porque tienes que subir el documento que llama a la base de datos la cual quieres que se actualice en el div.

    Para que se mantenga el documento y los resultados anteriores mientras algo nuevo pase o se actualice , es que el documento este siempre en el webserver, cuando algo nuevo ocurrar este sera actualizado en el div, si nada es nuevo la información anterior sera mostrada..

    espero estar entendiendo completamente.

  31. Oh mi hermano, subo el documento porque va con nuevos resultados que deben mostrarse, más o menos cada 10 segundos.

    Es una pizarra de beisbol y necesita ser actualizada cada vez que finaliza un episodio del juego.

    Por eso te referí a la web de la MLB.com para que veas la pizarra que tienen en el home, al momento que inician los juegos (En la noche) esta te va mostrando las anotaciones que los equipo van haciendo.

    Mi principal problema es la coincidencia en ocasiones, entre subir el documento actualizado y el refresh que proboca el Error 404 que sabemos.

    Gracias UTAN

  32. Hola,

    Y como es actualizada esta información en la base de datos?

    Esto lo haces manual al documento y lo subes, o tienes una forma que lo inserta en la la base de Mysql si es ese el sistema de datos que utilizas, si tienes que hacerlo manual tu mismo, llenar los records y de ayi subirlo con con tu programa FTP no hay mucho que hacer, pero sin embargo lo estas llenando la información usando una forma y salvandola en la base de datos entonces si es posible arreglar este problema, pues solo tendrías que escribir un script que contacte la base de datos y que de los resultados pertinentes..
    Si se actualizaron este te dará nuevos resultados y si no es así tendrás los mismo que se mostraron en el pasado..

    Creo que es así como ellos lo hacen en la pagina que mencionaste..

    sigo al tanto..

  33. Efectivamente UTAN,

    Lo subo vía FTP porque no se nada de programación, lamentablemente.

    Tal como explicas, debe ser vía Base de Datos con alguna tecnología que la MLB.com lo sube.

    De todas maneras, muchas gracias UTAN por ser tan atento. Saludos y Dios te bendiga.

  34. Hola UTAN,

    Soy bien novato con el ajax, te agradeceria de gran manera como hacer para actualizar un div (contiene una tabla) despues de presionar un boton de consulta (no quiero que la seleccion de la consulta se borre). Mil gracias por tu ayuda. Saludos!

  35. Hola,

    Podria ser algo asi?

    [php]<html>
    <head>
    <script>
    // Cambia estos parametros

    var seconds = 5; // el tiempo en que se refresca
    var divid = "actualiza"; // el div que quieres actualizar!
    var url = "que documento?"; // 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
    var fetch_unix_timestamp ="";// lets declare the variable

    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);
    }

    // Empieza la función de refrescar

    function startrefresh(){
    setTimeout(‘refreshdiv()’,seconds*1000);
    }

    </script>
    </head>
    <body>
    <button onclick="startrefresh();">Consulta</button>
    <div id="actualiza">
    </div>
    </body>
    </html>[/php]

    Edita los parámetros del tiempo el div y el archivo al que quieres que aparezca en el div.

    haber si entendí, espero te sirva.

    gracias.

  36. exelente tutorial!!!! funciona per fec to!!! lo adapte a mis necesidades y funciona a la perfección, felicitaciones y mil gracias x el aporte!
    saludos cordiales.
    pd. consulta como se podría hacer por ejemplo para para que supongamos los comentarios vayan corriendo tipo scroll hacia abajo a media que se van actualizando?

  37. Hola,
    Gracias, por la pregunta tendría que hacerse con jQuery ya que este tiene efectos bastante bonitos, i ademas tendrías que hacer que el documento que obtiene la información de la base de datos , muestre los mas actual primero y lo mas antiguo segundo, utilizas el jQuery ajax objeto y utilizas alguno de sus efectos..

    espero te sirva.

  38. muchas gracias por la respuesta, voy a ver si busco algo de jQuery entonces a ver que onda si veo como se hace, saludos y gracias por los aportes

  39. hola amigo te hago una consulta, tenes o conoces algun codigo facil de implementara para armar un buscador con ajax, como se utiliza hoy dia, que al uno ingresar el texto a buscar automaticamente busque en mi base de datos? saludos

  40. Hola,

    No en realidad, si existe alguno estos funcionan usando el programa creados para ellos..

    Ejemplo el script crea la base de datos i tienen una forma de texto que que la explota con php function explode() y con ajax te pasa la información y tu la colocas a cualquier parte de tu html div, para esto tendrías que codear-la para tu propia base de datos…

    espero me aya echo entender… gracias.

  41. me gusto mucho tu ejemplo esta muy claro de entender pero ahora mi duda es. como lo puedo aplicar en un jsp.

  42. Hola,

    Es fácil de aplicar solamente llama el documento que tengas el cual el servidor lo va a parsear, es decir correr, el resultado de ser txt o html markup, mientras tu servidor pueda utilizar el lengua y lo muestre a la web.. no deberías de tener ningún problema en usar Ajax ya que este es client side osea es el browser que hace la llamada no el servidor en si….

    gracias por tu comentario..

  43. Hola, soy novata en esto, me gusta el tutorial… pero mi pregunta es como hacer que ese mismo div cargue archivos diferentes de manera aleatoria???
    Plis me urge respuesta =(

  44. hola,

    Es difícil contestar eso, puesto que el ajax solo llama al documento que le pides,
    Ahora bien si ese documento cambiase aleatoriamente su contenido, el Ajax te lo pondría actualizado en el div que deseas.

    Tendría que ver tu trabajo y saber de la idea clara que tienes en mente para ver si se puedes hacer..

    gracias.

  45. amigo tu sabes porque en nomas funciona en safari y firefox, porque lo probe en IE9 y opera y no me funciona=’

  46. Hola, muy buen material, pero me pasa lo siguiente:
    le pongo en la variable seconds=60 y en una me actualiza en 45 segundos, luego lo ejecuto nuevamente y me sale en 30 seg. y nunca me da los 60 seg. que le pongo como parámetro. espero tu respuesta GRACIAS

  47. Hola,

    A mi me funciona de maravilla me podrías pasar el url de tu trabajo para verlo funcionando.

    gracias.

  48. Hola, probe tu trabajo pero me manda un error de accedo denegado al archivo de ajax la verdad no se que pueda ser ya lo modifique e intente de varias formas espero que me puedas orientar

  49. El error es en la variable nocacheurl me la marca en esta parte xmlHttp.open(“GET”,nocacheurl,true);

    Uso explorer 8 y no funciona ni en mozilla ni crome 🙁

  50. Hola,
    Me podrias dar un enlace a tu trabajo, cual es el error especifico si lo tienes disponible..

    gracias

  51. gracias que gran aporte el mejor de los mejores me funciono a la perfeccion gracias este VENEZOLANO te lo agradece mucho

  52. Tu código funciona perfectamente, solamente le encuentro un problema, cuando tiempo.php le meto un código javascrip no me lo carga. Hay alguna solución?

  53. Hum,
    Acuérdate que para que te corra una código javascript tenes que declararlo como javascript..

    osea , tendria que ver el codigo para darme una idea mas amplia de que clase de codigo es, o implementarlo com json o usando eval() de javascript..

    gracias por comentar.

  54. Gracias por contestar tan rapido Utan, el código en cuestión es este.

    document.write(StreamInformation.CURRENTLISTENERS() +” oyentes en linea.”)

    Lo que hace este codigo es mostrar los oyentes en linea que tiene mi radio online al usario.

  55. Hola,

    Lo que pasa esque javascript no puede correr un codigo si no es que el documento esta en el mismo dominio..
    Esto evita ataques crossdomain..

    te veo..

  56. Entonces como lo soluciono? porque ese código javascrip que te he puesto funciona perfectamente, solo falla cuando lo pongo en el tiempo.php

  57. Ruben,

    tienes que hacerlo con php, usando la function file_get_contents();

    haces una llamada ajax a un archivo en el mismo dominio..
    digamos obtenerContenido.php
    y esta hace un request a tu pagina, la respuesta de obtenerContenido.php es pasada al response de el ajax y con eso tienes tu resultados.

  58. Buenas Uta, he seguido tu consejo y sigue sin funcionar o lo he hecho mal. Podrías echarme una mano?

    Gracias!

  59. Ruben,

    En el response del ajax que tienes?

    viene basio o u otra cosas.. tienes errores de javascript..?

    todo eso es importante, para poder descifrar que esta pasando en realidad..

    gracias.

  60. En obtenerContenido.php pongo el código java que adjunte mas arriba hace unos dias. Seguidamente voy a archivo ajax.js y ahi no se que tengo que hacer :S.

    Luego en el archivo tiempo.php pongo el file_get_contents(); que hace una llamada al obtenercontenido.php donde estaba el codigo java.

    Es que yo el php lo tengo aun un poco verde.

  61. Hola Ruben,

    Sin ver el código no puedo entender que estas tratando de hacer o si lo estas haciendo correctamente.. Oh hacer correcciones si poner el código separado lógicamente puede echarle un vistazo, puedes pegarlo aqui mismo usando las “[ php ]” aqui en medio tu codigo de cada documento creado.”[ /php ]”.

    Sin las quotras “” y sin espacios en ese bbcode.

    Espero me entiendas.. gracias.

  62. me salvaste la vida funcion muy buena gracias funciona de verdad perfecta

  63. Hola, tu explicación es impecable y el script de lo mejor, solo tengo una duda, que pasa si quiero refrescar dos divs?, probé haciendo otro archivo .js cambiando el archivo php y el id, pero no funciona

  64. usualmente nunca comento, pero tú definitivamente te mereces mis respetos, muchas gracias por este aporte, en verdad, gracias

  65. Hola!, gracias por el tutorial, me viene muy bien, es ingenioso, como he visto, y no leido en ningun sitio la explicacion de la logica que sigue el codigo ajax, la dejo aqui con mis cortos conocimientos, y cualquiera puede corregirme.

    Para los que quieran saber mas…

    function refreshdiv();

    Lo que hace esta funcion es inicializar un nuevo objeto xmlHHTprequest, el cual hace una llamada al servidor y la devuelve en la variable asignada, eso se consigue solo con new xmlhttprequest, el try catch es solo para asignar en el bloque try el codigo exitoso, y en el bloque catch el codigo para los errores, haciendo las comprobaciones pertinentes.

    con onready changue entramos en un evento que se activa cada vez que se pasa de estado en el readyState, y dentro de el, colocamos la condicion if diciendo que si es 4, y es 200 haga el resto, esto es como decir, si todo esta cargado y lo as traido, muestramelo, o haz lo pertinente con el contenido.
    y al final, hacemos el setTImeout(), que repite cada x tiempo una funcion asignada, esa funcion es refresh, que simplemente reinicializa la peticion cada x segundos, haciendo que se repita el proceso de recarga dinamica .
    xmlHttp.onreadystatechange=function() if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){.readyState == 200
    39//aqui deberia ir 200, que es cuando esta la pagina. document.getElementById(divid).innerHTML=xmlHttp.responseText;
    40 setTimeout(‘refreshdiv()’,seconds*1000);
    41 }
    42 }
    43
    POR ULTIMO ABRIMOS EL ARCHIVO, PONEMOS A TRUE EL ASINCRONO, Y MANDAMOS CON SEND., OPEN Y SEND SON SOLO METODOS DEL OBJETO XMLHTTPREQUEST. xmlHttp.open(“GET”,nocacheurl,true);
    44 xmlHttp.send(null);

    BUENO Y ESO ES TODO, ESPERO QUE OS SIRVA PARA ENTENDER UN POCO MÁS CUALES SON LOS PROCESOS Y ASÍ HACER OTRAS COSAS DISTINTAS CON VUESTRO INGENIO;)

  66. hola he probado tu codigo y me trae unos problemillas que no e podido solucionar cuando uso la variable
    var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
    var nocacheurl = url+”?t=”+timestamp;
    me manda doble el resultado de mi pagina pero actualiza todo los cambios que ago y al poner la variable

    var fetch_unix_timestamp =””;
    fetch_unix_timestamp = function()
    {
    return parseInt(new Date().getTime().toString().substring(0, 10))
    }
    me imprime la pagina normal pero no acualiza podrias decirme que hacer no se muy bien ajax

  67. hola el codigo esta super bien pero tengo una duda un poco urgente necesito refrescar una pagina que no tiene div; es un archivo php que necesito que me actualize la pagina cada 20 segundos ojala me puedas ayudar es un poco urgente

  68. Hi,

    Al empiezo del script, o tu pagina php, coloca el siguiente codigo.

    [php]
    <?php
    header(‘refresh: 20; url=/tupaginaArefrescar.php’ );
    ?>[/php]

    Intenta a ver si te sirve..

    gracias…

  69. Hola
    le quite todo el codigo anterior y coloque el header(‘refresh: 5; url=/actualizar_bd_skill12’ );
    tal como lo escribiste y al actualizar la pagina no me
    vuelve a reconocer la pagina me sale el aviso de objeto
    no localizado 🙁 me ayudas
    gracias

  70. Doc, muchas gracias. Tengo un problemita, uso tu ejemplo para en una pagina ver el contenido de otra mismo un iframe, pero no lo hace completo la pagina que quiero ver tiene una tabla y antes un combo. En la pagina principal solo veo el combo y no la tabla. Ahora esta tabla es de JQgrid, pero si funciona si voy directo a la URL donde se ve la tabla, alguna idea???

  71. Hola,

    Me parece que tienes que hacer un Ajax request a un php y luego este abre el contenido de la pagina remota, mandando el contenido de la pagina a el response del Ajax de ayi solo colocas el contenido en un Div usando el innerHTML o haciéndolo en el DOM..

    la funcion que te serviria en php seria file_get_contents();

  72. Saludos amigo una pregunta al actualizar hay usuarios que seleccionan el texto pero en dos 2s borra lo que fue seleccionado, como hay que hacer para que no pase eso y solo muestro lo nuevo

  73. hola sirmartin,

    Podrías explicarte mejor, no entiendo la pregunta….

    gracias.

  74. Gracias funciona perfecto. Pero tengo una duda. Sabes que quiero actualizar un div pero con noticias que saco de una bd. Como podria hacerlo? Tengo este div que esta en un .php

    y quiero actualizar con los resultados que busco en una bd:

    este vendria siendo tiempo.php en tu ejemplo

    No se muestran los resultados, hago el del reloj y funciona.. Hago este y nada.. incluyo tambien el ajax.php asi que eso no es. Para mi que el problema es el tiempo.php o el div.. no se si tengo que cambiarlo porque me copié el tuyo del reloj

  75. hola, gracias por comentar..

    Si la información la tienes en la bd, solo crea un documento que printee la información de la base de datos,

    en la pagina con el ajax call solo indica en el script la url a este documento..

    con esto tu pagina mostrando los resultado, llamara a este documento que printea la información y el ajax pasara esta información a tu pagina en que quieras que se muestre.

    gracias

  76. muy bueno, pero me gustaria saber como puedo hacer para “cortar” el refresco y que deje de actualizarse?

    lo adapte a un chat para conversaciones de dos personas, y me gustaria que deje de actualizar el div cuando uno de los dos se desconecto d ela sala.
    Actualmente cuando uno de ellos se fue de la sala se muestra un mensaje “el usuario se desconecto” que tendria que mostrar para que es script deje de actualizarse.

    me seria de mucha ayuda una solucion a esa respuesta, gracias, sigue asi…

  77. Hey muchas gracias por el script tan excelente amigo. Me va a ser de gran ayuda de aquí en adelante!! Un saludo.

  78. Jersson, Gracias jaja! es genial 😉 . Esto tiene una usabilidad impresionante, por ejemplo para un chat en tiempo real o un sistema de noticias actualizadas. Grande realmente Grande :). P.D.:
    …Una curiosidad: Al cargar una Imagen parpadea de acuerdo al interbalo Jaja!.

  79. En realidad si la imagen no esta en el cache del browser del cliente..

    Si te parpadeara en lo que se este cargando…

  80. Es excelente! Una consulta aparte, yo lo he implementado y mi equivalente a tiempo.php a su vez tiene un include a un conndb.php, tuve que cambiar el formato include(“..\carpeta\conndb.php”) al físico (“C:\inetpub\etc..”), a que se debe?

  81. mas datos: el error me indica que no encuentra a “conndb.php” referido en el include. Lo esta buscando en el directorio que corresponde a tiempo.php, seguramente a que en ayax.js cambie la var url al formato “..\carpeta_01\tiempo.php”

  82. Hola,

    Bueno ya que trataste con path abstracto desvistes intentar con mas y no usar el path concreto a tu directorio..

    Yo usaria require_once aunque los dos trabajen parecidos el requiere_once solo conecta el archivo una sola ves en esa instancia…

    Y si tienes que llamar la db en otro lado no te da error aunque lo llames de nuevo..

    gracias por comentar.

  83. hola esta rebien su codigo gracias, ahora necesito un favor, tengo un div con un scroll automatico e infinito donde se ven una a una las novedade sque dejan los usuarios, pero al bajar el scroll se sube solo hasta el principio del DIV supongo q es por lo que actualiza cada 3 4 segundos, entonces como hago para que el scroll se deje bajar normalmente, se lo agradezco del alma

  84. Bueno soy nueva en esto… pero me interesa que cada x segundos mi pagina se recargue solo que necesito recargar 2 div ¿como puedo hacerlo? porque no entiendo muy bien como hacerlo

  85. Al principio de este tutorial, hay un enlace que te indica como hacerlo..

    agradezco que comentaras

  86. buenas noches disculpe pero tengo la sigue pregunta si quiero que se carge una sola vz la pag como se haria ya que el problema es q tengo q tener una pag html y que me llame una php pero solo una vz

  87. Hola,

    No entiendo bien, quieres llamas un php con una pagina html?

    quieres hacerlo con ajax? porque en el html puedes usar la funcion require_once de php en tu html llamando el documento php que necesitas algo asi:
    [[php]<?php require_once(‘tu pagina.php’); ?> [/php]
    Espero haber entendido..

  88. Bien por el aporte, actualiza muy bien, pero tengo un inconveniente amigo. es que mi div tiene un scroll infinito y cada vez que el div actualiza el scroll se sube automáticamente, sera que habra alguna forma para que el scroll no s suba, ya que mis compañeros leen esas novedades y es molesto que el scroll se suba solo…gracias…

  89. Si,
    Googlea por una function que te coloque el scroll en el punto del index donde se coloco nuevo contenido, esto siempre que se actualize con nuevo contenido el div..
    [js]
    scroll_div(divid){
    var div = document.getElementById(divid);
    var width = div.offsetWidth ;
    div.scrollTo( 0, width.y );
    }
    [/js]

    No la e probado, pero haber si te da una idea.

  90. ¡Muy bueno! Muchas gracias por compartirlo, me has dado un camino para arrancar mi proyecto! ¡¡¡Qué grande!!!

  91. UTAN soy fan de tu código pero tengo una duda, como le podría hacer para que solo si se actualiza el div, mande llamar una notificación sonora, de verdad te agradecería mucho tu ayuda porque lo eh intentado sin éxito

  92. Hola. En el html “Refrescar una div tag con Ajax” debe ir fuera del div con id contenido o se borra (refresca) el div contenido y entonces no se ve el texto “Refrescar una div tag con Ajax”.

    Saludos.

  93. No necesitas nada en el div, y puedes borrar cualquier escrito que no sea código.

  94. Hola me encanta este código pero no consigo adaptarlo a mis necesidades. Digamos que necesito que me actualice desde mysqli, si no le pongo condiciones WHERE en la pagina tiempo, me lo hace de maravilla, ahora el problema me surge cuando le pongo la condición, el el select. Alguna idea de como lo tengo que gestionar. Si no queda clara la explicación me lo comentas y te lo pongo detalladamente.

  95. Hola,

    En este caso esto es Javascript, el resultado que tiene el request te retorna el resultado de mysqli, cualquier que sea el resultado de tu consulta sea nada tiene que ver Javascript..

    Lo que debes hacer es cerciorarte usando métodos convencionales, (asesando el documento php)que tu resultado es el esperado , después trabajas en la parte de JS.

  96. Hala muy bueno el scrip pero tengo un problema el cual es q no coincide con la hora del servidor, utilizo mysql y apache (xampp) a ver si tiene algo q ver con el codigo o es algo q tengo q buscar yo aparte de antemano gracias

  97. Hola a todos esta muy bueno el codigo pero no consigo establecer ejemplo que se muestre el contenido del DIv que de ceo actulizar y luego entre el otro div ,,, lo que me ocurre es que el div que tengo para actualizar entra en seguida …Alguien puede decirme porque?

  98. Es impresionante la utilidad del codigo, podria hacerse que se actualize el div si se cumple cierta condicion?

  99. @Javier,
    Como por ejemplo que es lo que quieres hacer?

    En el callback del objeto puedes comprobar si es valido as algo..

    Pero se entendería mejor que es lo que quieres hacer para darte una mejor respuesta.

  100. Quisiera saber como recargar mi pagina cada 40 segundos, la verdad no se mucho sobre el tema… Pero me interesa! =)

  101. @Luna,
    Al principio de
    [js]var seconds = 2; // el tiempo en que se refresca[/js]

    cambialo a “40” y salva el código..

    gracias.

  102. We no mames que chingón eres, llevaba un buen de tiepo perdiendo mis ratos libres para hacer esto y por fin pude gracias a ti…chido bro

  103. Hola, disculpa. Seguir todos tus pasos, pero que tiene q pasar en si?

    En mi navegador lo unico q sale es la fecha y hora (Y la hora no es la correcta)

    Pero despues ya no pasa nada :/

  104. Hola,
    Gran tutorial.

    He probado en mi web y funciona perfectamente pero tengo un problema. Me gustaría actualizar 3 archivos php en lugar de 1. ¿cómo debería hacerlo?

    Gracias.

  105. Veo que al final lo.que haces es insertar un código php en el html sin recargar, pero suponiendo que tengo un div dentro de mi archivo,como puedo recargar ese div sin necesidad de mandar a traer nada de otro lado, solo recargar esa parte de la página

  106. Hola oye muy buen código pero tengo un problema
    solo quiero actualizar mi pagina una vez sin tener que poner los segundos para actualiza como se realizaría????

  107. Si se actualiza cada cierto tiempo no es en tiempo real?
    Además si ejecuto una acción insertar tendría q actualizarse en otro navegador automáticamente sin mover un solo dedo

  108. Buenas, muchas gracias por el código. Funciona muy bien.
    Quiero hacer una consulta porque tengo un problema en lo que lo implemente yo.

    Lo que necesito es que redireccione a otra web supongamos cuando llega a segundo 9 por decir algo

    Eso es posible ?

    Explico un poco lo que hice y no me esta funcionando el redireccionamiento

    El el archivo php yo hago una consulta a una base de datos que tiene web con horas determinadas del día
    BIen, lo que quiero es que al llegar a la hora que yo tengo en la tabla de mysql (Este dato lo tengo en una variable php) al compararla con la hora que se esta mostrando redireccione a otra web

    EL texto me lo muestra como, al llegar el horario justo, sale un texto en pantalla por lo que todas las variables se estan tomando bien, el problema que no le da importancia al redireccionamiento. Estimo que esto debe ser porque lo que redirecciona es el php dentro de la consulta y no el arhivo html en donde se esta mostrando.

    Espero me puedan ayudar
    gracias

Comments are closed.