title: Progress bar AJAX and PHP
body: <p>I want to create a progress bar for a server-side task ( written in php ) <br></p>
  
  <p>For learning purposes the example and task would be very simplistic.
  I would have a text field on the client page, read a <code>number</code>, pass it to the php script with ajax and make it calculate the sum of all numbers <code>from 0 to number</code> ( simplistic task that would take some time for big numbers, just to simulate some server-side work)</p>
  
  <p>in the .html file I would create a timer that would call a function every <code>n</code> seconds getting the index that my for loop got to and update a progress bar.</p>
  
  <p>My question is :<br>
  Is it possible to have in the same php file two functions , and how can I call a specific function with ajax  :  one that would block looping to <code>number</code> and another one I would call to get the current index the for-loop got to.</p>
  
  <p>The code I have so far : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script&gt;
          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 &amp;&amp; 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 &amp;&amp; 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);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="percentageDiv"&gt; Percentage div&lt;/div&gt;
  &lt;div id="sumDiv"&gt;&lt;/div&gt;
  &lt;input type="text" id="loop_nr"&gt;
  &lt;input type="submit" onclick="loop()"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>server_side.php</p>
  
  <pre><code>&lt;?php
      session_start();
      $index=$_GET["nr"];
      $progress = 0 ;
      $sum = 0 ;
  
      for ($i = 1; $i &lt;= $index; $i++) {
          $sum = $sum + $i;
          $progress++;
          $_SESSION['progress'] = $progress;
      }
      echo $sum;
  ?&gt;
  </code></pre>
  
  <p>getter.php</p>
  
  <pre><code>&lt;?php
      session_start();
      $progress = $_SESSION['progress'];
      echo $progress;
  ?&gt;
  </code></pre>
  
  <p>Thank You!</p>