【问题标题】：Progress bar AJAX and PHP进度条 AJAX 和 PHP
【发布时间】：2023-04-03 16:44:01
【问题描述】：

我想为服务器端任务创建一个进度条（用 php 编写）

出于学习目的，示例和任务将非常简单。我将在客户端页面上有一个文本字段，读取number，将其传递给带有ajax 的php 脚本，并使其计算所有数字的总和from 0 to number（对于大数字来说，这个简单的任务需要一些时间，只是模拟一些服务器端工作）

在 .html 文件中，我将创建一个计时器，它会每隔 n 秒调用一个函数，获取我的 for 循环到达的索引并更新进度条。

我的问题是：
是否可以在同一个 php 文件中有两个函数，以及如何使用 ajax 调用特定函数：一个会阻止循环到number，另一个我会调用以获取 for 循环得到的当前索引.

到目前为止我的代码：

<!DOCTYPE html>
<html>
<head>
    <script>
        function myTimer()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("percentageDiv").innerHTML=xmlhttp.response;
                        alert(xmlhttp.response);
                    }
              }
            xmlhttp.open("GET","getter.php",true);
            xmlhttp.send();
        }

        function loop(){
            var loop_index = document.getElementById("loop_nr").value;
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("sumDiv").innerHTML="Total sum = " + xmlhttp.response;
                        clearInterval(myVar);
                    }
              }
            xmlhttp.open("GET","server_side.php?nr="+loop_index,true);
            xmlhttp.send();
            var myVar=setInterval(function(){myTimer()},1000);
        }
    </script>
</head>
<body>
<div id="percentageDiv"> Percentage div</div>
<div id="sumDiv"></div>
<input type="text" id="loop_nr">
<input type="submit" onclick="loop()">

</body>
</html>

server_side.php

<?php
    session_start();
    $index=$_GET["nr"];
    $progress = 0 ;
    $sum = 0 ;

    for ($i = 1; $i <= $index; $i++) {
        $sum = $sum + $i;
        $progress++;
        $_SESSION['progress'] = $progress;
    }
    echo $sum;
?>

getter.php

<?php
    session_start();
    $progress = $_SESSION['progress'];
    echo $progress;
?>

谢谢！

【问题讨论】：

你之前做过对php的ajax调用吗？这和它没有什么不同，只是你必须将进度的值保存在$_SESSION 中才能持久化。
我其实是 ajax 和 php 的新手，我会发布我到目前为止的代码
我只是在想这个。我的问题是如何使用 ajax 从 php 调用特定函数？
我认为您拥有的 PHP 比 AJAX 更重要。也发一下。

标签： javascript php html ajax

【解决方案1】：

这里不止一个问题

你的问题是两个：

如何对 PHP 中的特定函数进行 AJAX 调用？
如何使用 AJAX 制作进度条？

如何对 PHP 中的特定函数进行 AJAX 调用？

您的 AJAX 代码没问题。在你的 PHP 中你唯一需要做的就是接听这个电话。

查看您的请求。您在请求中发送变量nr：

server_side.php?nr="+loop_index

这将帮助我们在 php 代码中确定这是一个执行求和操作的 AJAX 调用。现在在 PHP 中：

<?php session_start();

//We look at the GET php variable to see if the "nr" is coming
if(isset($_GET['nr'])) {
    //Its coming!. Now we procede to call our function to sum
    $result = sum($_GET['nr']);
}

function sum($nr) {
    $progress = 0 ;
    $sum = 0 ;
    for ($i = 1; $i <= $nr; $i++) {
       $sum = $sum + $i;
       $progress++;
       $_SESSION['progress'] = $progress;
    }
    echo $sum;
}

就是这样。

如何使用 AJAX 制作进度条？

我们需要进行其他 AJAX 调用来请求 PHP 的进度。
首先，我们执行另一个 AJAX 调用来使用计时器检索进度！

    var timer;
    
    //try to delete duplications. Do a generic function that does the request to php
    function makeRequest(toPHP, callback) {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    callback(xmlhttp.response);
                }
          }
        xmlhttp.open("GET",toPHP,true);
        xmlhttp.send();
     }

     function loop() {
         var loop_index = document.getElementById("loop_nr").value;
         makeRequest("server_side.php?nr="+loop_index, function(response) {
             document.getElementById("sumDiv").innerHTML="Total sum = " + response;
             clearInterval(timer);
         });
         timer=setInterval(makeRequest("getter.php", function(response) {
             document.getElementById("percentageDiv").innerHTML=response;
          }),1000);
     }

然后在 php 端，我们像以前一样检索这个调用并回显$_SESSION['progress']（就像你已经拥有的那样）

<?php
    session_start();
    $progress = $_SESSION['progress'];
    echo $progress;
?>

就是这样！

编辑： 不能将会话保存到文件（默认 PHP 行为），因为如果这样做，“进度”AJAX 将被阻止。您应该将会话存储在 Redis 等键值数据库中，以实现并行性和水平可扩展性。

【讨论】：

谢谢，到目前为止，您对我的帮助很大。我已经编辑了问题中的代码。您能否看一下并告诉我为什么我的progressDiv 在sum-task 完成时才更新，直到那时它被阻止。（任务完成后，我在 myTimer 中收到警报）
问题已解决 - 我遇到了阻塞问题，因为我没有关闭会话，因此 ajax 请求不并行。我将您的问题标记为答案，因为您帮助了我很多！谢谢！
很高兴它对您有所帮助！
我很想知道示例代码是如何工作的。由于两个 PHP 脚本都需要会话才能工作，所以我不知道如何使它们并行运行......
@Goozak 会话不得保存到文件中（默认 PHP 行为），因为如果这样做，“进度”AJAX 将被阻止。您应该将会话存储在 Redis 等键值数据库中，以实现并行性和水平可扩展性。

【解决方案2】：

以下是仅在服务器端不使用 javascript 在 PHP 中制作进度条的解决方案：

 echo "<div style=\"float:left;\">Start... </div>";
 for ($i = 0; $i<20; $i++){
    echo '<div style="float:left;background-color:red;height:20px;width:'.$i.'px"></div>';
    ob_flush();
    flush();
    usleep(100000);
 }
 echo "<div style=\"float:left\"> Done!</div>.";
 ob_end_flush();exit;

【讨论】：

请不要复制这个。看到这样的代码真的很痛苦。