php - AJAX请求进度百分比日志

  显示原文与译文双语对照的内容
0 0

我从 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/is读取内容,并尝试在我自己的站点上使用这个ajax进度条。

我的一部分是JS代码:


 $('#userSaveData').on('click', function(e){
 e.preventDefault();
 var $form = $(this).closest('form');
 var route = $form.attr('action');
 var form_data = $form.serializeObject();
 $.ajax({
 xhr: function()
 {
 var xhr = new window.XMLHttpRequest();
//Upload progress
 xhr.upload.addEventListener("progress", function(evt){
 if (evt.lengthComputable) {
 var percentComplete = evt.loaded/evt.total;
//Do something with upload progress
 console.log(percentComplete);
 }
 }, false);
//Download progress
 xhr.addEventListener("progress", function(evt){
 if (evt.lengthComputable) {
 var percentComplete = evt.loaded/evt.total;
//Do something with download progress
 console.log(percentComplete);
 }
 }, false);
 return xhr;
 },
 type: 'post',
 url: route,//url to my script below
 data: form_data,//some data, not used in script below
 success: function(){
 console.log('completed');
 }
 });
 return false;
 });

例如我的测试php脚本的一部分是:


<?php
 usleep(10000000);
 echo true;
?>

当前控制台日志首先显示 1,然后在大约 10sec console.log 写入'完成''

简单来说,当ajax请求正在进行时,( php usleep时间大约 10秒) 显示在 ajax reqest ( 有可能)的控制台百分比中。

请帮助。

时间: 原作者:

0 0

问题可能是服务器端,因为客户端看起来是正确的。 长期调用 usleep() 可以能会冻结服务器输出,如果客户端没有接收HTTP响应状态行,则甚至不能激发 start 事件。

另外,浏览器可能需要在将事件传递到JS引擎之前积累一定数量的字节。 我在服务器端使用以下脚本发送 4KB 次数据N 次( 4096个八位字节似乎对于 Chrome 来说足够了,至少可以更新进度计数器):


<?php
header("Content-Type: text/plain");
header("Content-Length:". ($size * $times));
flush();
ob_flush(); 

$size = 4096;
$times = 5;

function send($size) {
 while($size--> 0) {
 echo"A";
 }
 echo"n";
}

for ($i = 0; $i <$times; $i++) {
 send($size);
 flush();
 ob_flush(); 
 sleep(1);
}

这是客户端上的脚本:


$.ajax({
 xhr: function() {
 var xhr = new window.XMLHttpRequest();
 xhr.addEventListener("progress", function(evt){
 if (evt.lengthComputable) {
 console.log(evt.loaded);
 }
 }, false);
 return xhr;
 }
, type: 'post'
, cache: false
, url:"sleep.php"});

原作者:
...