顺序AJAX请求处理和存储

Question

I'm trying to write a script to sequentially pull data from printers that have a web interface. There are over 500 on a large local network, hence the reason I'd like to call out to the next one once the previous returns (successful or not). I'm having difficulties wrapping my head around callbacks ...if that's the best solution.

Here's where I currently stand (be kind, this is my intro to jQuery/Javascript and this is a proof test). Also, is there a way to build an array from the resulting calls? The reason I've turned to Javascript is that I could not get PHP to behave with the execution times.

Oh, you'll see ASYNC: true below only because I tried w/ false and it did not work (return anything).

function pingDevice(prnList) {
    prnList = ["www.google.com", "amazon.com", "facebook.com", "as923f.com"];
    document.getElementById("myDiv").innerHTML="please wait...";

    $(prnList).each( function(index,printer) {
        $.ajax({
            type: "GET",
            dataType: "html",
            url: "pingTest.php?ping="+printer,
            async: true,
            success: function (data) {
                $('#myDiv').append( $('<div class="prn"></div>').html(data) );
                $prnResults[printer] = data;
            },
            error: function () {
                $prnResults[printer] = data;
            }
        });
    });
    $('#myDiv').append( $('<div class="prn"></div>').$prnResults );
}

Answer 1

It looks like there are two things you want your code to do.

1. Only request data for the next printer when the request for the previous printer has returned
2. Only update the DOM once all the requests have returned.

Unfortunately, the code you have does neither of these things. :(

$.each is a way to iterate over an array-like thing, but it won't wait until the request returns before moving on the next item in the list. The ajax requests happen asynchronously, which means you call them and move on to the next operation in your code. When they are done, they will call back either the success or error functions, but this code will never block while requests are happening.

If you want to fire off sequential requests, you can create some kind of helper function that lets you loop through an array, and only calls the function on the next item in the array when you know you are done with the first one. If you want to do some action when they are all finished, then you need one more function that calls back when all the items in the array are done being processed.

Here is a small example of how you can do asynchronous things in sequence.

var data = ['1', '2', '3', '4'];

function doAsnycStuffSequentially(data, callback, final) {
  var i = 0,
      length = data.length;

  function getNextItem() {
    callback(data[i++], done);
  }

  function done(err) {
    if (err) {
      return final(err);
    }

    // Only call the final function if there is an error or if we are done looping.
    if (i >= data.length) {
      return final();
    }

    getNextItem();
  }

  getNextItem();
}

doAsyncStuffSequentially(data, function(item, done) {
  console.log("item is ", item);
  // simulate some asynchronous operation
  setTimeout(done, 1000);
}, function(err) {
  console.log("done with all and error is", err);
});

To apply this pattern to your own code, you just define your own callback function that gets called on each item in the array, like this:

var printerData = {},
    printerNames = ['hurp', 'durp'];

function getPrinterInfo(printerName, done) {
  $.ajax({
      type: "GET",
      dataType: "html",
      url: "pingTest.php?ping="+printer,
      success: function (data) {
        printerData[printerName] = data;
        done();
      },
      error: function (jqXHR, textStatus, err) {
        console.error("error getting printer status", err);
        done(err);
      }
  });
}

doAsyncStuffSequentially(printerName, getPrinterInfo, function(err) {
  console.log("done getting printer names and error was", err);
  console.log("printerData is", printerData);
});

The key is that you are calling the done function in the success and error callbacks. This signals to the doAsyncStuffSequentially function that an async operation has finished, and it should either start the next one or call the final function if we are done or an error occurred.

Answer 2

though i agree with Sonesh's sentiment that something server-side would probably be better suited to this task, here's a few tweaks to your code that should work (untested).

basically, nest the actual ajax call in its own function pingNext . each time a call comes back in, the function is called again for the next item in the prnList array. Also, i tweaked the code to use jQuery's promise-like syntax for ajax calls. it is, in general, a much nicer syntax for chaining ajax calls (though not entirely necessary here)

function pingDevice(prnList) {
  prnList = ["www.google.com", "amazon.com", "facebook.com", "as923f.com"];
  document.getElementById("myDiv").innerHTML="please wait...";

  var i = 0;
  function pingNext(j) {
    $.ajax({
        type: "GET",
        dataType: "html",
        url: "pingTest.php?ping="+prnList[j],
        async: true,
    }).done(function(data) {
      // stuff to do when successfull
      $('#myDiv').append( $('<div class="prn"></div>').html(data) );
    }).fail(function(data) {
      // stuff to do on error
    }).always(function(data){
      // stuff to do no matter what

      // stash the result
      $prnResults[printer] = data;

      // if there are more items in the prnList array, repeat
      if (i < prnList.length) {
        i++;
        pingNext(i);
      }
    });
  }
}