Question

简单的javascript非常简单：只需将回调附加到{XMLHTTPRequest}.onprogress

即可

var xhr = new XMLHttpRequest();

xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};

xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

但我正在做一个用JQuery（$.get()或$.ajax()）下载html数据的ajax网站，我想知道哪个是获取请求进度以便显示的最佳方式它带有一点进度条，但奇怪的是，我在JQuery文档中找不到任何有用的东西......

Answer 1

$.ajax的内容（仅限HTML5）：

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

Answer 2

jQuery已经实现了promises，因此最好使用这项技术，而不是将事件逻辑移动到df.registerTempTable('test') sqlContext.cacheTable("test") d=sqlContext.sql("""...参数。我制作了一个jQuery插件，增加了进步承诺，现在它像其他承诺一样易于使用：

options

在github

上查看

Answer 3

jQuery有一个AjaxSetup()函数，允许您为所有ajax调用注册全局ajax处理程序，例如beforeSend和complete，并允许您访问xhr反对你正在寻找的进展

Answer 4

我尝试了三种截取Ajax对象构造的不同方法：

我的第一次尝试使用xhrFields，但这只允许一个侦听器，只附加下载（不上传）进度，并且需要看似不必要的复制和粘贴。
我的第二次尝试将progress函数附加到返回的promise，但我必须维护自己的处理程序数组。我找不到一个好的对象来附加处理程序，因为我可以访问XHR的另一个地方和另一个我可以访问jQuery XHR的地方，但我从来没有访问过延迟对象（只有它的承诺）。
我的第三次尝试让我可以直接访问XHR以附加处理程序，但同样需要复制和粘贴许多代码。
我结束了我的第三次尝试，并用我自己的jQuery替换了ajax。唯一可能的缺点是您无法再使用自己的xhr()设置。您可以通过检查options.xhr是否为函数来允许这样做。

我实际上是拨打promise.progress函数xhrProgress，以便稍后轻松找到它。您可能希望将其命名为其他内容以分隔上传和下载侦听器。我希望这可以帮助某人，即使原始海报已经得到了他所需要的东西。

(function extend_jQuery_ajax_with_progress( window, jQuery, undefined ) {
    var $originalAjax = jQuery.ajax;

    jQuery.ajax = function (url, options) {
        if (typeof(url) === 'object') {
            options = url;
            url = undefined;
        }
        options = options || {};

        // Instantiate our own.
        var xmlHttpReq = $.ajaxSettings.xhr();

        // Make it use our own.
        options.xhr = function () {
            return(xmlHttpReq);
        };

        var $newDeferred = $.Deferred();
        var $oldPromise = $originalAjax(url, options)
            .done(function done_wrapper( response, text_status, jqXHR) {
                return($newDeferred.resolveWith(this, arguments));
            })
            .fail(function fail_wrapper(jqXHR, text_status, error) {
                return($newDeferred.rejectWith( this, arguments));
            })
            .progress(function progress_wrapper() {
                window.console.warn("Whoa, jQuery started actually using deferred progress to report Ajax progress!");
                return($newDeferred.notifyWith( this, arguments));
            });

        var $newPromise = $newDeferred.promise();

        // Extend our own.
        $newPromise.progress = function (handler) {
            // Download progress
            xmlHttpReq.addEventListener('progress', function download_progress(evt) {
                // window.console.debug( "download_progress", evt );
                handler.apply(this, [evt]);
            }, false);

            // Upload progress
            xmlHttpReq.upload.addEventListener('progress', function upload_progress(evt) {
                // window.console.debug( "upload_progress", evt );
                handler.apply(this, [evt]);
            }, false);

            return(this);
        };

        return($newPromise);
    };
})(window, jQuery);

Answer 5

按照显示Ajax请求进度的步骤进行操作：

使用HTML和CSS创建Spinner或使用Bootstrap Spinner。
当最终用户请求AJAX数据进行无限循环或阈值限制时间时，显示微调框。
因此，在AJAX请求的成功/错误结果之后，删除当前显示的微调框并显示结果。

为简便起见，我建议您使用JS类来为此目的动态显示和隐藏微调框。

我希望这会有所帮助！

Answer 6

http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html

我正在寻找类似的解决方案，发现这个解决方案已经用完了。

$('#pdf-iframe').attr("src", pdf_url).load(function(){
    document.getElementById('pdf-iframe').contentWindow.print();
});

}

和您的服务器输出

var es;

function startTask() {
    es = new EventSource('yourphpfile.php');

//a message is received
es.addEventListener('message', function(e) {
    var result = JSON.parse( e.data );

    console.log(result.message);       

    if(e.lastEventId == 'CLOSE') {
        console.log('closed');
        es.close();
        var pBar = document.getElementById('progressor');
        pBar.value = pBar.max; //max out the progress bar
    }
    else {

        console.log(response); //your progress bar action
    }
});

es.addEventListener('error', function(e) {
    console.log('error');
    es.close();
});

获取JQuery ajax请求进展的最简洁方法是什么？

6 个答案: