输出时非常简单文本或 HTML。下面是一个例子。
(如果尝试输出,你会遇到问题JSON不过,我将进一步解决这个问题。)
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文件
<!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 对象(在完全加载之前),因为在获得完整的对象之前,语法将始终无效。
但如果你的回应multipleJSON 对象,一个接一个,然后可以在它们沿着管道传输时一次加载一个。
所以我调整了上面的代码...
更改 PHP FILE 第 4 行echo $val;
to echo '{"name":"'.$val.'"};'
。这会输出一系列 JSON 对象。
-
更改 HTML FILE 第 24 行console.log(this_response);
to
this_response = JSON.parse(this_response);
console.log(this_response.name);
请注意,此基本代码假设进入浏览器的每个“块”都是有效的 JSON 对象。情况并非总是如此,因为您无法预测数据包将如何到达 - 您可能需要根据分号分割字符串(或提出另一个分隔符)。
不要使用application/json
Do NOT将您的标题更改为application/json
- 我这样做了,我用谷歌搜索了三天。当响应类型为application/json
,浏览器等待响应完成,就像完全完成一样。然后解析完整的响应以检查它是否实际上是 JSON。然而我们的完整回应是{...};{...};{...};
这不是有效的 JSON。这jqXHR.done
方法假设存在错误,因为完整的响应无法解析为 JSON。
正如评论中提到的,您可以使用以下方法在客户端禁用此检查:
$.ajax(..., {dataType: "text"})
希望有些人觉得这很有用。