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

相关阅读:
基于哈希表对unordered_map和unordered_set的封装
GBase 8c V3.0.0数据类型——时间/日期函数
Laf 云开发平台及其实现原理
使用 Vue 实现页面访问拦截
【自然语言处理（NLP）实战】LSTM网络实现中文文本情感分析（手把手与教学超详细）
win10 本地通过docker提供kafka服务
hydra（九头蛇）--参数及常见命令
TinyRenderer学习笔记--从零构建软件渲染器
“高级Java注解的简介及应用“
若依前后端不分离-表单中某一列是其他几列计算的结果

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