sohelrana820/catch-php-output-buffering-data-jquery-ajax.php

## catch-php-output-buffering-data-jquery-ajax.php
<?php
/**
 * Catch php output buffering data over jQuery AJAX
 *
 * @author: Sohel Rana (me.sohelrana@gmail.com)
 * @author url: https://blog.sohelrana.me
 * @link: https://blog.sohelrana.me/catch-php-output-buffering-data-jquery-ajax/
 * @licence MIT
 */

set_time_limit(0);
ob_implicit_flush(true);
ob_end_flush();
for ($counter = 0; $counter < 10; $counter++) {
    //Hard work!
    sleep(1);
    $processed = ($counter + 1) * 10; //Progress
    $response = array('message' => $processed . '% complete. server time: ' . date("h:i:s", time()), 'progress' => $processed);
    echo json_encode($response);
}
sleep(1);
$response = array('message' => 'Complete', 'progress' => 100);
echo json_encode($response);

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<br/><br/><br/><br/>
<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>
        </div>
    </div>
    <h4 id="progressTest"></h4>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<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;
                }
                else
                {
                    progressResponse = response.substring(lastResponseLength);
                    lastResponseLength = response.length;
                }
                var parsedResponse = JSON.parse(progressResponse);
                $('#progressTest').text(progressResponse);
                $('#fullResponse').text(parsedResponse.message);
                $('.progress-bar').css('width', parsedResponse.progress + '%');
            }
        }
    });

    // On completed
    ajaxRequest.done(function(data)
    {
        console.log('Complete response = ' + data);
    });

    // On failed
    ajaxRequest.fail(function(error){
        console.log('Error: ', error);
    });

    console.log('Request Sent');
</script>

</body>
</html>
	<?php
	/**
	* Catch php output buffering data over jQuery AJAX
	*
	* @author: Sohel Rana (me.sohelrana@gmail.com)
	* @author url: https://blog.sohelrana.me
	* @link: https://blog.sohelrana.me/catch-php-output-buffering-data-jquery-ajax/
	* @licence MIT
	*/

	set_time_limit(0);
	ob_implicit_flush(true);
	ob_end_flush();
	for ($counter = 0; $counter < 10; $counter++) {
	//Hard work!
	sleep(1);
	$processed = ($counter + 1) * 10; //Progress
	$response = array('message' => $processed . '% complete. server time: ' . date("h:i:s", time()), 'progress' => $processed);
	echo json_encode($response);
	}
	sleep(1);
	$response = array('message' => 'Complete', 'progress' => 100);
	echo json_encode($response);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
	<br/><br/><br/><br/>
	<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>
	</div>
	</div>
	<h4 id="progressTest"></h4>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js" type="text/javascript"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<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;
	}
	else
	{
	progressResponse = response.substring(lastResponseLength);
	lastResponseLength = response.length;
	}
	var parsedResponse = JSON.parse(progressResponse);
	$('#progressTest').text(progressResponse);
	$('#fullResponse').text(parsedResponse.message);
	$('.progress-bar').css('width', parsedResponse.progress + '%');
	}
	}
	});

	// On completed
	ajaxRequest.done(function(data)
	{
	console.log('Complete response = ' + data);
	});

	// On failed
	ajaxRequest.fail(function(error){
	console.log('Error: ', error);
	});

	console.log('Request Sent');
	</script>

	</body>
	</html>