我一直在忙于一些AJAX代码。我想计算已加载了多少数据,并想用百分比显示它。
我所有的预加载信息都在“反馈”中。我可以计算它包含多少数据(以字节为单位),也可以查看进度吗?就像加载时一样:10kb,20kb,30kb等
我的代码:
function calc(page) { $('#pageLoad h2').animate({ marginTop : '0px'}, 200); $.ajax( { url: './pages/page.php', type: 'POST', data: 'page='+page, success: function( feedback ) { $('#content').html( feedback ); } }); };
对不起,我英语不好。
这 是 可能的。XHRs有一个progress事件。唯一的问题是访问XHR对象- 不幸的是beforeSend仅接收该jqXHR对象,而不接收基础XHR对象。也不能作为包装器的属性来访问它。但是,您可以通过将以下选项添加到XHR对象来创建XHR对象$.ajax():
progress
beforeSend
jqXHR
$.ajax()
xhr: function () { var xhr = $.ajaxSettings.xhr(); // call the original function xhr.addEventListener('progress', function (e) { if (e.lengthComputable) { var percentComplete = e.loaded / e.total; // Do something with download progress } }, false); return xhr; }
这是我最初的解决方案。与jQuery结合起来非常困难,因为您不能轻易地挂接到onreadystatechange处理程序,并且在设置之后无法安全地替换它:
您需要添加一个自定义onreadystatechange处理程序。当readyStateXHR对象的变为2( HEADERS_RECEIVED )时,您可以访问Content-Length标头以获取总大小,然后使用xhr.readyState == 3( LOADING )等待事件触发。
onreadystatechange
readyState
2
Content-Length
xhr.readyState == 3
然后,您可以通过查看来计算进度xhr.responseText.length。 但是,这只会触发一次。因此,您需要启动一个计时器(使用setInterval()),该计时器将检查就绪状态和响应大小,例如每100毫秒。请求完成后,您可以使用再次停止间隔clearInterval()。
xhr.responseText.length
setInterval()
clearInterval()