javascript数据推送 - Comet:基于HTTP长连接的服务器推送技术

一、Comet:基于HTTP长连接的服务器推送技术
方法1：// 前端隔一段时间发一次ajax，但是请求很昂贵，所以应该交给服务器来做
方法2：
index.html

<meta charset="utf-8"/>   <!-- 防止乱码 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>测试</h1>
<script>
    // function conn(){
    //     $.ajax({
    //         url:'data.php',
    //         dataType:"json",    //  请求类型
    //         success:function(data){
    //             console.log(data);
    //         }
    //     });
    // }
    // conn();




     var getXmlHttpRequest = function(){
         if(window.XMLHttpRequest){
            //  主流浏览器提供了XMLHttpRequest对象
            return new XMLHttpRequest();
         }else if(window.ActiveXObject){
            // 低版本的IE浏览器没有提供XMLHttpRequest对象
            // 所以必须使用IE浏览器的特定实现ActiveXObject
            return new ActiveXObject("Microsoft.XMLHTTP");
         }
     };
     var xhr = getXmlHttpRequest();
     xhr.onreadystatechange = function(){
         if(xhr.readyState === 3 && xhr.status === 200){
            // 获取成功后执行操作
            // 数据在xhr.responseText
            console.log(xhr.responseText);
         }
     };
     xhr.open("get","data.php",true);
     xhr.send("");
</script>

data.php

<?php 
    // header("Content-type:application/json;charset=utf-8");
    header("Cache-Control:max-age=0");  //  后端输出没有缓存
    $i = 0;
    while($i < 9){
        $i++;
        // $res = array('success' => "ok","text" => "我是测试的文本");
        sleep(1);
        $random = rand(1,999);
        echo $random;
        echo "<br />";
        ob_flush();     //  输出缓冲区内容，不送给浏览器
        flush();        //  刷新输出缓冲，送向浏览器
    }


?>

方法3：
index.html

<meta charset="utf-8"/>   <!-- 防止乱码 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>测试</h1>
<script>
    function conn(){
        $.ajax({
            url:'data.php',
            dataType:"json",    //  请求类型
            success:function(data){
                console.log(data);
                conn();
            }
        });
    }
    conn();

</script>

data.php

<?php 
    header("Content-type:application/json;charset=utf-8");
    header("Cache-Control:max-age=0");  //  后端输出没有缓存
    $res = array('success' => "ok","text" => "我是测试的文本");
    echo json_encode($res);
    ob_flush();     //  输出缓冲区内容，不送给浏览器
    flush();        //  刷新输出缓冲，送向浏览器



?>

方法3：
index.html

<meta charset="utf-8"/>   <!-- 防止乱码 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>测试</h1>
<script>
    function conn(){
        $.ajax({
            url:'data.php',
            dataType:"json",    //  请求类型
            success:function(data){
                console.log(data);
                conn();
            }
        });
    }
    conn();

</script>

data.php

<?php 
    header("Content-type:application/json;charset=utf-8");
    header("Cache-Control:max-age=0");  //  后端输出没有缓存
    while(true){
        $res = array('success' => "ok","text" => "我是测试的文本");
        echo json_encode($res);
        exit();
    }




?>

二、基于WebSocket的推送方案
三、SSE(Server-Send Event):服务器推送数据的新方式