一、html代码。利用$.ajax的xhr属性,以及js中对于XMLHttpRequest的onreadystatechange事件,实时的从后端获取并处理。
参考链接:ajax如何实现、readyState五中状态的含义
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div><button id="ontimeoutputBtn">及时输出</button></div>
<div id="ontimeoutputArea" style="border: 1px solid red"></div>
</body>
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// readyState总共有5个状态值,分别为0~4
// 0 未初始化状态:此时,已经创建了一个XMLHttpRequest对象
// 1 准备发送状态:此时,已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
// 2 已经发送状态:此时,已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应
// 3 正在接收状态:此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到
// 4 完成响应状态:此时,已经完成了HTTP响应的接收
$('#ontimeoutputBtn').click(function(){
$.ajax({
url :'./tree.php'
,type:'get'
,data:{}
,success:function(res){
console.log('这里用jq提供的方法处理');
console.log(res);
}
,xhr:function(){//返回一个更强大的XMLHttpRequest的对象
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
var xhr = new XMLHttpRequest();
}else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//绑定事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
//这里使用js原生的处理方式
// console.log('success');
}
if(xhr.readyState === 3){
var html = "<p style='border:1px solid red;'>"+xhr.responseText+"</p>";
$('#ontimeoutputArea').html(html);
}
}
return xhr;
}
});
});
</script>
</html>
二、php端的代码。ob_flush和flush要同时执行,另外只能这样的调用顺序。先ob_flush在flush
function onTimeOutput($str){
echo $str;
ob_flush();
flush();
}
echo 'Begin ...<br />';
for( $i = 0 ; $i < 10 ; $i++ )
{
$str = $i . '<br />';
onTimeOutput($str);
sleep(2);
}
echo 'End ...<br />';
三、如果在linux环境,如果服务器是nginx的话,要加个配置。参考链接:nginx服务器ob_flush和flush不起作用
proxy_buffering off;
gzip off;
fastcgi_keep_conn on;
可能你不知道这三项配置加到哪里,分享一下。至于放在nginx.conf里还是放在vhost的站点配置里,看自己了
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /var/www;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name localhost;
#在这里的呢
proxy_buffering off;
gzip off;
fastcgi_keep_conn on;
#在这里的呢
location / {
# First attempt to serve request as file, then
}
}
四、https环境上述代码可能不能执行。因为nginx的ssl_buffer_size 配置的原因,默认16k的缓存。你可以要么配置nginx设置这个值的大小,要么输出的时候多加一行
echo str_repeat(' ',1024*16);