JavaScript数据推送Comet技术详解
本文详解Comet技术，一种基于HTTP长连接的服务器推送架构。通过对比HTTP轮询、WebSocket和SSE，重点分析Comet的实现方式：前端循环Ajax请求与后端利用ob_flush()和flush()实时输出数据。文章提供原生JS与jQuery的代码示例，展示如何在股票行情、聊天室等实时应用中优化数据传输效率。
Comet技术概述与演进
JavaScript数据推送的核心目标是为Web应用提供在线推送服务，避免客户端频繁主动向服务器发送Ajax请求，转而由服务器端主动将数据推送到本地客户端。
数据推送技术的演进历程：
1. HTTP协议简易轮询：保持一个连接不释放，或者通过前端不断向后端发送请求来获取数据。
2. HTML5更新后引入了WebSocket，大大改善了双向和单向推送数据的便利性。
3. SSE（Server-Send Event）：这是一种服务器推送数据的新方式。
Comet架构原理
Comet：基于 HTTP 长连接的服务器推送技术。本部分介绍Comet架构，这是一种Web应用架构。服务器端会主动以异步方式向客户端程序推送数据（通过Ajax请求的某种循环机制），而不需要客户端显式地发出请求。Comet架构非常适合事件驱动的Web应用，以及对交互性和实时性要求很强的应用，如股票交易行情分析、聊天室和Web版在线游戏等。
Comet实现方案与代码示例
1.首先来看一个最简单的Ajax请求JSON数据的例子：
index.html
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'data.php',
dataType: "json",
success: function(data){
console.log(data);
}
});
</script>
data.php
<?php
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
?>
通过上述方式，前端即可获取后端数据并输出。接下来我们模拟后端不断推送数据到前端的场景：
一种办法是前端循环不断发送Ajax请求。
2.前端使用jQuery的Ajax不断发送请求：
index.html
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
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"); //设置没有缓存
sleep(1);
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
?>然而，这种连接轮询方式会导致网络请求浪费非常明显。我们也可以让后端服务器来循环执行这一操作，参考下面的例子。
3.原生Ajax实现，服务器隔一段时间推送一次（后端循环，使用ob_flush()和flush()函数输出数据）。
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'=>'我是测试的文本');
// echo json_encode($res);
sleep(1);
$radom = rand(1,999);
echo $radom;
echo '<br/>';
ob_flush(); //输出缓存，必须和flush()一起使用
flush(); //缓存吐到浏览器
}
?>
前台JS代码（使用原生JS实现Ajax，并在状态改变时进行输出）。参考链接：https://www.jb51.net/article/82085.htm
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if (xhr.readyState === 3 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
console.log(xhr.responseText);
}
};
xhr.open("get", "data.php", true);
xhr.send("");
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09