这篇文章主要为大家详细介绍了JavaScript数据推送Comet技术，感兴趣的小伙伴们可以参考一下

JavaScript数据推送主要致力于webapp的在线推送服务，不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地。

数据推送进化史：

1. HTTP协议简易轮询，保持着一个链接不放，或者通过前端不停的向后端发送请求

2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性

3. SSE(Server-Send Event)：服务器推送数据的新方式 

Comet：基于 HTTP 长连接的服务器推送技术

本课时介绍Comet:基于 HTTP 长连接的服务器推送技术，Comet 是一种 Web 应用架构。服务器端会主动以异步的方式向客户端程序推送数据（Ajax请求死循环），而不需要客户端显式的发出请求。Comet 架构非常适合事件驱动的 Web 应用，以及对交互性和实时性要求很强的应用，如股票交易行情分析、聊天室和 Web 版在线游戏等。

 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，并当状态改变时，进行输出） 参考：http://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程序设计有所帮助。