Call Ajax inside for Loop

Question

for (var i = 0; i < 5; i++) {
    with (x = new XMLHttpRequest()) open("GET","d.php?id=" + i), send(null), onreadystatechange = function() {
       if (x.readyState == 4 && x.status == 200) alert(i);
    }
}

Now I want each time when readyState = 4, it should alert correct value of i for which URL was called. Currently, it alert only for once and output alert is 5

Interesting syntax. Never seen `with` used this way in real life before. — Lightness Races in Orbit, Oct 28 '12 at 18:20
You should avoid using `with` for various reasons. It will throw an error in strict mode. — Felix Kling, Oct 28 '12 at 18:31
thanks for the comments guys, but my real problem is some thing else. — Wasim A., Oct 28 '12 at 18:32
possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Felix Kling, Oct 28 '12 at 18:33

I Hate Lazy · Accepted Answer · 2012-10-28T19:06:13.467

If you want to use with to retain i, you'd either need to add it to an object that also references the xhr object:

for(var i=0;i<5;i++){
    with({i:i, xhr:new XMLHttpRequest()}) {
        xhr.open("GET","d.php?id=" + i);
        xhr.send(null);
        xhr.onreadystatechange=function(){
            if (xhr.readyState == 4 && xhr.status == 200)
                alert(i);
        }
    }
}

Or you'd need to create the xhr outside the with and add i to it.

var xhr;
for(var i=0;i<5;i++){ 
    (xhr = new XMLHttpRequest()).i = i;
    with(xhr) {
        open("GET","d.php?id=" + i);
        send(null);
        onreadystatechange=function(){
            if (readyState == 4 && status == 200)
                alert(i);
        }
    }
}

But if you want a proper, future-proof solution, make the handler in a variable scope that provides the variables needed for the handler.

function doRequest(i, xhr) {
    xhr.open("GET","d.php?id=" + i);
    xhr.send(null);
    xhr.onreadystatechange=function(){
        if (xhr.readyState == 4 && xhr.status == 200)
            alert(i);
    }
}

And call it like this:

for(var i=0;i<5;i++){
    doRequest(i, new XMLHttpRequest());
}

Or if you insist upon inlining the function as some do, you could do it like this:

for(var i=0;i<5;i++){
    (function (i, xhr) {
        xhr.open("GET","d.php?id=" + i);
        xhr.send(null);
        xhr.onreadystatechange=function(){
            if (xhr.readyState == 4 && xhr.status == 200)
                alert(i);
        }
    }(i, new XMLHttpRequest());
}

Hi, your answer helped solve an issue I was having, but I'm not sure why - was hoping you could explain -- I was initially had all my code for `doRequest` in my for loop, but only the last request would go through. I was creating a new request inside the loop like this `var request = new XMLHttpRequest()` . Once I separated this out into another function and passed the required variables, it all worked. Why is this? Haven't encountered a situation like this before. Thanks for the help! — sooks, Apr 07 '16 at 10:55

score 1 · Answer 2 · answered Oct 28 '12 at 18:20

1

That's because the closure captures the i variable itself, not just the current value. I'd personally do something like:

for(var i = 0; i < 5; i ++) (function(i) {
        [..] alert(i) [..]
})(i);

answered Oct 28 '12 at 18:20

James M

18,506
3
48
56

this one is not working, can you please paste the exact code, – Wasim A. Oct 28 '12 at 18:57

Sudesh · Answer 3 · 2012-10-30T08:27:43.527

1

Just updating James code to suit your needs

for (var i = 0; i < 5; i++) {
    with (x = new XMLHttpRequest()) open("GET","d.php?id=" + i), send(null), onreadystatechange = (function(i, x) {
        return function () {
        if (x.readyState == 4 && x.status == 200) alert(i);
       }
    })(i, x)
}

Hope this helps

Updated it for x, this should work

edited Oct 30 '12 at 08:27

answered Oct 28 '12 at 18:34

Sudesh

1,129
3
14
29

You're still overwriting `x` in the loop. – I Hate Lazy Oct 28 '12 at 18:45
`with` is deprecated in `strict mode` – Trevor Oct 28 '12 at 19:09

score 0 · Answer 4 · answered Oct 28 '12 at 19:00

0

This is how i sloved it

var x = new Array();
for (var i = 0; i < 5; i++) {
    with (x[i] = new XMLHttpRequest()) open("GET","d.php?id=" + i), send(null), onreadystatechange = (function(i) {
        return function () {
        if (x[i].readyState == 4 && x[i].status == 404) alert(i);
       }
    })(i)
}

but i am interested more in using closure to solve my problem, how can i use closure to solve my issue.

answered Oct 28 '12 at 19:00

Wasim A.

9,660
22
90
120

If you're going to use a closure, you might as well take advantage of the variable scope, and get rid of `with`. I updated my answer with a proper closure example. – I Hate Lazy Oct 28 '12 at 19:03

Call Ajax inside for Loop

4 Answers4