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

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