async not loading properly to div-CodePudding

I have a simple async function to load php content to a div, but I must be missing something cos when I action the function twice in a row, there's a mess.

Here's my js:

function loadbox(url,targetbox){
  if (window.XMLHttpRequest){// code for IE7 , Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById(targetbox).innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.send();
};

And when I trigger the loadbox() with onclick, it doesn't load the content to one of the divs.

onclick="loadbox('first.php','firstdiv');loadbox('second.php','seconddiv');"

I can only guess I'm messing upthe asynchronous loading of the content, cos when I set the attribute to false in the .open(), it works ok. But then it's not what I'm looking for.

CodePudding user response：

You should use xmlhttp.open("GET",url,true); not True because JS is case-sensitive language. otherwise it give you True is not defined error.

CodePudding user response：

When you set it to false it sets it to sync. The third param is the async/sync switch.

When you trigger both of them it has the targetbox changed by the first method.

You can try to make an internal variable with let so it won't affect anything.