javascript – 进度条AJAX和PHP

我想为服务器端任务创建一个进度条(用PHP编写)

出于学习目的,示例和任务将非常简单.
我会在客户端页面上有一个文本字段,读取一个数字,用ajax将其传递给PHP脚本并使其计算从0到数字的所有数字的总和(简单的任务需要一些时间才能获得大数字,只需要模拟一些服务器端的工作)

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

我的问题是：
是否有可能在同一个 PHP 文件中有两个函数,如何用ajax调用一个特定的函数：一个会阻塞循环到数字,另一个我会调用来获取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调用？
>如何使用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;
?>

就是这样！

javascript – 进度条AJAX和PHP

相关推荐