Question

我从中读取内容 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/我尝试在我自己的网站上创建ajax进度条，但在控制台中我只有xhr响应，当php脚本完全完成时。

我的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，然后在大约10秒后console.log写入'completed'

简单地说，我想在ajax请求正在进行时（php usleep time大约10秒）显示在ajax reqest的控制台百分比中（可能吗？）。

请帮忙。

Answer 1

问题可能出在服务器端，因为客户端似乎是正确的。对usleep()的长调用可能会冻结服务器输出，如果客户端没有收到HTTP响应状态行，它甚至无法触发XHR对象上的start事件（例如服务）可能会回复404状态代码，这是协议级别的错误，并报告为传递失败）。

此外，浏览器可能需要在将事件传递给JS引擎之前累积一定数量的字节。我在服务器端使用以下脚本发送4次数据加载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"});

AJAX请求进度百分比日志

1 个答案: