How to handle Simultaneous javascript xmlhttprequests? [duplicate]

Question

Possible Duplicate:
passing index from for loop to ajax callback function (javascript)

I've been a little confused with making xmlhttprequests, to different servers, in order to fetch some content.. Here is what I've written, but it seems that I'm mistaken at some point..

var URL = new Array();
URL[0] = "http://www.example1.com";
URL[1] = "http://www.example2.com";
URL[2] = "http://www.example3.com";
var nRequest = new Array();
for (var i=0; i<3; i++) {
    nRequest[i] = new XMLHttpRequest();
    nRequest[i].open("GET", URL[i], true);
    nRequest[i].onreadystatechange = function (oEvent) {
        if (nRequest[i].readyState === 4) {
            if (nRequest[i].status === 200) {
                console.log(nRequest[i].responseText);
                alert(nRequest[i].responseText);
            } else {
                console.log("Error", nRequest[i].statusText);
            }
        }
    };
    nRequest[i].send(null);
}

with this code on I.E.10 I get access denied on console..

If I remove array and use simple request, it operates as expected..

wRequest = new XMLHttpRequest();
wRequest.open("GET", "http://www.example1.com", true);
wRequest.onreadystatechange = function (oEvent) {
    if (wRequest.readyState === 4) {
        if (wRequest.status === 200) {
            console.log(wRequest.responseText);
            alert(wRequest.responseText);
        } else {
            console.log("Error", wRequest.statusText);
        }
    }
};
wRequest.send(null);

But how am I supposed to trigger multiple 2-3 requests, and still not have problem with data handling..??

Robinrobina

You cannot use AJAX to read data from a different domain. – Merrygoround

I see a typo wURL --> URL, a closure issue i inside anonymous function and same origin policy issue. – Onto

why do i get data though from just a single domain? – Robinrobina

CORS maybe? – Onto

I can't post a full answer (because the question is marked as a duplicate) but you can store a value in the request object before sending the request request.myParameter = myValue --- and then access this value inside the listener function using the event parameter that you get there: iEvent.target.myParameter. Hope this helps someone! – Madras

Answer 1

The problem (ignoring the cross-domain issue that slebetman covered) is that when your ready state change callback is fired it is using the i variable from the containing scope which will be 3 after the loop completes. One way to fix that is as follows:

for (var i=0; i<3; i++){
   (function(i) {
      nRequest[i] = new XMLHttpRequest();
      nRequest[i].open("GET", URL[i], true);
      nRequest[i].onreadystatechange = function (oEvent) {
         if (nRequest[i].readyState === 4) {
            if (nRequest[i].status === 200) {
              console.log(nRequest[i].responseText);
              alert(nRequest[i].responseText);
            } else {
              console.log("Error", nRequest[i].statusText);
            }
         }
      };
      nRequest[i].send(null);
   })(i);
}

This introduces an immediately invoked function expression for each loop iteration such that the code inside the function has its own i - the magic of JS closures means that when the onreadystatechange function is called it will access the parameter i of the anonymous function (even though that function has completed), not the i of the outer scope, so the right nRequest element will be processed each time.

Also you had a typo on the .open() line where you said wURL[i] but should've had URL[i].

Depending on what you plan to do with the response text I'm not sure that you need an array of requests at all: you could encapsulate the Ajax code into a function that takes a URL and a callback function as parameters, and then call that function in the loop...

Sharlasharleen

that did the trick..!!! recently i had issue on another case with js' scope, and it seems that i faced it again...thank you very much..!!! – Robinrobina

You're welcome. What I've shown is the minimal change to your existing code to make it work, but there are (in my opinion) nicer ways to structure the whole thing - probably outside the scope of this question though. – Sharlasharleen

the typo, was just trying code to appear friendlier, than my original name handling of the variables...as for my respone text, i m just trying to make a mashup application, that collects data from 2-3 different sites, and gathers some specific information from each..that's why i thought it would be better to use an array.. – Robinrobina

could you elaborate, on the different approach that you suggest that i could handle the request? – Robinrobina

Answer 2

making xmlhttprequests, to different servers

You cannot do that. XMLHttpRequest is only allowed to connect to the same domain that the page belongs to. This is called the "same origin policy".

Google "same origin policy" or search for it here on SO to learn more.

Ambros

thank you for your response, however, for some reason, i do get a response, when i trigger the single request.. – Robinrobina