Question

I have “Spatial Selection” implemented on Map in my Web Application, which selects the number of Streets. After Selection, I get unique street Id for all the Streets which are selected using “Selection Handler”.

My next step is to send Ajax request to Server per Street Id and get back the response. Currently, I am doing this using only single For Loop and sending Ajax request for Each Street Id as follows.

for (var index in streetIds) {
    sendAjaxRequest(streetIds[index]);
}

function sendAjaxRequest(streetId) {
  $.ajax({
      type : 'POST',
      url :  OpenLayers.ProxyHost + this.url,
      data : streetId,
      success : function(response) {
          sos.parseSOSObservations(response);
      },
      error : function(x, e) {
          alert("Something went wrong in the request" + e);
      }
  });
}

For Example: If user has selected 1000 streets over map, then my program will send 1000 post request which will obviously slow down my application and block the browser.

Can any one please suggest, How can I handle multiple concurrent number of Ajax request in this case along considering the performance of Web Application?

Answer 1

Each request is async so it is pretty fast to make a bunch of requests like that, but it doesn’t scale too well. Each time a request is made some overhead processes wrap each request. Its very very small, so a few dozen requests its not so bad, when its a thousand requests, times a hundred users (or worse), you begin to have problems.

If you decide to proceed this direction its easy enough to convert it later to one request if you plan ahead. Build a business delegate so that it takes a list and calls the callback once it has all the responses. Something like

MyWS = new MyWS(); // MyWS = your web service class
function getList(list,callback){
    var results = _.map(list,function(value,key){
        MyWS.getStreetDetail(value,function(response){
            console.log(response) // {data:{name:"LoveTree Way"...}}
            results[key] = response.data;
            check();
        });
    });
    function check(){
        if(_.all(results,function(value){return !!value;}))
            callback(results);
    }
}
list = [268,320,380];
getList(list,function(results){
    alert("results",results.toSource())
});

Of course I would build the getList function right into your delegate so you can just forget about it.

new MyWS().getList([268,320,380],function(data){
    console.log("data",data)
});