Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Get Streaming Data Over Jquery Ajax
* Catch php output buffering data over jQuery AJAX
* @author: Sohel Rana (
* @author url:
* @link:
* @licence MIT
for ($counter = 0; $counter < 10; $counter++) {
//Hard work!
$processed = ($counter + 1) * 10; //Progress
$response = array('message' => $processed . '% complete. server time: ' . date("h:i:s", time()), 'progress' => $processed);
echo json_encode($response);
$response = array('message' => 'Complete', 'progress' => 100);
echo json_encode($response);
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link href="" type="text/css" rel="stylesheet"/>
<div class="col-lg-8 col-lg-offset-2">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:0">
<span id="fullResponse"></span>
<h4 id="progressTest"></h4>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
var lastResponseLength = false;
var ajaxRequest = $.ajax({
type: 'post',
url: 'catch-php-output-buffering-data-jquery-ajax.php',
data: {},
dataType: 'json',
processData: false,
xhrFields: {
// Getting on progress streaming response
onprogress: function(e)
var progressResponse;
var response = e.currentTarget.response;
if(lastResponseLength === false)
progressResponse = response;
lastResponseLength = response.length;
progressResponse = response.substring(lastResponseLength);
lastResponseLength = response.length;
var parsedResponse = JSON.parse(progressResponse);
$('.progress-bar').css('width', parsedResponse.progress + '%');
// On completed
console.log('Complete response = ' + data);
// On failed{
console.log('Error: ', error);
console.log('Request Sent');
Copy link

TwinMist commented Mar 4, 2019

does not work for me.
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 64 of the JSON data[Learn More]

any ideas?

Copy link

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 64 of the JSON data[Learn More]

You're getting this error because of ur web server does not support streams
I've tried it on my nginx proxy and got the same error
then I tried on apache provided via xampp and everything worked well

Copy link

not working at all, the js call waits till php file is done and then outputs the whole data

Copy link

rs430 commented Jun 17, 2019

not working in production server, but in wamp everything worked well,

any ideas?

Copy link

sidux commented May 23, 2020

When using nginx you need to disable fastcgi_buffering with header('X-Accel-Buffering: no');
Disabling the cache is useful to avoid caching the response header("Cache-Control: no-cache, must-revalidate");

Copy link

Thanks a ton!

Copy link

It's Not working for me. I am having foreach loop and i have used exactly what u diid in this code. :-(

My Json display like:


That's not valid JSON.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment