Question

我想知道如何像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的一部分。但似乎，我在连续间隔调用ajax函数。

我的问题是，

谷歌如何使用进度条，同时登录gmail。他们是否获得了我在第一个例子中尝试的连续'stream'数据或者在某个网址上发送（定期）请求（虽然不是通过ajax ...通过JSONP或其他任何方式）并且像第二个那样更新页面？
我是否可以对php执行相同的操作，即使不使用php，我是否可以使用支持多线程的javascript和其他服务器端脚本语言来执行此操作？

Answer 1

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

首先，解释为什么你的例子不起作用：

如果你回忆和睡觉，就像你的第一个例子一样，它永远不会起作用。 Ajax执行完整请求 - 也就是说，如果响应没有完成，它将等待。循环和休眠时，在PHP脚本执行完毕之前，请求不会“关闭”。

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

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

file_put_contents('progress.txt', 1);

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

这应该有效，因为file_put_contents会打开，写入和关闭文件。

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

Answer 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 !  */
?>

Answer 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"

Answer 4

根据我的意见，您可以将登录过程分成几个部分并进行检查。

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

可以使用php和javascript使用ajax进度条

4 个答案: