JQuery ajax进度通过xhr
JQuery ajax progress via xhr
我正在尝试捕获ajax请求的进度。我在看这个链接http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/的文章。
没有按预期工作。Div与id progressCounter应该有一些东西在它与%据我所知,但没有发生在我的情况下。有什么帮助吗?
在我看来,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");
}
});
progresseven . lengthcomputable
ProgressEvent。lengthComputable只读属性是一个布尔值标志,指示ProgressEvent所关注的资源是否具有可以计算的长度。如果没有,则progresseven .total属性没有显著值。
所以在你的情况下,如果你调试一下,你会发现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);
演示供参考
如果XMLHttpRequestProgressEvent
中lengthComputable
为假,这意味着服务器在响应中从未发送Content-Length header
。
FOR 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或头文件的onload处添加此代码,以便在所有ajax调用
相关文章:
- 使用xhr.onprogress可以在不耗尽内存的情况下处理大型ajax下载
- 为什么我在 JavaScript/AJAX 中的 xhr.onreadystatechange() 中的 “form.s
- 需要帮助编写等效于 XHR 请求的 Jquery $.ajax 请求
- 减慢 ajax 调用/xhr 请求的最佳方法
- 405 AJAX 调用 JSON 时出错(xhr.status)
- ajax 正在用多个调用覆盖 XHR 对象 - jQuery
- 如果应用程序具有 XHR 调用,其中应用程序/json 作为“类型”,是否意味着它是 AJAX
- XHR(Ajax)发送原型奇怪的行为
- rails应用程序中的AJAX请求错误:xhr.send((options.hasContent&&op
- 服务器返回重定向(302)后,iOS设备上的AJAX或XHR请求失败,代码为0
- 如何在使用Backbone'进行AJAX请求时访问XHR对象;s Fetch()
- js-ajax代码没有'工作不正常.第一个是在连接的两个xhr函数中不显示
- 是否有可能使用HTML拖放文件上传,但没有AJAX / XHR
- 美元.用ajax克隆XHR请求中断事件
- JQuery ajax xhr 100%完成前开始
- 美元.Ajax到dojo.用于sharepoint web服务的XHR无法工作
- 同步XHR (AJAX)已弃用
- 如何修复jquery中的ajax xhr错误
- AJAX: jQuery ajax api vs. Javascript xhr
- AJAX调用Elasticsearch导致XHR对象内存泄漏