Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get Streaming Data Over Jquery Ajax
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment