Usa ajax para refrescar un tag div

Escrita por , 25 April 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/
ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con 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 : Ajax,Guias para la Web,Noticias Destacadas,php y algo mas,Un poco de html Etiquetas : , , , ,

Trackbacks & Pingbacks
Comentarios
10 June 2013

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

Echo by Noemi
10 June 2013

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

agradezco que comentaras

Echo by UTAN
14 June 2013

excelente, en pleno 2013 y todavia funciona, te felicito

8 July 2013

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

Echo by jhaxpebel
9 July 2013

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 require_once('tu pagina.php'); ?> 

Espero haber entendido..

Echo by UTAN
16 September 2013

Está excelente; muchísimas gracias hermano; es lo que estaba buscando.

Echo by Eder
30 September 2013

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…

Echo by Daniel
1 October 2013

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

scroll_div(divid){
		var div = document.getElementById(divid);
		var width = div.offsetWidth ; 
		div.scrollTo( 0, width.y );
}

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

Echo by UTAN
3 October 2013

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

Echo by m
7 January 2014

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

Echo by rachpts
1 April 2014

GRacias carnal, sigue subiendo aportes asi, echale ganas

Echo by josue
4 April 2014

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.

Echo by Ricardo
4 April 2014

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

Echo by UTAN
21 April 2014

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.

Echo by Juan josé
21 April 2014

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.

Echo by UTAN
15 May 2014

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

Echo by David Aguilar
21 May 2014

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?

Echo by Rossell
4 April 2015

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

Echo by Javier
4 April 2015

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

Echo by UTAN
Deja tu comentario

(requerido)

(requerido)