zoukankan      html  css  js  c++  java
  • php ajax 即时实时输出内容

    转 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

  • 相关阅读:
    Mybatis异常--java.lang.IllegalArgumentException: NO ENUM const class org.apache.ibatis.type.JdbcType.int
    JAVA(IO流)文件复制
    JAVA继承与覆写
    收藏一些是实用的小技巧
    利用JS生成01010101……长度可控的序列
    JS脚本收藏(一些实用的函数)
    利用JavaScript生成随机数字!
    JavaScript自学之数组排序
    前端开发自学之JavaScript——显示当前时间
    Spring Boot Sample 016之spring-boot-error-exception
  • 原文地址:https://www.cnblogs.com/jimz/p/14302096.html
Copyright © 2011-2022 走看看