jQuery Multiple AJAX & Wait for All Complete & BlockUI Handling

jQuery Multiple AJAX & Wait for All Complete & BlockUI Handling

 
   /* Import BlockUI jQuery Library on the Page first. */
 
   $(document).ready(function () {
 
      $.blockUI();
 
      ajaxRequest1 = AJAXRestful(2, 20);
      ajaxRequest2 = AJAXRestful(3, 20);
      ajaxRequest3 = AJAXRestful(5, 20);
      ajaxRequest4 = AJAXRestful(7, 20);
 
      $.when(
         ajaxRequest1,
         ajaxRequest2,
         ajaxRequest3,
         ajaxRequest4
      ).then(function (resp1, resp2, resp3, resp4) {
         PrepareLayout(resp1, resp2, resp3, resp4);
         $.unblockUI();
      });
 
   });
 
   function AJAXRestful(num, max)
   {
      return $.ajax({
         url: "/api/TestRest?num=" + num + "&max=" + max,
         cache: false,
         success: function (data) {},
         error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
         }
      });
   }
 
   function PrepareLayout(resp1, resp2, resp3, resp4)
   {
      //console.log(JSON.stringify(resp1));
      //console.log(JSON.stringify(resp2));
      //console.log(JSON.stringify(resp3));
      //console.log(JSON.stringify(resp4));
 
      $("#result").html(
         JSON.stringify(resp1) + "<br /><br />" +
         JSON.stringify(resp2) + "<br /><br />" +
         JSON.stringify(resp3) + "<br /><br />" +
         JSON.stringify(resp4)
      );
   }
 

The Server Side of Restful is developed by ASP.NET Web API.
 
There is a Thread Sleep ( 1 – 20 Seconds ) which is executed from Restful Server Side for testing AJAX & AJAX Wait Behavior.
 
The Execution Result from Client Side ( JavaScript – AJAX Response ) is OK.