[ajax] meerdere calls van PHP script achter elkaar

[TromboneFreakus]

Ik probeer door middel van AJAX enkele PHP-scripts op een pagina op te roepen. Het wonderlijke is nu: wanneer ik er slechts een oproep, werkt het prima. Zodra ik er meer achter elkaar oproep, gaat het opeens mis. Soms staat ook de output van het ene PHP-script in het DIV-element van de ander.

Nu was mijn idee dat er wellicht sprake is van caching van resultaten en dat dit de fouten verklaart. Daarop heb code op Internet gezocht en gevonden waarmee zeker gesteld kan worden dat de Javascript functies keurig achter elkaar worden geladen.

Het helpt echter helaas niet. Onderstaande code staat in de head. Het lijkt enigszins at random te gaan welke van de divs nu gevuld wordt met output van het php-script.

De Web Developer Addon in Firefox geeft ook geen foutmeldingen met onderstaande code (dat heeft me al vaak heel erg geholpen).

Wellicht zie ik iets heel simpels over het hoofd. Ik zie het echter niet. Heeft iemand de frisse blik die me aantoont waar de fout (of fouten) zitten?

JavaScript:

<script type="text/javascript">
// function to create XmlHttp Object
function getxmlhttp(){
var xmlHttp = false;
if (window.XMLHttpRequest){
    // If IE7, Mozilla, Safari, etc: Use native object
    var xmlHttp = new XMLHttpRequest();
}
else{
    if (window.ActiveXObject){
        // ...otherwise, use the ActiveX control for IE5.x and IE6
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

return xmlHttp;
}

//function to process an XMLHttpRequest
function process_ajax(phpPage, divID, getOrPost){
xmlhttp = getxmlhttp();
var obj = document.getElementById(divID);
if(getOrPost == "get"){
    xmlhttp.open("GET",phpPage);
    xmlhttp.onreadystatechange = function(){ 
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    
    
    xmlhttp.send(null);
}
return false;
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}


//laden forceren
addLoadEvent(function() {
    process_ajax('instrumentkoppelingbeheer_lijst_vrije_instrumenten_ajax.php?', 'LijstVrijeInstrumenten', 'get');
});
addLoadEvent(function() {
    process_ajax('instrumentkoppelingbeheer_lijst_bezette_instrumenten_ajax.php?', 'lstToegewezen', 'get');
});
addLoadEvent(function() {
    process_ajax('instrumentkoppelingbeheer_lijst_leden_ajax.php?', 'LijstLeden', 'get');
});

</script>

[ Voor 3% gewijzigd door TromboneFreakus op 22-11-2008 22:34 ]

[Laurent]

Je xmlhttp variabele in je process_ajax functie heeft een global scope, is dat wel de bedoeling?

[Kippenijzer]

Je zult je xmlobject als object moeten definieren en elke aanroep erop middels een new <object> aan moeten roepen. Zoals je het nu doet loop je steeds dezelfde globale callback aan te passen, waardoor je nooit weet welke callback welke return zaken zal verwerken.

[Borizz]

Je zou met een soort wachtrij kunnen werken, waarin de xmlhttprequests gezet worden en die dan 1 voor 1 verwerkt worden. De requests worden namelijk asynchroon uitgevoerd (in jou code) dus je hebt anders geen idee in welke volgorde er antwoord komt. Een andere optie is inderdaad met objecten werken binnen javascript om de response van elk request apart af te laten handelen.
Firebug is trouwens een betere plugin voor het debuggen van xmlhttprequests.

[ Voor 15% gewijzigd door Borizz op 23-11-2008 14:02 ]

[TromboneFreakus]

Allen hartelijk dank voor de feedback.

Ik ben een leek op het gebied van AJAX en heb de huidige code door middel van een tutorial en wat logisch nadenken in elkaar weten te zetten.

De opmerking van Kippenijzer zette me een goed, althans wel werkend, spoor. Wat ik nu gedaan heb is de volgende wijziging:

Oud JavaScript: function process_ajax(phpPage, divID, getOrPost){ xmlhttp = getxmlhttp(); ...

Nieuw JavaScript: function process_ajax(phpPage, divID, getOrPost){ var xmlhttp = new getxmlhttp(); ...

Dit werkt prima. Met dank hiervoor.

Nou twijfel ik alleen nog hierover:

Laurent schreef op zaterdag 22 november 2008 @ 23:48:
Je xmlhttp variabele in je process_ajax functie heeft een global scope, is dat wel de bedoeling?

Als ik de Javascript tutorials die ik vind goed begrijp, maakt dit woord "new" ieder object echt nieuw en is dit probleem van globals ook weg. Of snap ik het nu niet?