Hola, estoy empezando a utilizar cosas sencillas con Ajax, para mi tarbajo necesito lo siguiente, cargar contenido dinámico con ajax y que dicho contenido se refresque automáticamente, estuve buscando código en la red y encontré numerosas scripts. tras varios analisis y pruebas me quede con lo siguiente.
Ejemplo 1
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Dynamic Drive Ajax content
</title>
<script type="text/javascript">
//<![CDATA[
var bustcachevar=0 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
// la siguiente función fue agregada por mi
function recargajx(){
ajaxpage('hora.php', 'php');
ajaxpage('foto.php', 'ajax_dos');
ajaxpage('hora.php', 'ajax_uno');
var ajxt=setTimeout('recargajx()',2000);
}
//]]>
</script>
</head>
<body>
<p>Recargando contenido cada 2 segundos</p>
<div id="php">
Cargando.... Ajax 1...
</div>
<hr />
<div id="ajax_uno" style=
"position: relative; width: 200px; height: auto; border: solid 0px #000; float:left;;">
<script type="text/javascript">
//<![CDATA[
recargajx();
// tambien puedo llamarla desde body="onload...
//]]>
</script>
Cargando Ajax 2 ...
</div>
<div id="ajax_dos" style=
"position: relative; width: 500px; height: 456px; border: solid 0px #000;float:left;">
Cargando Ajax 3 ...
</div>
</body>
</html> Este primer ejemplo no incluia por defecto la recarga automática, se la agregué yo con la función
// la siguiente función fue agregada por mi
function recargajx(){
ajaxpage('hora.php', 'php');
ajaxpage('foto.php', 'ajax_dos');
ajaxpage('hora.php', 'ajax_uno');
var ajxt=setTimeout('recargajx()',2000);
}
que a su vez llama a ajaxpage()
no sé si es la forma más ortodoxa, pero me funcionó y no tiras errores
Ejemplo 2
Código HTML:
<html>
<head>
<script type="text/javascript">
var page = "foto.php";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'enviando contenido...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'salida_foto')", 10000);
}
function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}
</script>
</head>
<body onload="ajax(page,'salida_foto')">
<p>Actualizando cada 10 segundos:<br />
<span id="salida_foto"></span></p>
</body>
</html> Este segundo ejemplo ya incluía la actualización automática, pero tiene una pequeña contra, en el navegador al momento de refrescar el contenido, se produce un pequeño parpadeo o destello (sobre todo si cargo imágenes en el contenedor). El primero es más prolijo en ese aspecto
Los dos sistemas funcionan bien, pero necesito realizar una modificación y no se como hacerlo, no se si la solución pasa por el mismo Ajax o es una cuestion de Javascript, y es lo siguiente, como verán los parametros del archivo a cargar y del nombre del ID del contenedor están dentro de la script, en la primera porque yo al incluir la funcion que recarga automáticamente los deje adentro, en la segunda, porque asi estaba originalmente (var page="path a archivo"), la segunda tambien define dentro de la misma script el
setTimeout("ajax(page,'salida_foto')", 10000);
lo que quiero en definitiva, y si es posible, trabajando sobre el ejemplo uno, es invocar los parámetros desde fuera de la script, y si no es mucho pedir agregar un tercer parámetro para los milisegundos del setTimeout(). Si lo logro, podré usar siempre la misma script y no crear una específica para cada contenido que deseo cargar.
que me quede algo como
funcion('archivo','id_contenedor',tiempo) y que esto distribuya correctamente las variables en la script.
Las scripts funcionando están en
http://foros.emprear.com/ajax/autorecarga/
gracias desde ya y saludos