通过 xhr 的 JQuery ajax 进度

IT技术 javascript jquery html
2021-02-07 16:09:42

我正在尝试捕获 ajax 请求的进度。我正在关注此链接http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ 中的文章。

它没有按预期工作。据我所知，带有 id progressCounter 的Div 中应该包含 % 的内容，但在我的情况下没有任何react。有什么帮助吗？

在我看来好像if (evt.lengthComputable) {没有工作XHR

JSFIDDLE： http : //jsfiddle.net/bababalcksheep/r86gM/

HTML：

<div id="progressCounter"></div><br>
<div id="loading">Loading</div><br>
<div id="data"></div>

JS：

var progressElem = $('#progressCounter');
var URL = "https://api.github.com/users/mralexgray/repos";
$("#loading").hide();
// write something in #progressCounter , later will be changed to percentage
progressElem.text(URL);

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                progressElem.html(Math.round(percentComplete * 100) + "%");
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
        $('#loading').show();
    },
    complete: function () {
        $("#loading").hide();
    },
    success: function (json) {
        $("#data").html("data receieved");
    }
});
3个回答

ProgressEvent.lengthComputable

ProgressEvent.lengthComputable 只读属性是一个布尔标志，指示 ProgressEvent 所关注的资源是否具有可计算的长度。如果不是，则 ProgressEvent.total 属性没有重要value。

所以在你的情况下，如果你稍微调试一下，你会发现evt.lengthComputable = false;你无法追踪进度；

    xhr.addEventListener("progress", function (evt) {
        console.log(evt.lengthComputable); // false
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            progressElem.html(Math.round(percentComplete * 100) + "%");
        }
    }, false);

演示

供参考

如果在 中lengthComputable为 false XMLHttpRequestProgressEvent，则表示服务器从未Content-Length header在响应中发送 a 。

啊好吧。内容长度是问题。谢谢。
2021-03-14 16:09:42
@django 不..所有浏览器都不支持它..你可以在这里查看
2021-03-17 16:09:42
没错，就是它。但是您可以指定为什么evt.lengthComputable是false我case.If我使用一个链接到本地JSON文件，我得到100％string.If我使用演示字符串"https://api.github.com/users/mralexgray/repos"，它不work.Why是什么？
2021-03-29 16:09:42
因为您的资源没有可计算的长度。您可能还对兼容性感兴趣
2021-03-31 16:09:42
我有一个服务器，它在请求时返回 jsons。我能做些什么来确保当我用 ajax 调用它时，我返回了 lengthComputable json。我在这里很困惑。
2021-04-11 16:09:42

对于 PHP

if (evt.lengthComputable) { 在 XHR 中不起作用，我这样做了，现在它可以工作了。

PHP：

$startTime = time(); 
//your code or 
sleep(10); 
$endTime = time() - $startTime; 
header('Content-Length: '.strlen($endTime));
$response['success'] = true;
echo json_encode($response);

这是我的 HTML：

<div class="progress">
<div id="bulk-action-progbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width:1%">                 
</div>
</div>

Ajax：

var percentComplete = 1;
$.ajax({
    method: 'post',
    url: 'test.php',
    data:{'actionPerform':'actionPerform'},
    xhr: function(){
          var xhr = new window.XMLHttpRequest();
          //Upload progress, request sending to server
          xhr.upload.addEventListener("progress", function(evt){
            console.log("in Upload progress");
            console.log("Upload Done");
          }, false);
          //Download progress, waiting for response from server
          xhr.addEventListener("progress", function(e){
            console.log("in Download progress");
            if (e.lengthComputable) {
              //percentComplete = (e.loaded / e.total) * 100;
              percentComplete = parseInt( (e.loaded / e.total * 100), 10);
              console.log(percentComplete);
              $('#bulk-action-progbar').data("aria-valuenow",percentComplete);
              $('#bulk-action-progbar').css("width",percentComplete+'%');

            }
            else{
                 console.log("Length not computable.");
            }
          }, false);
          return xhr;
    },
    success: function (res) {
        //...
    }
});

处理此问题的一个简单的迂回可能如下。

$(document)
    .ajaxStart(
        function() {

            $
                .blockUI({
                    message : '<img src="img/loadajax.gif" title="Loading..">Loading...',
                    css : {
                        padding : 20,
                        margin : 5,
                        width : '30%',
                        top : '40%',
                        left : '35%',
                        textAlign : 'center',
                        color : '#000',
                        border : 'none',
                        backgroundColor : '#fff',
                        cursor : 'wait'
                    }
                });
            });

$(document).ajaxStop(function() {
    $.unblockUI();
});

只需给出要在图像 src 中显示的 GIF 的路径。在您的页面或公共布局/jsp 或头文件加载时添加此代码，以便在所有 ajax 调用中随处运行

Nop.我不想加载 gif 或 ui 阻止程序或覆盖。我需要 XHR 事件
2021-04-02 16:09:42
其它你可能感兴趣的问题
上一篇Javascript 中的 window 真的是全局的吗？ 下一篇从 javascript onload 事件执行 managebean 方法