How To Load URL One by One With Javascript

Question

How to touch url one by one via javascript ajax or jquery from array? Because if you touch big process php in one touch will make timeout, so how process one by one?

Example

var myurls = [
"http://example.com/grape.php",
"http://example.com/apple.php",
"http://example.com/orange.php",
"http://example.com/banana.php"];

May be if grape.php is done and then next to apple, if apple is done and then next to orange.

And then if all process finished, show alert success.

Put the URLs in the session and loop using location from the php if you want to replace the page completely. Otherwise use $("#somediv").load(...) and setTimeout or callback — mplungjan, Jan 14 '17 at 11:47
What do you mean by "touch" the URLs? Are you **loading** them into an element on the page, or are they some **API endpoint that you want to get a response from**? — Terry, Jan 14 '17 at 11:53
@Terry , i mean by "touch" is i want to get a response. The response is only failed or success, i only need run many url one by one. thanks — Bang Roy Han, Jan 14 '17 at 12:21
Then just perform `$.ajax()` on each URL, and push these deferred objects into an array which is interpreted by `$.when()`. — Terry, Jan 14 '17 at 12:23
@mplungjan i will work this from javascript. if processing using php and session, may I also have done the same thing. Thanks — Bang Roy Han, Jan 14 '17 at 12:23

score 0 · Answer 1 · answered Jan 14 '17 at 13:03

You mean this?

var myurls = [
"http://example.com/grape.php",
"http://example.com/apple.php",
"http://example.com/orange.php",
"http://example.com/banana.php"],cnt=0;
function process(data) {
  console.log(data);
}
function loadUrl() {
  if (cnt>=myurls.length) return;
  $.get(myurls[cnt++],function(data) {
    process(data);
    loadUrl();
  });
}
$(function() {
  loadUrl();
})

score 0 · Answer 2 · edited May 23 '17 at 12:01

Based on your question and the discussion we had in your comments, I figured that you wanted to perform AJAX calls sequentially based on an array of URLs you have.

Solution 1: Use repeated, self-referencing `$.ajax()` requests

This is undoubtedly the easier solution. What we have here is that we keep track of the position of the array we are in, and stop making AJAX requests when the array has been iterated through.

$(function() {

  // Array of URLs
  var myurls = [
    "https://jsonplaceholder.typicode.com/posts/1",
    "https://jsonplaceholder.typicode.com/posts/2",
    "https://jsonplaceholder.typicode.com/posts/3",
    "https://jsonplaceholder.typicode.com/posts/4"
  ];

  // Iterate through array, and keep a cursor on which item we are at
  var urlCount = 0,
    ajaxCall = function() {
      if (urlCount < myurls.length) {
        console.log('Making AJAX call to url: '+myurls[urlCount]);
        $.ajax({
            url: myurls[urlCount]
          })
          .done(function(returnedData) {
            console.log(returnedData);
            urlCount++;
            ajaxCall();
          });
      }
    };

  ajaxCall();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution 2: Using `.then()` chaining set up using a for loop

I have adapted the code provided in this answer, for your use case, since the example can be quite difficult to understand for those unfamiliar with deferred objects and returned promises.

So the trick is the following:

Set up a master deferred object
Set up a general function that will make AJAX calls for you
Loop through the array, chaining them using .then()
Kick start the first AJAX call on the master deferred object

$(function() {

  // Array of URLs
  var myurls = [
    "https://jsonplaceholder.typicode.com/posts/1",
    "https://jsonplaceholder.typicode.com/posts/2",
    "https://jsonplaceholder.typicode.com/posts/3",
    "https://jsonplaceholder.typicode.com/posts/4"
  ];

  // Set up chain of AJAX requests
  var d = $.Deferred(),
    _d = d,
    ajaxRequest = function(ajaxUrl) {
      // Log in browser console that AJAX call is being made
      console.log('Making AJAX call to: ' + ajaxUrl);

      // Return deferred object for .then() chaining
      return $.ajax({
        url: ajaxUrl
      });
    };

  // We chain each AJAX call to the next one
  for (var i in myurls) {
    // Use IIFE so that reference to `i` is fixed
    (function(j) {
      // Update _d for chaining
      _d = _d.then(function() {
        // The _request is a defered object returned
        // So we can chain deferred methods such as .done()
        var _request = ajaxRequest(myurls[j]).done(function(ajaxData) {
          // Just to show that data is being returned after each call
          console.log(ajaxData);
        });
        
        // Return the deferred object for chaining
        return _request;
      });
    })(i);
  }

  // Kick start sequential ajax call
  d.resolve();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

@mplungjan I'm not sure what you're getting at. But to each his own. — Terry, Jan 14 '17 at 14:28
Please see my answer ... `function loadUrl() { if (cnt>=myurls.length) return; $.get(myurls[cnt++],function(data) { process(data); loadUrl(); }); }` — mplungjan, Jan 14 '17 at 15:30

How To Load URL One by One With Javascript

2 Answers2

Solution 1: Use repeated, self-referencing $.ajax() requests

Solution 2: Using .then() chaining set up using a for loop

Solution 1: Use repeated, self-referencing `$.ajax()` requests

Solution 2: Using `.then()` chaining set up using a for loop