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

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 .

154 thoughts on “Usa ajax para refrescar un tag div”

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

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

    agradezco que comentaras

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *