通过xhr的jQuery ajax进度
我正在尝试捕获Ajax请求的进度。 我从这个链接下面的文章http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ 。
它没有按预期工作。 与ID progressCounter Div应该有一些与我了解它，但在我的情况没有任何反应。 任何帮助？
在我看来， 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"); } });
ProgressEvent.lengthComputable
ProgressEvent.lengthComputable只读属性是一个布尔标志，指示ProgressEvent所涉及的资源是否具有可计算的长度。 如果不是，ProgressEvent.total属性没有重要的价值。
所以在你的情况下，如果你debugging一下，你会发现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
如果XMLHttpRequestProgressEvent lengthComputable为false，则意味着服务器从未在响应中发送Content-Length header 。
对于PHP
如果（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>
阿贾克斯：
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中显示的GIFpath。 在你的页面或者普通的layout / jsp或者头文件中join这个代码，以便在所有的Ajax调用中运行
