可以计算AJAX加载了多少数据?
我一直在忙着一些AJAX代码。 我想计算已加载了多少数据,我想用百分比显示它。
我所有预装的信息都在“反馈”中。 我可以计算它包含多少DATA(以字节为单位),还可以查看进度吗? 就像装载时一样: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 ); } }); };
抱歉我的英语不好。
这是可能的。 XHR有一个progress
事件 。 唯一的问题是访问XHR对象 – 遗憾的是, jqXHR
只接收jqXHR
对象而不是底层的XHR对象。 它也不能作为包装器的属性访问。 但是,您可以通过向$.ajax()
添加以下选项来挂钩XHR对象的创建过程:
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
处理程序。当XHR对象的 readyState
变为2
(* HEADERS_RECEIVED *)时,您可以访问Content-Length
标头以获取总大小,然后等待事件以xhr.readyState == 3
( LOADING )触发。
然后,您可以通过查看xhr.responseText.length
来计算进度。
但是,这只会发射一次。 因此,您需要启动一个计时器(使用setInterval()
),它将检查就绪状态和响应大小,例如每100毫秒。 请求完成后,立即使用clearInterval()
再次停止间隔。