Using XMLHttpRequest within a loop

Question

Using XMLHttpRequest within a loop

The current code is designed to iterate through multiple webpages, extracting all the links on each page and listing them in the console. However, it appears that only the links from the last webpage (fakeURL.com/735) are being displayed.

Is there a way to make console.log(url); work during every iteration, instead of just the final one (when i=735)?

for(i = 0; i <= 735; i += 15) 
{
    var xhrs = new XMLHttpRequest();
    xhrs.open("get", 'http://fakeURL.com/' + i, true);
    xhrs.onreadystatechange = function() 
    {
        if (xhrs.readyState == 4) 
        {
            $(xhrs.responseText).find('a').each(function()
            {           
                var url = $(this).attr('href');
                console.log(url);                                               
            });
        }
    }
        xhrs.send();
}

javascript for-loop xmlhttprequest

Answer 1

Answer №1

The main issue you are facing here is the reuse of the same variable xhrs for all your ajax calls. This leads to confusion as each call cannot find its specific xhrs variable when the onreadystatechange event triggers. Consequently, they end up accessing the xhrs.readyState from the last request, resulting in only the final request being completed.

To resolve this issue, you can utilize the keyword this to reference the request that triggered the onreadystatechange event:

for(i = 0; i <= 735; i += 15) {
    var xhrs = new XMLHttpRequest();
    xhrs.open("get", 'http://fakeURL.com/' + i, true);
    xhrs.onreadystatechange = function() 
    {
        if (this.readyState == 4) 
        {
            $(this.responseText).find('a').each(function()
            {           
                var url = $(this).attr('href');
                console.log(url);                                               
            });
        }
    }
    xhrs.send();
}

If you are using jQuery, it might be simpler to switch to jQuery.ajax() instead, as suggested by others.

Answer 2

The main issue you are facing here is the reuse of the same variable xhrs for all your ajax calls. This leads to confusion as each call cannot find its specific xhrs variable when the onreadystatechange event triggers. Consequently, they end up accessing the xhrs.readyState from the last request, resulting in only the final request being completed.

To resolve this issue, you can utilize the keyword this to reference the request that triggered the onreadystatechange event:

for(i = 0; i <= 735; i += 15) {
    var xhrs = new XMLHttpRequest();
    xhrs.open("get", 'http://fakeURL.com/' + i, true);
    xhrs.onreadystatechange = function() 
    {
        if (this.readyState == 4) 
        {
            $(this.responseText).find('a').each(function()
            {           
                var url = $(this).attr('href');
                console.log(url);                                               
            });
        }
    }
    xhrs.send();
}

If you are using jQuery, it might be simpler to switch to jQuery.ajax() instead, as suggested by others.

Using XMLHttpRequest within a loop

Answer №1

Similar questions

Challenges with the ASP .Net Core 3.1 octokit rest npm package

Steps to resolve the error message 'Argument of type 'number' is not assignable to parameter of type 'string | RegExp':

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

Utilizing JavaScript to trigger an alert message upon selecting various options and blocking the onclick event

Retrieve content using Ajax request

How can you merge an array having similar keys in React?

Error Encountered: "JSON Post Failure in ASP.net MVC resulting in 500

Position text beneath a collection of visuals

Using Typescript to import an npm package that lacks a definition file

Error: jquery unexpectedly encountered a token 'if'

Using jQuery to serialize parameters for AJAX requests

Does anyone have a solution for resetting the ID numbers in a flatlist after removing an item from it?

The functionality of Node async/await appears to be malfunctioning

Transforming Data into Columns with ES6 and TypeScript Using Index Signatures

Is it possible for the upload form submission to wait until the file processing is finished?

Issues encountered when implementing server-sent events in a project built with Node.js and React

Issues with grunt - Alert: Task "ngAnnotate:dist" has encountered an error. Proceed using --force option

Raycasting in Three.js towards the vector perpendicular to the left or right of the origin

Developed PHP script to dynamically generate a select tag using AJAX

Methods for reducing arrays in JavaScript