如何使用和显示加载器中的百分比，直到ajax jquery函数忙于执行

Question

我想在加载器中显示百分比，直到ajax函数忙（加载数据）。简单的装载机工作，但无法计算百分比，同时获得响应。 我已经尝试过这段代码，但是当函数执行完成时它的计数百分比。

$(document).ready(function() {

$.ajax ({
            dataType: "json",
            url: url,
            data: { strDate: startDate},
            type: "GET",
            cache: false,
            async: false,
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                //Load progress
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        document.getElementById("ShowPercent").innerText =  
                            Math.round(percentComplete * 100) + "%";
                    }
                }, false);
                return xhr;
            },

         )};
});