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.