在普通的 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);
但我正在做一个 ajax 站点，它使用 JQuery ($.get()或$.ajax())下载 html 数据，我想知道哪种是获取请求进度的最佳方式，以便用一个小进度条显示它，但奇怪的是，我不是在 JQuery 文档中找到任何有用的东西......
像这样的东西$.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
}
});
jQuery 已经实现了 promise，所以最好使用这种技术，而不是将事件逻辑移动到options参数中。我制作了一个 jQuery 插件，它添加了进度Promise，现在它就像其他Promise一样易于使用：
$.ajax(url)
.progress(function(){
/* do some actions */
})
.progressUpload(function(){
/* do something on uploading */
});
在github上查看
我尝试了三种不同的拦截Ajax对象构造的方法：
xhrFields，但只允许一个听众，只附加下载（而不是上传）进度，并且需要看起来不必要的复制和粘贴。 progress函数附加到返回的 Promise，但我必须维护自己的处理程序数组。我找不到一个好的对象来附加处理程序，因为一个地方我可以访问 XHR，另一个地方我可以访问 jQuery XHR，但我从来没有访问过延迟对象（只有它的Promise）。 ajax用我自己的替换了 jQuery 。唯一潜在的缺点是您不能再使用自己的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 )
{
xmlHttpReq.addEventListener( 'progress', function download_progress( evt )
{
//window.console.debug( "download_progress", evt );
handler.apply( this, [evt]);
}, false );
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 );
jQuery 有一个AjaxSetup()函数，它允许您注册全局 ajax 处理程序，例如beforeSend和complete为所有 ajax 调用以及允许您访问xhr对象以执行您正在寻找的进度
http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html
我正在寻找一个类似的解决方案，发现这个使用完整。
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();
});
}
和你的服务器输出
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache');
function send_message($id, $message, $progress) {
$d = array('message' => $message , 'progress' => $progress); //prepare json
echo "id: $id" . PHP_EOL;
echo "data: " . json_encode($d) . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
//LONG RUNNING TASK
for($i = 1; $i <= 10; $i++) {
send_message($i, 'on iteration ' . $i . ' of 10' , $i*10);
sleep(1);
}
send_message('CLOSE', 'Process complete');