javascript - Ajax加载栏功能

Question

我知道有一些关于此的帖子，但它们没有涵盖我需要实现的目标。

我正在尝试让类似 youtube 的加载栏正常工作。

我发现了这个:

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};

       xhr: function () {
                var xhr = new window.XMLHttpRequest();
                var percentComplete = 0; <--------------------------added this
                $('.progress').removeClass('hide');<----------------and this
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                        if (percentComplete === 1) {
                            $('.progress').addClass('hide');
                        }
                    }
                }, false);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);

                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                            });
                    }
                }, false);
                return xhr;
            }

我添加了 2 行，因为它只能工作一次，因为隐藏值在完成后不会被删除。同时将宽度设置回 0。我也喜欢这样的事实，它看起来像是在计算事件的实际百分比。

这很好用。然而，我想把它变成一个函数，可以像这样为我的所有 ajax 调用调用:

$(document).ready(function () {
    $("a").on("click", function (event) {
        event.preventDefault();
        var id = ($(this).attr("id"));
        var container = ($(this).attr("data-container"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        MY_LOADING_BAR_FUNCTION();<-----------------------------------Here i guess?
        $.ajax({

            url: 'ajax-php.php',
            type: 'post',
            data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html },
            success: function (data, status) {
                if (container == '#formbox') {
                    $("#screen").addClass("visible");
                }
                $(container).html(data);
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    }); // end on click
}); // en document ready

但我也遇到过看起来像这样的 Ajax 设置。

   $.ajaxSetup({
    beforeSend: function() {

    },
    complete : function() {

    }
});

现在我通过将 xhr: function () 的整个代码放入我的 ajax 调用中来让它工作。但我不想每次都这样做。

所以这些是我发现的 2 个可行的选项，但我无法让它们按我想要的方式工作。我尝试创建一个 MY_LOADING_BAR_FUNCTION() 但我收到了一个已弃用的错误。

谁能告诉我如何使这项工作成功。

谢谢大家!

Answer 1

回复晚了，但分享一些知识是值得的，这样其他人可能会从中得到帮助。

您可以如下扩展 jQuery AJAX XHR 对象。

jQuery.ajaxSettings.xhr = function ()
{
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
            console.log('percent uploaded: ' + (percentComplete * 100));
        }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log('percent downloaded: ' + (percentComplete * 100));
        }
    }, false);
    return xhr;
}