Ajax全局加載框(Loading效果)的配置

在Ajax進行後臺數據請求的過程當中，咱們有時候會但願用戶能知道頁面後臺還在作一些事情，這時候就須要給用戶一個很是明確的提示，也就是咱們所謂的進度條

廢話完成~

實現原理：

Jquery能夠對ajax進行全局的設置，實現相似於C#中面向切面的效果，即對在Ajax提交以前和提交完成以後，咱們都可以對其進行一系列的操做，因此咱們能夠在ajax開始的時候，把Loading框顯示出來，在ajax請求完成以後，把loading框關閉掉，基本上就完美實現這個效果了。

Jquery全局配置Ajax的方式爲：

 1 $.ajaxSetup({
 2             beforeSend: function () {
 3                 //ajax請求以前
 4             },
 5             complete: function () {
 6                 //ajax請求完成，無論成功失敗
 7             },
 8             error: function () {
 9                 //ajax請求失敗
10             }
11         });

固然，beforeSend/complete/error這些配置在單個的ajax中也是能夠去配置的，把他寫在ajaxSetup，而且放到公共的頁面上，他就是全局的啦~

最後獻上代碼吧，我這裏在作的時候，爲了方便，直接使用了layer這個插件來實現loading的效果，並無手動去寫css畢竟這不是咱強項~有能力的同窗能夠本身去寫一下這個loading的效果，用js手動控制其顯示隱藏的方式來實現~若是要直接copy，那麼請引入layer,傳送門：http://layer.layui.com/

這裏有一點須要說明的是，當同時存在多個ajax時，可能會一個加載完了，就把其餘的全都關掉了，對於這個，我能想到的有以下兩種解決方案：

1. 我目前的解決辦法是讓他打開多個（座標都同樣，看不出來），而後關的時候哪一個結束了就關哪一個，我這裏的作法是給ajaxSetup裏面增長了個index參數（這玩意兒只能寫到設置的對象裏面，否則仍是全部的ajax共享同一個）,有了index,應該就怎麼玩都行了。
2. 還有一種解決方案適合於本身去寫這個控制邏輯，只顯示一個加載框，在加載框上寫個當前有多少ajax在執行的參數相似於<div data-ajax-count='0'></div>,每次開始或結束的時候，去維護ajax-cout的值，而且在ajax結束的時候去判斷，若是這個data-ajax-count小於等於0了，把div隱藏起來，應該也是能夠的，這種辦法我並無實踐.

$(function () {
            $.ajaxSetup({
                layerIndex:-1,
                beforeSend: function () {
                    this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                },
                complete: function () {
                    layer.close(this.layerIndex);
                },
                error: function () {
                    layer.alert('部分數據加載失敗，可能會致使頁面顯示異常，請刷新後重試', {
                        skin: 'layui-layer-molv'
                       , closeBtn: 0
                       , shift: 4 //動畫類型
                    });
                }
            });
        });