How to handle concurrent javascript xmlhttprequests?

Question

Possible duplicate:
passing an index from a for loop to ajax callback function (javascript)

I was a bit confused with creating xmlhttprequests on different servers to get some content. this is what i wrote, but it seems like i'm wrong 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 IE10 I get access to the console.

if I delete the array and use a simple query, it works 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 should I run a few 2-3 queries and still not have data processing problems .. ??

Answer 1

The problem (ignoring the cross-domain access issue that swbetman covers) is that when your ready-made state change response is triggered, it uses the i variable from the content area, which will be 3 after the loop finishes. One way to fix this 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 called function expression for each iteration of the loop, so that the code inside the function has its own i - JS closing magic means that when the onreadystatechange function is onreadystatechange it will access the parameter i anonymous function (even if this function is completed), and not i external area, so every nRequest element will be processed every time.

You also had a typo on the .open() , where you said wURL[i] , but should have URL[i] .

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

Answer 2

creating xmlhttprequests, different servers

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

Google "same origin policy" or find it here to find out more.