Retrieve data using multiple XMLHttpRequest

Sometimes, one XMLHttpRequest can not retrieve all the required data to perform certain task. For example: I need to display some information of the power plant which generate the most power among 20 power plants. However, the server, which contains those information, only allows me to retrieve the information for one power plant a time. In this case, in order to find the highest power generation power plant, I need to retrieve the information for all 20 power plants first.

Since there are 20 power plants, it is better to use a loop to send XMLHttpRequest. However, once you send an XMLHttpRequest, the code will jump to the callback function to handle the response and it is not going back to the caller. Because of this, the callback function has to be the caller function. So the JavaScript Code may look like this:

var counter = 0; //loop counter
var url = []     //array of url for different source

//Send XmlHttpRequest
function loadXml(url){
  ....
  ....
  ....
}

//Handle the response
function handleResponse(){
  ....
  ....
  counter++;//ready for next source
  requestData();//go back to the caller
}

//loop through all the sources
function requestData(){
  if (counter < url.length) {
    ....//store the data in somewhere
    ....//for example push it into an Array
    loadXml(url[counter]);//send request
  }
  else {
    processData();//handle the data and quit loop
  }
}

//process the data
function processData(){
   ....
   ....
}

In this way, we define a global counter and a global array to perform the loop manually. It can solve the problem for processing multiple XmlHttpRequest, but still it is not the optimal solution. The reason is that retrieving data by creating a big query from the server side is much faster than send the request over and over again.
So the optimal solution is to implement some function in the server side that can get all the requiring data.