jimz

转 https://www.cnblogs.com/jasonyou/p/13629115.html

php

<?php
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 />\';

html

<!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 src="http://libs.baidu.com/jquery/2.0.0/jquery.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 :\'./b.php\'
            ,type:\'post\'
            ,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>";
                        console.log(html);
                        // $(\'#ontimeoutputArea\').html(html);
                    }
                }
                return xhr;               
            }
        });
    });
</script>
</html>

二、php端的代码。ob_flush和flush要同时执行,另外只能这样的调用顺序。先ob_flush在flush

三、如果在linux环境,如果服务器是nginx的话,要加个配置。参考链接:nginx服务器ob_flush和flush不起作用

检查nginx配置文件(nginx.conf),禁用nginx的buffering:

proxy_buffering off;
gzip off;
fastcgi_keep_conn on;

要注意最后这句fastcgi的哦~~
检查php.ini,禁用buffering:

output_buffering = off

注意这句配置不能通过ini_set()函数动态在程序中设置,这在php官方手册中有说明:
the output_buffering setting is PHP_INI_PERDIR therefore it may not be set using ini_set()
经过上面两步的配置(nginx.conf和php.ini)后,重启nginx就可以了,再次测试文章开头的代码,成功逐行输出

来源

https://blog.csdn.net/mangrandi/article/details/82789071

https://www.oschina.net/question/1439832_2148431?sort=default

https://stackoverflow.com/questions/37182850/how-to-php-send-result-to-ajax-immediately/37183216#37183216

https://www.laruence.com/2011/04/13/1991.html

b.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
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 />\';

 a.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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 src="http://libs.baidu.com/jquery/2.0.0/jquery.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 :\'./b.php\'
            ,type:\'post\'
            ,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>";
                        console.log(html);
                        // $(\'#ontimeoutputArea\').html(html);
                    }
                }
                return xhr;               
            }
        });
    });
</script>
</html>

  

 

 

来源

https://blog.csdn.net/mangrandi/article/details/82789071

https://www.oschina.net/question/1439832_2148431?sort=default

https://stackoverflow.com/questions/37182850/how-to-php-send-result-to-ajax-immediately/37183216#37183216

https://www.laruence.com/2011/04/13/1991.html

分类:

技术点:

相关文章: