有条件地处理ajax请求

Question

I have a full screen loading animation whenever Ajax start (most of them are action by the user) and hide on completion. At the same time I also have Ajax call to check server status using setInterval .

How do I separate the Ajax call to check server status because it is annoying if it appear as full screen. A small loading icon beside the status is fine.

May refer to the snippet below:

 $(document).ajaxStart(function() { $.LoadingOverlay("show"); }); $(document).ajaxComplete(function() { $.LoadingOverlay("hide"); }); $(document).ready(function() { setInterval(ajaxCall, 3000); function ajaxCall() { $.ajax({ url: "action.php", type: "POST", data: { 'action': 'checkstatus' }, dataType: "json", success: function(data) { console.log('online'); $('.serverStatus').removeClass('ssOffline'); $('.serverStatus').addClass('ssOnline').text('Online'); }, error: function(xhr, ajaxOptions, thrownError) { console.log('offline'); $('.serverStatus').removeClass('ssOnline'); $('.serverStatus').addClass('ssOffline').text('Offline'); } }); } }); 

 .ssOffline { color: red; } .ssOnline { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/src/loadingoverlay.min.js"></script> <p>Server status: <label class="serverStatus">-</label></p> 

Answer 1

You can use the global which is default true .This option can be use control global handlers like ajaxStart and ajaxStop.This will prevent the full screen loading icon from appearance.

If you want to show any other icon specific to this call you can use beforeSend handler

 $(document).ajaxStart(function(event) { console.log(event) $.LoadingOverlay("show"); }); $(document).ajaxComplete(function() { $.LoadingOverlay("hide"); }); $(document).ready(function() { setInterval(ajaxCall, 3000); function ajaxCall() { $.ajax({ url: "action.php", type: "POST", data: { 'action': 'checkstatus' }, dataType: "json", global: false, // changed here success: function(data) { console.log('online'); $('.serverStatus').removeClass('ssOffline'); $('.serverStatus').addClass('ssOnline').text('Online'); }, error: function(xhr, ajaxOptions, thrownError) { console.log('offline'); $('.serverStatus').removeClass('ssOnline'); $('.serverStatus').addClass('ssOffline').text('Offline'); } }); } }); 

 .ssOffline { color: red; } .ssOnline { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/src/loadingoverlay.min.js"></script> <p>Server status: <label class="serverStatus">-</label></p> 

Answer 2

You can set a property at jQuery.ajax() settings object, substitute using beforeSend at $.ajaxSetup() for .ajaxStart() , check if the current settings have the property set

 function log(message) { $("pre").text(function(_, text) { return text + message + "\\n" }) } // does not provide `settings` or `jqxhr` as argument // we do not perform logic evaluation of current `$.ajax()` call here $(document).ajaxStart(function() { log("ajax start"); }); $(document) .ajaxComplete(function(e, jqxhr, settings) { if (!settings.pollRequest) { log("not poll request complete\\n"); // $.LoadingOverlay("hide"); } else { log("poll request complete\\n"); } }); $.ajaxSetup({ beforeSend: function(jqxhr, settings) { if (settings.pollRequest) { log("poll request beforeSend"); // $.LoadingOverlay("show"); } else { log("not poll request beforeSend"); } } }); $(document).ready(function() { setInterval(ajaxCall, 3000); function ajaxCall() { "ajaxCall"; $.ajax({ url: "data:text/plain,", pollRequest: true }); } $("button").on("click", function() { $.ajax("data:text/plain,") }) }); 

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

jsfiddle https://jsfiddle.net/5hfty5mc/