Progress bar AJAX and PHP

Question

I want to create a progress bar for a server-side task ( written in php )

For learning purposes the example and task would be very simplistic. I would have a te

Answer 1

Here is the solution to made progress bar in PHP without javascript only on server side:

 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;

Answer 2

Not only one question in here

Your question would be two:

• How can I do AJAX calls to specific functions in PHP?
• How can I do a progress bar with AJAX?

How can I do AJAX calls to specific functions in PHP?

Your AJAX code is fine. The only thing you have to do in your PHP is receive this call.

Look at your request. You send a variable nr with your request:

server_side.php?nr="+loop_index

That will help us in the php code to determine that this is an AJAX call to do the sum operation. Now in the 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;
}

Thats it.

How can I do a progress bar with AJAX?

We need to make other AJAX call to request the progress to PHP.
First, we do another AJAX call to retrieve the progress with a timer!

    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);
     }

Then in the php side we retrieve this call as we did before and echo the $_SESSION['progress'] (as you already have)

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

And that's it!