Estoy haciendo una página web en la que necesito interactuar con varias páginas secundarias cargadas en mi página principal mediante AJAX.
Soy un poco novato, pero de una funciona todo, el problema es cuando tienen que funcionar las 3 al mismo tiempo.
Os comento un poco el código, el archivo .js lo he cogido de un tutorial y lo he modificado, asi que a algunos igual os suena un poco.
Son 2 partes, al principio creo el objeto y luego defino la función. Como lo tengo que usar con 2 .php en 2 divs diferentes, he probado muchas cosas, y la única que "medio funciona" es super cutre, pero no se otra xD, consiste en duplicar las 2 partes, y según el div que use una u otra.
Por qué digo "medio funciona"? Porque carga todo al tuntún en el DIV que le da la gana, pisando uno a otro etc xdd
Código:
// Suponemos que no usa IE
var isIE = false;
// Creamos una variable para el objeto XMLHttpRequest
var req;
// Creamos una funcion para cargar los datos en nuestro objeto.
// Logicamente, antes tenemos que crear el objeto.
// Vease que la sintaxis varia dependiendo de si usamos un navegador decente
// o Internet Explorer
function cargaXML(url, div) {
if (div=="1") {
// Primero vamos a ver si la URL es una URL :)
if(url==''){
return;
}
// Usuario inteligente...
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange1;
req.onload = processReqChange1;
req.open("GET", url, true);
req.send(null);
// ...y usuario de Internet Explorer Windows
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange1;
req.onload = processReqChange1;
req.open("GET", url, true);
req.send();
}
}
}
if (div=="2") {
// Primero vamos a ver si la URL es una URL :)
if(url==''){
return;
}
// Usuario inteligente...
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange2;
req.onload = processReqChange2;
req.open("GET", url, true);
req.send(null);
// ...y usuario de Internet Explorer Windows
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange2;
req.onload = processReqChange2;
req.open("GET", url, true);
req.send();
}
}
}
}
// Funcion que se llama cada vez que se dispara el evento onreadystatechange
// del objeto XMLHttpRequest
function processReqChange1(){
var ventana = document.getElementById("ventana");
if(req.readyState == 4){
ventana.innerHTML = req.responseText;
// ESTA LINEA SIRVE PARA BAJAR EL SCROLL AUTOMATICAMENTE
ventana.scrollTop = ventana.scrollHeight;
}
}
function processReqChange2(){
var ventana = document.getElementById("contenedor");
if(req.readyState == 4){
ventana.innerHTML = req.responseText;
// ESTA LINEA SIRVE PARA BAJAR EL SCROLL AUTOMATICAMENTE
ventana.scrollTop = ventana.scrollHeight;
}
}
El php es este:
Código:
Yo creo que se pisa una función a otra por todos los lados, pero no consigo hacerlo de otra forma, xq al llamarse del mismo modo tampoco puedo crear archivo ajax1.js y ajax2.js etc.<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Battle Log</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
<script src="ajax.js" language="JavaScript"></script>
<script type="text/javascript">
docXML=cargaXML("ventana.php", "1");
docXML=cargaXML("contenedor.php", "2");
</script>
<script> setInterval('cargaXML("ventana.php", "1")',3000); </script>
</head>
<body>
<div id="contenedor">
<div id="ventana"> </div>
<div id="contenedor"></div>
</div>
</body>
</html>
Alguien me puede echar un cable? GRACIAS!
