本文介绍了jQuery ajax通过xhr进度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图捕获Ajax请求的进度。我正在关注此链接中的文章。

它没有按预期工作。只要我了解它,带有id progressCounter 的Div 应该包含%的内容,但在我的情况下没有任何反应。任何帮助?



在我看来,像 if(evt.lengthComputable){不在 XHR



JSFIDDLE:


$ b HTML:

 < div id =progressCounter>< / div>< br> 
< div id =loading>正在载入< / div>< br>
< div id =data>< / div>

JS:

  var progressElem = $('#progressCounter'); 
var URL =https://api.github.com/users/mralexgray/repos;
$(#loading)。hide();
//在#progressCounter中写入内容,稍后将更改为百分比
progressElem.text(URL);
$ b $ .ajax({
类型:'GET',
dataType:'json',
url:URL,
cache:false,
错误:函数(xhr,ajaxOptions,thrownError){
alert(xhr.responseText);
alert(thrownError);
},
xhr:function(){
var xhr = new window.XMLHttpRequest();
//下载进度
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();
},
完成:function(){
$(#loading)。hide();
},
成功:函数(json){
$(#data) .html(data receieved);
}
});


解决方案

ProgressEvent.lengthComputable



所以在你的情况下,如果你调试了一下,你会发现 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);



DEMO




FYI



如果 lengthComputable XMLHttpRequestProgressEvent 中为false,这意味着服务器永远不会发送 Content-Length标题在回应中。


I am trying to capture ajax request`s progress. I am following article from this link http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/.

It is not working as expected. Div with id progressCounter should have something in it with % as far as i understand it but nothing happens in my case. Any Help ?

It seems to me like if (evt.lengthComputable) { is not working in 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");
    }
});
解决方案

ProgressEvent.lengthComputable

So in your case if you debug a little , you will find evt.lengthComputable = false; so you can not trace the progress;

    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);

DEMO


FYI

If lengthComputable is false within the XMLHttpRequestProgressEvent, that means the server never sent a Content-Length header in the response.

这篇关于jQuery ajax通过xhr进度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-21 23:53