当前位置：首页 > news >正文

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

news 2025/8/16 21:49:33

//此文件为前端获取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+"<br/>");}// console.log(objs);}</script></body>
</html>

//此文件为后端data.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();//刷新缓存}
?>