使用 ajax 的 php 和 javascript 是否可以使用进度条答案

【问题标题】：is progress bar possible with php and javascript using ajax使用 ajax 的 php 和 javascript 是否可以使用进度条
【发布时间】：2011-08-10 19:37:45
【问题描述】：

我想知道如何制作像gmail这样的进度条。

我试过了

<script src="jquery.js"></script>
<script>
$(function (){
    $.ajax({
        url: 'index.php',
        success: function(data) {
            $('#bar').html(data);
        }
    });
})
</script>
<div id="bar"></div>

还有index.php

[编辑]：sleep() 我只是想模拟连续的输出流，例如 php 不支持的多线程程序。

<?php

for($i=0; $i<=10; $i++)
{
    sleep(1);
    echo "$i";
}

似乎输出立即回显，所以我立即得到结果012345678910。

我也试过了

setInterval(function (){
        $.ajax({
            url: 'index.php',
            success: function(data) {
                $('#bar').html(data);
            }
        });
    }, 1000);

相反，我在维持 'progress' 的价值时遇到了麻烦，所以我做到了

<?php

session_start();

if(isset($_SESSION['value'])){
    if($_SESSION['value'] >= 10)
    {
        unset($_SESSION['value']);
    }
    else
    {
        $_SESSION['value']++;
    }
}
else
{
    $_SESSION['value'] = 0;
}

echo $_SESSION['value'];

作为我的 php.ini 的一部分。但似乎，我在连续间隔上调用 ajax 函数。

我的问题是，

google 在登录 gmail 时如何使用进度条。他们是否像我在第一个示例中尝试的那样获得连续的 'stream' 数据，或者在某些 url 上发送（定期）请求（尽管不是通过 ajax .. 通过 JSONP 或其他方式）并像第二个那样更新页面？
李>
我可以用 php 做同样的事情吗，即使不是用 php，我可以使用 javascript 和其他支持多线程的服务器端脚本语言来做吗？

【问题讨论】：

您应该将type="text/javascript" 添加到您的脚本标签中。
@ThiefMaster 但我似乎在工作
这就是为什么它是一个评论而不是一个答案 - 它只是为了改进你的代码。
@ThiefMaster：在 HTML 5 中不再是要求。
这并不意味着有点冗长是一件坏事

标签： php javascript ajax progress-bar

【解决方案1】：

我不确定 Gmail 究竟对进度条做了什么，但您可以在 PHP 中实现类似的功能，尽管可能有点棘手。

首先，解释为什么您的示例不起作用：

如果您像第一个示例一样回显并休眠，它将永远无法工作。 Ajax 执行一个完整的请求——也就是说，如果响应没有完成，它将等待。当您循环和休眠时，在 PHP 脚本完成执行之前，请求不会“关闭”。

如果您使用会话，就像在另一个示例中一样，问题就出在会话存储上。存储通常在脚本执行期间被锁定，并且它不会自我更新以允许您想要的进度检查类型。

您可以手动将进度写入文件（或数据库）。例如：

file_put_contents('progress.txt', 1);

然后，让另一个脚本读取文件并输出内容。

这应该可以工作，因为 file_put_contents 会打开、写入和关闭文件。

使用 PHP 以外的其他语言会更容易。多线程可能会使它更容易，但这不是必需的。但是，拥有一个持续运行的进程会更简单（PHP 只会在您的请求期间运行一个进程然后退出）

【讨论】：

好吧，我想在会话中存储进度......也许多线程会是更好的选择。你的想法还是很有价值的。

【解决方案2】：

每隔一段时间运行你的 jquery 代码，然后使用 PHP 打印进度百分比并绘制条形图。

所以会是这样的

<script>
function bar()
{
 var v=getProgress(...);
 setTimeout("bar()",1000);
 drawBar();
}

function drawBar(l)
{
 //set div's length to l
}
</script>

编辑 2

<?php
/* get the request and calculate the job completion percentage and echo it !  */
?>

【讨论】：

我的问题不是绘制条形图，而是如何从 php 获得这个进度百分比？是第一种方式……还是第二种方式？第一个不起作用，但它是否适用于 python 和 jsp 等其他语言？
我认为您尝试以错误的方式进行操作，如果您使用 sleep 它会在显示完整输出之前休眠，因此您在 10 秒后获得 123..10，您应该只获得完成百分比
不，我只是想模拟输出的连续流.. 但似乎 php 不这样做，python 或 java 是否有可能？
我不懂python，也不知道！但我认为 Java 不可能

【解决方案3】：

我认为 Gmail 在加载所有资源（如 JS 文件）时会显示进度。有不同的方法可以做到这一点：您可以使用 JS 动态包含所有资源，或者您可以让所有包含的 JS 文件报告它们已被加载。

要使 PHP 输出部分输出，请使用：

ob.php

<?php

ob_start();

for ($i = 0; $i < 100; $i++) {
    echo "{$i}<br />";

    ob_flush();
    flush();

    usleep(100000);
}

.htaccess

php_value output_buffering "0"

【讨论】：

AFAIK，确实是这样，进度条与上传条无关，就像其他答案中或多或少描述的那样。

【解决方案4】：

这个帖子和this link 帮助我找到了相同问题的解决方案，所以我提供它作为记录：

test.php:

<?php 
  for($i=0; $i<100; $i++)
  {   usleep(100000); //100ms
      echo 'A'; ob_flush(); flush();
  }
?>

test.html:

<body>
   <button onclick='call()'>call</button>
   <div id='progress'>...</div>
   <script>
      function fprogress(e) 
      { document.getElementById('progress').innerHTML ='progress: '+e.loaded +'%'; }
      function call()
      {  var req = new XMLHttpRequest();  
         req.addEventListener("progress", fprogress, false);
         req.open('GET', 'test.php', true);  req.send(null);
      }
   </script>
</body>

...所以 test.php 可以是任何做一些事情的工作...并且在做的时候 ECHOes 100 个字符（字节）和闪烁的缓冲区。

【讨论】：

PHP自己运行了一段时间，然后显示很多As
@mplungjan 在我自己的 apache/php 服务器上，这两个文件总是按原样工作... ) ...

【解决方案5】：

在我看来，您可以将登录过程分成几个部分和检查。

完成的每个部分检查都会向您的进度条发送响应，进度条宽度会增加此类模式。之后，进度条将向您的登录过程发送下一个请求以进行步骤，直到您无法达到 100% 登录和重定向。

【讨论】：

我的问题是如何获得持续的进步？？
这有点棘手。将您的登录分成几部分，1）第 1 步 2）第 2 步 3）第 3 步成功时向系统发送第一个请求，它将向 Ajax 栏发送 20，并且 ajax 栏会以这种方式增加。然后 Ajax 系统将发送第二个请求作为回复，系统将发送 40 个。所以总数为 60 个。在第三步中，ajax 将调用 final ，您可以使用 sleep 方式或与前面的步骤相同。
好吧，我正在寻找诀窍 :) ... 即使您知道 python 或 java
嗯，这和我的第二个例子一样。感谢您的关注！