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/
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 .
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…
Hola.. oye grandiosa tu explicacion y muchisimo mejor tu script… me funciono a la primera. Gracias.
Excelente ayuda muchas gracias
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/
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
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..
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
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:
var fetch_unix_timestamp =""; fetch_unix_timestamp = function() { return parseInt(new Date().getTime().toString().substring(0, 10)) }Aver si se quita el error de firebug..
Me comentas que paso porfavor…
Arreglado!!
No sé como darte las gracias por tu ayuda.
Un saludo
Gracias por tu información , e actualizado el código..
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.
Gracias me sirvió y lo adapté para que funcionara en varios divs con el mismo codigo, si alguien lo quiere que contacte conmigo
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.
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..
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!
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..
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();
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.
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.
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
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..
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
Ahora mismo , estoy haciendo un tutorial de como hacerlo..
si andas por aquí espera un momento para ver el enlace.
ok aqui esta el tutorial, espero sea entendible.
http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/
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
la verdad gracias por el aporte..
De nada es un placer amigo..
Muy bueno el codigo…pero tengo un ligero inconveniente en IE no me funciona, te agradezco tu colaboracion.
Hola,
Si me dices cual es el problema, me funciona de maravilla..
Esta probado para IE7 en adelante..
espero tu respuesta.
Excelente codigo, facil, entendible y lo mejor que el ejemplo funciona a 1000,
Gracias
Por tu comentario amigo, se te agradece.
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!
Hola,
Bueno seria bueno que probaras el otro tutorial, en este metodo no podrias usar el script para actualizar mas divs..
Leete http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
Y me avisas si tienes complicaciones …
Si tienes dudas o no funciona coloca tu script code en los comentarios..
Para utilizar usando links (enlaces) leete este otro tutorial..
http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/
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.-
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.
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.
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.
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
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..
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.
Es un placer siempre, cuando quieras ayuda solo avisa..
un placer .
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!
Hola,
Podria ser algo asi?
<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>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.
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?
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.
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
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
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.
me gusto mucho tu ejemplo esta muy claro de entender pero ahora mi duda es. como lo puedo aplicar en un jsp.
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..
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 =(
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.
amigo tu sabes porque en nomas funciona en safari y firefox, porque lo probe en IE9 y opera y no me funciona=’
Extraño,
Yo lo probé en IE y me funciona bien, si quieres leete este otro tutorial, pues este ya no se mantiene pues es mejor el que cree , http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
te leo luego
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
Hola,
A mi me funciona de maravilla me podrías pasar el url de tu trabajo para verlo funcionando.
gracias.
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
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
Hola,
Me podrias dar un enlace a tu trabajo, cual es el error especifico si lo tienes disponible..
gracias
Hola, como puedo hacer que al hacer click en un lado o palabra recargue el div y no lo haga cada cierto tiempo, solo al hacer click!
Hola,
gracias por comentar, leete esta guia http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/
si tienes mas dudas no temas en postear preguntas.
gracias.
gracias que gran aporte el mejor de los mejores me funciono a la perfeccion gracias este VENEZOLANO te lo agradece mucho
Hola,
Es un placer amigo, alguna pregunta solo as-mela saber..
gracias
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?
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.
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.
El codigo no se adjuntado bien en el anteior mensaje, te lo adjunto otra vez.
http://www.mskmakina.net/radio/codigojava.rtf
Espero tu contestación.
Gracias!
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..
Entonces como lo soluciono? porque ese código javascrip que te he puesto funciona perfectamente, solo falla cuando lo pongo en el tiempo.php
y si quisiera para hacerlo para barios refreshdiv
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.
xoceunder,
leete esta guia pudede que te sirva.
http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
gracias por escribir.
Buenas Uta, he seguido tu consejo y sigue sin funcionar o lo he hecho mal. Podrías echarme una mano?
Gracias!
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.
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.
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.
me salvaste la vida funcion muy buena gracias funciona de verdad perfecta
exelente funcion se las recomiendo
muy buena funcion
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
Hola Ricardo,
Un placer que te aya gustado..
Leete esta guía que es basada de esta pero para refrescar múltiples divs.
http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/
Gracias
usualmente nunca comento, pero tú definitivamente te mereces mis respetos, muchas gracias por este aporte, en verdad, gracias
Ced,
Es un placer..
“De la web aprendemos, a la web le retornamos”.
Gracias.
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;)
Gracias..
Muy bien explicado..
gracias de nuevo.
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
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
Hi,
Al empiezo del script, o tu pagina php, coloca el siguiente codigo.
<?php header('refresh: 20; url=/tupaginaArefrescar.php' ); ?>Intenta a ver si te sirve..
gracias…
Hola
me ayudas
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
gracias
ya solucione el problema gracias
por tu ayuda
Ok,
Que bien, solo tenias que colocar el path de el archivo a refrescar..
gracias