0

我从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 写入“完成”

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

请帮忙。

4

1 回答 1

2

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

此外，浏览器在将事件传递给 JS 引擎之前可能需要累积一定数量的字节。我在服务器端使用以下脚本发送了 N 次 4KB 的数据负载（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"});
于 2013-10-08T21:36:50.600 回答