How to clear xhr.responseText on onprogress event?

Question

JavaScript

Hello.
There is a simple PHP code that displays answers in a loop:

ob_start();

    $x = range(0, 20);

    foreach ( $x as $value )
    {
      usleep(250 * 1000);
      echo $value;
      flush();
      ob_flush();
    }

The client requests this page via ajax:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<script>
  window.onload = function(  ) {
    $.ajax({
      url: '/parser/ajax.php',
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.onprogress = function( event ) {
          console.log(xhr.responseText);
        };
        return xhr;
      },
    });
  };
</script>

The task outputs each iteration in the loop to the browser.
Now displays

0
01
012
0123
01234
012345

That is, it concatenates the server output ( xhr.responseText )
You need to get a separate iteration at each step:

0
1
2
3
4
5

How can I do that?

Answer 1

You just need to clear the buffer before outputting: ob_clean() .