Це досить просто при виведенні тексту або HTML . Нижче наведено приклад.
( Однак при спробі вивести JSON у вас виникнуть проблеми , які я вирішу далі).
PHP ФАЙЛ
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
<!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>
Що робити, якщо мені потрібно зробити це за допомогою JSON?
Насправді неможливо поступово завантажувати один об'єкт JSON (до його повного завантаження), оскільки поки у вас не буде повний об'єкт, синтаксис завжди буде недійсним.
Але якщо у вашій відповіді є кілька об’єктів JSON, один за одним, тоді можна завантажувати по одному, коли вони спускаються по трубі.
Тож я змінив свій код вище на ...
Зміна рядка PHP FILE 4 з echo $val;на echo '{"name":"'.$val.'"};'. Це виводить серію об'єктів JSON.
Зміна рядка 24 ФАЙЛА HTML з console.log(this_response);на
this_response = JSON.parse(this_response);
console.log(this_response.name);
Зверніть увагу, що цей елементарний код передбачає, що кожен "шматок", що надходить у браузер, є дійсним об'єктом JSON. Це буде не завжди так, оскільки ви не можете передбачити, як надходитимуть пакети - можливо, вам доведеться розділити рядок на основі крапки з комою (або запропонувати інший символ-роздільник).
Не використовуйте application/json
Do NOT Для зміни ваших заголовків application/json- я зробив це , і це було мені погуглити в протягом 3 днів. Коли тип відповіді є application/json, браузер чекає, поки відповідь не завершиться, як і в повній мірі. Потім повна відповідь аналізується, щоб перевірити, чи це фактично JSON. Однак наша ПОВНА відповідь - {...};{...};{...};це НЕ дійсний JSON. jqXHR.doneМетод передбачає , що була помилка, тому що повну відповідь не може бути розібраний як JSON.
Як зазначалося в коментарях, ви можете вимкнути цю перевірку на стороні клієнта, використовуючи:
$.ajax(..., {dataType: "text"})
Сподіваюся, деякі люди вважають це корисним.