llamadas simultaneas en AJAX

[dablin]

Hola a todos!

Tengo una llamada Ajax que me de vuelve un xml que se procesa y luego se carga en una pagina web. Todo es ok.

El problema viene cuando quiero dividir la página en 2 y cargar el mismo contenido sobre dos div diferentes que solamente se carga en un de ellos.

Con ayuda del firebug he observado que la respuesta se genera pero o por lo menos eso parece pero no se envia a la funcion donde se procesa la información.

¿Puede ser con motivo que como utilizo la misma variable para crear el objeto XMLHttpRequest en las dos llamadas se solape la información?

Si se os ocurre alguna idea. (El código es bastante lioso por eso no he puesto nada). De todas maneras como digo si solamente hago una llamada va ok.

Un saludo a todos

[matak]

Si te he entendido bien a mi me paso eso. Lo solucione llamando de forma diferente a los objetos ajax, el problema es que tube que crear 2 funciones diferentes que hacen lo mismo con la salvedad que los nombres de los objetos difieren. Se que no es muy eficiente, pero en su día no encontré otra solución.

pe:

Código javascript:

//Funcion que crea el objeto ajax
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
    }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function f1(url,divcontenido){
    ajax1=objetoAjax();
    ajax1.open("POST", url, true);
    ajax1.onreadystatechange=function() {
        if (ajax1.readyState==4) {
            divcontenido.innerHTML = ajax1.responseText
        }
    }
    ajax1.send(null)
}
 
 
function f2(url,divcontenido){
    ajax2=objetoAjax();
    ajax2.open("POST", url, true);
    ajax2.onreadystatechange=function() {
        if (ajax2.readyState==4) {
            divcontenido.innerHTML = ajax2.responseText
        }
    }
    ajax2.send(null)
}
 

Código html:

<input type='button' value='actualiza' onclick="javascript:f1('prueba1.php',document.getElementById('div1'));javascript:f2('prueba2.php',document.getElementById('div2'));">
<div style="width:50%;float:left" id="div1"></div>
<div style="width:50%;float:left" id="div2"></div>
 

prueba1.php

Código html:

<font style="font-size:30pt;color:red;">contenido prueba1.php</font>
 

prueba2.php

Código html:

<font style="font-size:30pt;color:green;">contenido prueba2.php</font>
 

Ya dirás, Saludos

[dablin]

Gracias por está solución mientras me funcione,lo único malo es que en el caso que quiera 3 llamadas necesitaría 3 llamadas diferentes no? y bueno asi sucesivamente con 4, 5...

¿No sabes nada de algo más genérico para resolver el problema?

De todas maneras mientras tanto intentaré hacerlo asi. Que supongo que me tiene que funcionar..

Gracias

[matak]

Buenas dablin,

He investigado un poco y he dado con una forma algo mas genérica para solucionar el problema. Se trata de hacer la vble ajax globlal e inicializada a null. Cuando el objeto ajax recibe el contenido de la página procesada lo insertamos y volvemos a colocar la vble globlal a null. De esta forma podemos preguntar lo primero de todo por el valor de la vble, si esta no es igual a null es que hay un proceso ajax corriendo entonces por medio de setTimeout (ejecución retardada) volvemos a llamar a la función. La cosa quedaría asi:

Código javascript:

var ajax=null; //vble global
 
//Funcion que crea el objeto ajax
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
    }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function f1(url,divcontenido){
    if (ajax==null) {
      objDestino=document.getElementById(divcontenido)
      ajax=objetoAjax();
      ajax.open("POST", url, true);
      ajax.onreadystatechange=function() {
          if (ajax.readyState==4) {
              objDestino.innerHTML = ajax.responseText
              ajax = null
          }
      }
      ajax.send(null)
    }else{
      setTimeout("f1('"+url+"','"+divcontenido+"')",10)      
    }
}
 

Código html:

<script>
 
//Código javascript
 
</script>
<input type='button' value='actualiza' onclick="javascript:f1('prueba1.php','div1');javascript:f1('prueba2.php','div2');javascript:f1('prueba3.php','div3');javascript:f1('prueba4.php','div4');">
<div style="clear:both"></div>
<div style="width:50%;float:left" id="div1"></div>
<div style="width:50%;float:left" id="div2"></div>
<div style="width:50%;float:left" id="div3"></div>
<div style="width:50%;float:left" id="div4"></div>
 

Si te fijas hacemos 4 llamadas a f1., pero la llamada ha cambiado, ya no pasamos el objeto div a la función f1 sino su identificador (del div). Lo hago asi para poder hacer la llamada a setTimeout pasándoselo por parámetro a f1, función que se ejecutará con retardo.

prueba1.php

Código html:

<font style="font-size:30pt;color:red;">contenido prueba1.php</font>
 

prueba2.php

Código html:

<font style="font-size:30pt;color:green;">contenido prueba2.php</font>
 

prueba3.php

Código html:

<font style="font-size:30pt;color:blue;">contenido prueba3.php</font>
 

prueba4.php

Código html:

<font style="font-size:30pt;color:yellow;">contenido prueba4.php</font>
 

Espero sea lo que buscabas y haberte ayudado, Saludos

[dablin]

Creo que eso es lo que necesitaba, por lo menos tiene muy buena pinta..! Lo voy a probar a ver si lo resuelvo.

Muchas Gracias.

Intentaré contestarte lo antes posible comentando que tal fue. (Estoy fuera del trabajo pero nada más que vuelva lo pruebo :)

Un saludo