AJAX请求进度百分比日志 [英] AJAX request progress percentage log

问题描述

我读的内容 http://www.dave-bond.com/博客/ 2010/01 / JQuery的阿贾克斯正在进行-HMTL5 / ，然后我尝试做我自己的网站，AJAX的进度条，但在控制台我只有XHR响应时，PHP脚本将彻底结束。

I read content from http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ and i try make that ajax progress bar on my own site, but in console i have only xhr response when php script is full completed.

我的JS code部分：

My part of JS code:

    $('#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脚本的部分是：

For example, part of my test php script is:

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

我现在的控制台日志首先显示1，再经过大约10秒的console.log写完成

My current console log first show 1, and then after about 10sec console.log write 'completed'

简单地说，我想在Ajax请求过程中（PHP usleep时间约为10秒）在阿贾克斯reqest的控制台百分比显示（这可能吗？）。

Simply, i want while ajax request is in progress (php usleep time is about 10sec) display in console percentage of ajax reqest (is that possible?).

请帮忙。

推荐答案

该问题可能与服务器端，因为客户端似乎是正确的。那长调用 usleep（）函式可能会冻结服务器输出，并且如果客户端不接收HTTP响应状态行，它甚至不能解雇启动XHR对象事件（例如该服务可以与404状态code，这是在协议级别的错误，并报告为提供故障响应）。

The problem may be with the server side, since the client seems correct. That long call to usleep() may freeze server output, and if the client doesn't receive the HTTP response status line, it can't even fire the start event on the XHR object (for example the service may respond with a 404 status code, which is an error at the protocol level and is reported as delivering failure).

此外，浏览器可能需要传递事件JS引擎之前积累了一定数目的字节。我用在服务器端下面的脚本发送的数据N次4KB的负载（4096个字节似乎足以让Chrome浏览器至少更新进度计）：

Also, the browser may need to accumulate a certain number of bytes before passing the event to the JS engine. I used the following script on the server side to send a 4KB load of data N times (4096 octets seems enough for Chrome at least to update the progress counter):

<?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请求进度百分比日志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！