XMLHttpRequest in for loop

后端 未结 2 1796
时光说笑
时光说笑 2020-12-09 11:59

I am trying to make several server requests inside a for loop. I found this question and implemented the suggested solution. However it doesn\'t seem to work.



        
相关标签:
2条回答
  • 2020-12-09 12:36

    First thing first, that's awful formatting. A small request to keep it a bit more parseable in future please.

    We can clean this up though.

    var XMLHttpRequest
      = XMLHttpRequest || require('xmlhttprequest').XMLHttpRequest;
    
    // Makes a request for 4 buoy page responses.
    requestAllBuoys(4, function(requests) {
    
      console.log('Got results!');
    
      // Take out the responses, they are collected in the order they were
      // requested.
      responses = requests.map(function(request) {
        return request.responseText;
      });
    
      // Left to you to implement- I don't know what you're going to do with
      // your page!
      updateDom(responses);
    
    });
    
    // Makes request to all buoy url's, calling the given callback once
    // all have completed with an array of xmlRequests.
    function requestAllBuoys (n, cb) {
    
      var latch = makeLatch(n, cb);
    
      makeBuoyURLTo(n).map(function (url, i) {
        startXMLRequest('GET', url, latch.bind(undefined, i));
      });
    
    }
    
    // Generates a latch function, that will execute the given callback
    // only once the function it returns has been called n times.
    function makeLatch (n, cb) {
    
      var remaining = n,
          results = [],
          countDown;
    
      countDown = function (i, result) {
        results[i] = result;
        if (--remaining == 0 && typeof cb == 'function') {
          cb(results);
        }
      }
    
      return countDown;
    
    }
    
    // Generates an array of buoy URL's from 1 to n.
    function makeBuoyURLTo (n) {
    
      var i, buoyUrls = [];
    
      for (i = 1; i <= n; i++) {
        buoyUrls.push('getBuoys.php?q=' + i);
      }
    
      return buoyUrls;
    
    }
    
    // Create and initiate an XMLRequest, with the given method to the given url.
    // The optional callback will be called on successful completion.
    function startXMLRequest (method, url, cb) {
    
      var xmlRequest = createXMLRequest();
    
      xmlRequest.onreadystatechange = function () {
        if (isXMLFinished(xmlRequest)) {
          if (cb && typeof cb == 'function') {
            cb(xmlRequest, method, url);
          }
        }
      }
    
      xmlRequest.open(method, url, true);
      xmlRequest.send();
    
      return xmlRequest;
    
    }
    
    // Initiates an XMLRequest from either HTML5 native, or MS ActiveX depending
    // on what is available.
    function createXMLRequest () {
    
      var xmlRequest;
    
      if (XMLHttpRequest) {
        xmlRequest = new XMLHttpRequest();
      } else {
        xmlRequest = new ActiveXObject('Microsoft.XMLHTTP');
      }
    
      return xmlRequest;
    
    }
    
    // Verifies that XMLRequest has finished, with a status 200 (OK).
    function isXMLFinished (xmlRequest) {
      return (xmlRequest.readyState == 4) && (xmlRequest.status == 200);
    }
    

    This may seem longer, but it makes things infinitely clearer, and the time you spent making it so is time you don't spend debugging.

    It also allows you to access the final result together, in the order that they came as a standard array. This is the main added bulk.

    I would say you have a good idea of what you're actually doing here, as to me the only thing about your code that wouldn't work is the updating of the dom (surely you'll just be assigning them rapidly all into the same element? replacing each other each time...).

    Have a look at this answer about handling async callbacks if you're still struggling. But please, for your own sake, keep your code cleaner.

    0 讨论(0)
  • 2020-12-09 12:46

    Try the snippet below

    // JavaScript
    window.onload = function(){
    
        var f = (function(){
            var xhr = [], i;
            for(i = 0; i < 3; i++){ //for loop
                (function(i){
                    xhr[i] = new XMLHttpRequest();
                    url = "closure.php?data=" + i;
                    xhr[i].open("GET", url, true);
                    xhr[i].onreadystatechange = function(){
                        if (xhr[i].readyState === 4 && xhr[i].status === 200){
                            console.log('Response from request ' + i + ' [ ' + xhr[i].responseText + ']'); 
                        }
                    };
                    xhr[i].send();
                })(i);
            }
        })();
    
    };
    
    // PHP [closure.php]
    echo "Hello Kitty -> " . $_GET["data"];
    

    Response

    Response from request 0 [ Hello Kitty -> 0]
    Response from request 1 [ Hello Kitty -> 1]
    Response from request 2 [ Hello Kitty -> 2] 
    
    0 讨论(0)
提交回复
热议问题