Using ajax call multiple times

Hey

I have an ajax function on some of my pages which all work fine individually (see below). However I need to call the function below multiple times from another function eg

function tweak_change(tweak_number, creative_child, counter){
      approve_reverse("approve1", creative_child, counter);
      approve_reverse("approve2", creative_child, counter);
// other code
}
So the function approve_reverse changes 2 elements on the page. My tweak_change function needs to do a bunch of stuff as well as call the approve_reverse function twice in a row for 2 elements.

If called individually they work fine however if called one after another only the last one works.

I have attached a diagram I found that I believe shows what is occurring however I cannot work out what to do to make both requests to the server work.

Cheers

Luke

function approve_reverse(approve_number, creative_child, counter){ 
 
xmlHttp=GetXmlHttpObject();
xmlHttp2=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="approve_reverse.php";
url=url+"?approve_number="+approve_number;
url=url+"&creative_child="+creative_child;
url=url+"&counter="+counter;
//alert (url);
var url2="approve2_reverse.php";
url2=url2+"?approve_number="+approve_number;
url2=url2+"&master_job_key=<?php echo $master_job_key; ?>";
 
//alert (url2);
var element=approve_number+counter;
var element2=approve_number+"B";
 
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element).innerHTML=xmlHttp.responseText;
    } 
 }
 
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
 
//change on first tab
xmlHttp2.onreadystatechange=function(){
    if(xmlHttp2.readyState == 4) {
     document.getElementById(element2).innerHTML=xmlHttp2.responseText;
    } 
 }
 
xmlHttp2.open("GET",url2,true);
xmlHttp2.send(null);
}

Select allOpen in new window

AJAXMultiModel.gif