Invoking Ajax within a for loop

Question

Invoking Ajax within a for loop

for (var i = 0; i < 5; i++) {
    using (x = new XMLHttpRequest()) sendRequest("GET","d.php?id=" + i), checkResponse(null), updateStatus = function() {
       if (x.state == 4 && x.responseCode == 200) notifyUser(i);
    }
}

My goal now is to ensure that every time the state reaches 4, the correct value of i is alerted based on the URL requested. Currently, it only alerts once with a value of 5.

javascript ajax loops for-loop call

Answer 1

Answer №1

If you're looking to utilize the with statement to keep track of i, there are a couple of ways to achieve this. One option is to include i within an object that also contains a reference to 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);
        }
    }
}

Alternatively, you can create the xhr object outside of the with statement and attach i to it like so:

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);
        }
    }
}

For a more robust solution that is future-proof, consider defining the handler within a variable scope that provides access to the necessary variables:

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);
    }
}

Then, invoke the function as follows:

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

Alternatively, if you prefer to inline the function, you could structure it in the following manner:

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()));
}

Answer 2

If you're looking to utilize the with statement to keep track of i, there are a couple of ways to achieve this. One option is to include i within an object that also contains a reference to 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);
        }
    }
}

Alternatively, you can create the xhr object outside of the with statement and attach i to it like so:

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);
        }
    }
}

For a more robust solution that is future-proof, consider defining the handler within a variable scope that provides access to the necessary variables:

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);
    }
}

Then, invoke the function as follows:

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

Alternatively, if you prefer to inline the function, you could structure it in the following manner:

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()));
}

Answer 3

Answer №2

This occurs because the closure stores not only the present value of the variable i, but also the variable itself. If I were in this situation, I would likely implement a solution like this:

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

Answer 4

This occurs because the closure stores not only the present value of the variable i, but also the variable itself. If I were in this situation, I would likely implement a solution like this:

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

Answer 5

Answer №3

Just revising the code to align with your requirements

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

Hopefully this modification is helpful

The code has been adjusted for x, so it should now function correctly

Answer 6

Just revising the code to align with your requirements

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

Hopefully this modification is helpful

The code has been adjusted for x, so it should now function correctly

Answer 7

Answer №4

Here is my solution:

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

However, I am intrigued by the idea of using closures to solve this problem. Can anyone provide guidance on how to utilize closures for a better solution?

Answer 8

Here is my solution:

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

However, I am intrigued by the idea of using closures to solve this problem. Can anyone provide guidance on how to utilize closures for a better solution?

Invoking Ajax within a for loop

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Oops! Looks like something went wrong. The command to install the debug app failed because the emulator could not be launched. This could be due to the fact that no emulators were found

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

Mapping a list of keys to Firebase objects in Vue.js

Tips for managing serverside validation and clientside validation in your web application

Using PHP to ascertain the requested dataType or responseType from the client

Using JavaScript to Detect Asynchronous Postbacks in ASP.NET AJAX

The image fails to load after I moved the routers from the server file (entry point file) to the controller file

Error encountered while utilizing MUI Button: Unable to access property 'borderRadius' from an undefined source

Having trouble transmitting data with axios between React frontend and Node.js backend

Dropdown selection values were not set appropriately

Develop a Modal Form using Bootstrap (HTML)

How can I incorporate a fade opacity effect into my Div scrolling feature?

Creating a draggable element in JavaScript using React

Unexpected outcomes when generating jQuery pages using CSS

Adding a fresh HTML element to a list at a designated location

Initiate an Ajax request from a hyperlink

Refreshing the page to display new data after clicking the update button

Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

Using Vue.js to create numerous modal popups

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?