Send ajax GET request if condition is met

This is my JS code. However, it only executed the last ajax request. Is there anyway to put them in If statement so that

if (main-content.html is loaded), it will execute xmlhttp.open("GET","main-content-city.php?q="+str,true) xmlhttp.send();

elseif (child-content is loaded), execute: xmlhttp.open("GET","child-content-city.php?q="+str,true); xmlhttp.send();

<script>
function sortResult(str)
{
   if (str=="")
   {
    document.getElementById("result").innerHTML="";
    return;
   } 
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     document.getElementById("result").innerHTML=xmlhttp.responseText;
   }
 }
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
</script>

My index.php file is like this and using GET method to navigate between main-content.html and child-content.html.

 <?php
include('header.html');
include('main-content.html');
include('footer.html');
?>

My main-content and child-content is like this:

<div id="result">
Content displayed here
</div>