条件付きでAjaxリクエストを処理する

Question

Ajaxが起動するたびにアニメーションがフルスクリーンで表示されます（ほとんどがユーザーのアクションです）。同時に私はsetIntervalを使ってサーバーの状態をチェックするAjaxの呼び出しもあります。

Ajaxコールをサーバの状態を確認するには、それをフルスクリーンで表示すると迷惑になるため、どのようにして区別しますか。ステータスの横に小さな読み込みアイコンが表示されます。あなたはtrue .ThisオプションがデフォルトですglobalがajaxStartとajaxStop.Thisなどの制御グローバルハンドラは防ぐことができます使用することができます使用することができます

$(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

：

を以下に抜粋を参照してもよいです外観からの全画面ロードアイコン。あなたはjQuery.ajax()設定でプロパティを設定することができ

$(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

あなたはこの呼び出しに固有の他のアイコンを表示したい場合は、使用することができbeforeSendハンドラは、代替のため$.ajaxSetup()にbeforeSendを使用して、オブジェクト.ajaxStart()、現在の設定にプロパティが設定されていることを確認する

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/