PHP+jquery ajax 实现实时的输出显示

一、html代码。利用$.ajax的xhr属性，以及js中对于XMLHttpRequest的onreadystatechange事件，实时的从后端获取并处理。

<!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);

PHP+jquery ajax 实现实时的输出显示

猜你喜欢