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

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

PeterTough2 commented Jun 30, 2020

Thanks a ton!

Copy link

ashleedawg commented Oct 12, 2020

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