并行ajax调用一个简单的进度条，不显示会话变量内的当前进度

I am trying to implement a simple progress bar. It's loops until a constant number, and I want to see the current number the loop is as progress. However It's not updating until the loop ends. I saw somewhere that issue is caused because of session blocking, but I couldn't make it work.

Script & HTML Codes:

<script>

    function makeRequest(toPHP, callback) {
        var xmlhttp;
        xmlhttp=new XMLHttpRequest();
        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("/wp-content/plugins/promc/templates/server_side.php?nr="+loop_index, function(response) {
             document.getElementById("sumDiv").innerHTML="Total sum = " + response;
             clearInterval(timer);
         });

         setInterval(makeRequest("/wp-content/plugins/promc/templates/getter.php", function(response) {
             document.getElementById("percentageDiv").innerHTML=response;
          }),1000);       
     }
</script>

<div id="percentageDiv"> Percentage div</div>
<div id="sumDiv"></div>
<input type="text" id="loop_nr" value="30000000">
<input type="submit" onclick="loop()">

Getter.php

<?php
    session_start();
    echo 'Progress: '.$_SESSION['progress'];

?> 

Server_side.php

<?php 
session_start();

if(isset($_GET['nr'])) {
    $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: '.$sum.' Session Progress: '.$_SESSION['progress'];
}

?>