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

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

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+"
");

                }
               // console.log(objs);
               
            }
            
        script>
    body>
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
57
58
59
60
61
62
63

//此文件为后端data.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();//刷新缓存
     
}
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

相关阅读:
第20篇 2D绘图（十）图形视图框架（下）
力扣每日一题2022-08-29简单题：重新排列数组
Windows平台如何实现RTSP流二次编码并添加动态水印后推送RTMP或轻量级RTSP服务
通过小程序实现会议Oa的会议展示以及个人中心
Python 基础（十四）：类和对象
C/C++-指针
（附源码）计算机毕业设计SSM久宠宠物店管理系统
boost搜索引擎
Vue常见面试题 - 01
基于AI的3D场景重建技术新突破！破局自动驾驶端到端仿真

原文地址：https://blog.csdn.net/cdcdhj/article/details/133874532