javascript利用xhr对象实现http流的comet轮循，主要是利用readyState等于3的特点

cdcdhj2023-10-19 18:54

//此文件为前端获取http流

html 复制代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"></html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>拖动元素到另外一个元素当中</title>
       <script type="text/javascript" src="common.js"></script>
       <style type="text/css">
            #container
            {
                border:1px solid red;
                width: 300px;
                height: 300px;
            }
            #getmsg 
            {
                border: 1px solid blue;
                width: 200px;
                height: 200px;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
      
        <script type="text/javascript">
          


            var xhr=new createXHR();
            xhr.onreadystatechange=function(){
                if(xhr.readyState===3 && xhr.status===200)
                {
                    var received=0;
                    var result=xhr.responseText.substring(received);
                    received+=result.length;
                    process(result);
                }else if(xhr.readyState===4)
                {
                    console.log(xhr.responseText);
                }
            };
            xhr.open("get","data.php",true);
            xhr.send();
            function process(result)
            {
                
                var arr=result.split("\t\n");
                arr.pop();
                
                
                for(var i=0,len=arr.length;i<len;i++)
                {
                  document.write(JSON.parse(arr[i]).text+"<br/>");

                }
               // console.log(objs);
               
            }
            
        </script>
    </body>
</html>

//此文件为后端data.php

php 复制代码

<?php
header('Content-type:application/json;charset=utf-8');
header("Cache-Control:max-age=0");//设置无缓存
$i=0;
while($i<10)
{
    $i++;
    $result=array('success'=>'ok','text'=>'测试文本');
    echo json_encode($result,JSON_UNESCAPED_UNICODE);//设置汉字不进行轮换
  	//要输出linux格式的空格，避免成一坨不好分格
  	echo "\t\n";
    
    sleep(1);
    /*
    $radom=rand(1,999);
    echo $radom;
   */
   //输出缓存，必须和flush()一起使用
    ob_flush();
    flush();//刷新缓存
     
}
?>