Usa ajax para refrescar un tag div

Escrita por UTAN, 25 abril 2009

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 El logo de la tecnologia AJAX..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 .

Categorias : Guias para la Web,Noticias Destacadas,php y algo mas,Un poco de html Etiquetas : , , , ,

Comentarios
3 julio 2009

Hola la verdad me parecio increible tu trabajo funciona a la perfeccion.

Echo by Lunatico
4 julio 2009

Gracias , por tu comentario sigo aprendiendo cada dia…

Echo by UTAN
1 septiembre 2009

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

Echo by Javo
1 septiembre 2009

Esta expectacular tu web, cuando quieras nos pasamos Links no…
Avisa si te avientas.

Echo by UTAN
29 octubre 2009

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 :)

Echo by Junior
17 marzo 2010

deceo refrescar mi pagina para ver mis solicitudes de amigos

Echo by claudia L
18 marzo 2010

Bueno para empezar que clase de pagina es la que quieres que aparesca en el DIV..?

Echo by UTAN
10 agosto 2010

GRacias.

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

Thanks!

Echo by mpmanolo
28 agosto 2010

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…

Echo by Alvaro
23 septiembre 2010

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

Echo by Angelica Perez
20 octubre 2010

Excelente ayuda muchas gracias

Echo by Diseño web
22 octubre 2010

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

Echo by adler alcides
22 octubre 2010

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/

Echo by UTAN
11 febrero 2011

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

Echo by gabriel
11 febrero 2011
var timestamp = fetch_unix_timestamp();
44	var nocacheurl = url+"?t="+timestamp;

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

Echo by UTAN
12 febrero 2011

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

Echo by gabriel
12 febrero 2011

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…

Echo by UTAN
12 febrero 2011

Arreglado!!
No sé como darte las gracias por tu ayuda.

Un saludo

Echo by gabriel
12 febrero 2011

Gracias por tu información , e actualizado el código..

Echo by UTAN
20 marzo 2011

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.

Echo by memoadian
9 abril 2011

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

Echo by josesd
4 mayo 2011

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.

Echo by denia99
4 mayo 2011

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

Echo by UTAN
23 mayo 2011

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!

Echo by Sarah
23 mayo 2011

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

Echo by UTAN
10 junio 2011

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

Echo by Ricardo
10 junio 2011

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.

Echo by UTAN
17 junio 2011

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.

Echo by David
17 junio 2011

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.

Echo by UTAN
29 junio 2011

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

Echo by Jose
29 junio 2011

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

Echo by UTAN
29 junio 2011

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

Echo by Jose
29 junio 2011

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/

Echo by UTAN
13 julio 2011

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

Echo by sant
13 julio 2011

la verdad gracias por el aporte..

Echo by sant
13 julio 2011

De nada es un placer amigo..

Echo by UTAN
29 julio 2011

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

Echo by Erick F.
29 julio 2011

Hola,

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

espero tu respuesta.

Echo by UTAN
14 agosto 2011

Excelente codigo, facil, entendible y lo mejor que el ejemplo funciona a 1000,

Echo by Carlos M
14 agosto 2011

Gracias

Por tu comentario amigo, se te agradece.

Echo by UTAN
25 agosto 2011

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 :P 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!

Echo by juanse
25 agosto 2011

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

Echo by UTAN
25 agosto 2011

Para utilizar usando links (enlaces) leete este otro tutorial..

http://vcomputadoras.com/actualiza-un-div-usando-menus-y-ajax/

Echo by UTAN
14 septiembre 2011

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

Echo by Alex
15 septiembre 2011

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.

Echo by UTAN
15 septiembre 2011

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.

Echo by Alex
16 septiembre 2011

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.

Echo by UTAN
16 septiembre 2011

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

Echo by Alex
16 septiembre 2011

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

Echo by UTAN
16 septiembre 2011

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.

Echo by Alex
16 septiembre 2011

Es un placer siempre, cuando quieras ayuda solo avisa..

un placer .

Echo by UTAN
21 septiembre 2011

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!

Echo by Moises
22 septiembre 2011

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.

Echo by UTAN
23 septiembre 2011

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?

Echo by ariel
23 septiembre 2011

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.

Echo by UTAN
24 septiembre 2011

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

Echo by ariel
26 septiembre 2011

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

Echo by ariel
26 septiembre 2011

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.

Echo by UTAN
5 noviembre 2011

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

Echo by jack
5 noviembre 2011

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

Echo by UTAN
11 diciembre 2011

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 =(

Echo by Eugenia
12 diciembre 2011

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.

Echo by UTAN
17 diciembre 2011

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

Echo by memo
17 diciembre 2011

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

Echo by UTAN
22 diciembre 2011

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

Echo by Mario
22 diciembre 2011

Hola,

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

gracias.

Echo by UTAN
10 enero 2012

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

Echo by Yu
10 enero 2012

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 :(

Echo by Yu
11 enero 2012

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

gracias

Echo by UTAN
15 febrero 2012

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!

Echo by Sebastian
15 febrero 2012

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.

Echo by UTAN
19 febrero 2012

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

Echo by Juan Carlos Moreno Guerra
19 febrero 2012

Hola,

Es un placer amigo, alguna pregunta solo as-mela saber..

gracias

Echo by UTAN
22 febrero 2012

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?

Echo by Ruben
22 febrero 2012

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.

Echo by UTAN
23 febrero 2012

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.

Echo by Ruben
23 febrero 2012

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!

Echo by Ruben
23 febrero 2012

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

Echo by UTAN
23 febrero 2012

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

Echo by Ruben
23 febrero 2012

y si quisiera para hacerlo para barios refreshdiv

Echo by xoceunder
23 febrero 2012

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.

Echo by UTAN
23 febrero 2012

xoceunder,

leete esta guia pudede que te sirva.
http://vcomputadoras.com/refrescar-diferentes-divs-con-javascript-y-ajax/

gracias por escribir.

Echo by UTAN
29 febrero 2012

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

Gracias!

Echo by Ruben
29 febrero 2012

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.

Echo by UTAN
1 marzo 2012

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.

Echo by Ruben
1 marzo 2012

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.

Echo by UTAN
8 marzo 2012

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

Echo by eduardo naranjo
8 marzo 2012

exelente funcion se las recomiendo

Echo by eduardo naranjo
8 marzo 2012

muy buena funcion

Echo by eduardo naranjo
9 marzo 2012

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

Echo by Ricardo
9 marzo 2012

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

Echo by UTAN
19 marzo 2012

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

Echo by Ced
19 marzo 2012

Ced,

Es un placer..

“De la web aprendemos, a la web le retornamos”.

Gracias.

Echo by UTAN
20 marzo 2012

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

Echo by orbe
20 marzo 2012

Gracias..

Muy bien explicado..

gracias de nuevo.

Echo by UTAN
29 marzo 2012

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

Echo by Isa
23 abril 2012

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

Echo by wendy
23 abril 2012

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…

Echo by UTAN
23 abril 2012

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

Echo by wendy
23 abril 2012

ya solucione el problema gracias :) por tu ayuda

Echo by wendy
23 abril 2012

Ok,

Que bien, solo tenias que colocar el path de el archivo a refrescar..

gracias

Echo by UTAN
Deja tu comentario

(requerido)

(requerido)