Usa ajax para refrescar un tag div

Escrita por , 25 April 2009 (153) Comentarios

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