This is quite straightforward when outputting text or HTML. Below is an example.
(You’ll run into issues if trying to output JSON however, which I’ll tackle further down.)
PHP FILE
header('Content-type: text/html; charset=utf-8');
function output($val)
{
echo $val;
flush();
ob_flush();
usleep(500000);
}
output('Begin... (counting to 10)');
for( $i = 0 ; $i < 10 ; $i++ )
{
output($i+1);
}
output('End...');
HTML FILE
<!DOCTYPE>
<html>
<head>
<title>Flushed ajax test</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var last_response_len = false;
$.ajax('./flushed-ajax.php', {
xhrFields: {
onprogress: function(e)
{
var this_response, response = e.currentTarget.response;
if(last_response_len === false)
{
this_response = response;
last_response_len = response.length;
}
else
{
this_response = response.substring(last_response_len);
last_response_len = response.length;
}
console.log(this_response);
}
}
})
.done(function(data)
{
console.log('Complete response=" + data);
})
.fail(function(data)
{
console.log("Error: ', data);
});
console.log('Request Sent');
</script>
</body>
</html>
What if I need to do this with JSON?
It’s not actually possible to load a single JSON object incrementally (before it’s fully loaded) because until you have the complete object, the syntax will always be invalid.
But if your response has multiple JSON objects, one after another, then it’s possible to load one at a time, as they come down the pipe.
So I tweaked my code above by…
-
Changing PHP FILE line 4 from
echo $val;toecho '{"name":"'.$val.'"};'. This outputs a series of JSON objects. -
Changing HTML FILE line 24 from
console.log(this_response);tothis_response = JSON.parse(this_response); console.log(this_response.name);Note that this rudimentary code assumes that each “chunk” coming to the browser is a valid JSON object. This will not always be the case because you cannot predict how packets will arrive – you may need to split the string based on semi-colons (or come up with another separator character).
Don’t use application/json
Do NOT For change your headers to application/json – I did this and it had me Googling for 3 days. When the response type is application/json, the browser waits until the response is complete, as in fully complete. The full response is then parsed to check if it is infact JSON. However our FULL response is {...};{...};{...}; which is NOT valid JSON. The jqXHR.done method assumes there was an error, because the complete response cannot be parsed as JSON.
As mentioned in the comments, you can disable this check on the client side by using:
$.ajax(..., {dataType: "text"})
Hope some people find this useful.