これは、テキストまたは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オブジェクトが次々に含まれている場合は、パイプを下って来るときに一度に1つずつロードすることができます。
だから私は上記のコードを微調整しました...
PHPFILEの4行目をからecho $val;
に変更しecho '{"name":"'.$val.'"};'
ます。これにより、一連のJSONオブジェクトが出力されます。
HTMLファイルの24行目をからconsole.log(this_response);
に変更
this_response = JSON.parse(this_response);
console.log(this_response.name);
この基本的なコードは、ブラウザーに到達する各「チャンク」が有効なJSONオブジェクトであることを前提としていることに注意してください。パケットがどのように到着するかを予測できないため、これが常に当てはまるとは限りません。セミコロンに基づいて文字列を分割する必要がある場合があります(または別の区切り文字を考え出す必要があります)。
使用しないでくださいapplication/json
ヘッダーを次のように変更しないでくださいapplication/json
-私はこれを行い、3日間グーグルで検索しました。応答タイプがのapplication/json
場合、ブラウザは、完全に完了した場合と同様に、応答が完了するまで待機します。次に、完全な応答が解析され、実際にJSONであるかどうかが確認されます。ただし、完全な応答は{...};{...};{...};
、有効なJSONではありません。jqXHR.done
完全な応答をJSONとして解析できないため、このメソッドはエラーが発生したと想定します。
コメントで述べたように、次を使用してクライアント側でこのチェックを無効にすることができます。
$.ajax(..., {dataType: "text"})
一部の人々がこれが役立つことを願っています。