Detailed explanation of JavaScript data push Comet technology_javascript skills

JavaScript data push is mainly dedicated to the online push service of webapp. We do not need to send Ajax requests to the server every time and actively push data from the server to the local.

Evolutionary history of data push:

1. HTTP protocol simple polling, keep a link, or continuously send requests to the backend through the frontend

2. After the H5 update, WebSocket has greatly improved the convenience of two-way and one-way data push

3. SSE (Server-Send Event): a new way of server pushing data

Comet: Server push technology based on HTTP long connection
This class introduces Comet: a server push technology based on HTTP long connections. Comet is a web application architecture. The server will actively push data to the client program in an asynchronous manner (Ajax request infinite loop) without the client explicitly making a request. The Comet architecture is very suitable for event-driven Web applications and applications that require strong interactivity and real-time performance, such as stock trading analysis, chat rooms, and Web-based online games.

1. Let’s first look at the simplest example of ajax requesting json data:

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

<&#63;php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

In this way, the front-end can obtain the back-end data and output it. Let's simulate the backend continuously pushing data to the frontend:

One way is to continuously send ajax requests in a front-end loop

2. Front-end jQuery’s Ajax continuously sends requests:

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

<&#63;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);
&#63;>

However, such connection polling wastes network requests very obviously. We can also let the backend server do this in a loop. See the example below

3. Native Ajax, the server pushes every once in a while (backend loop, use ob_flush() and flush() to spit out data)

data.php

<&#63;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(); //缓存吐到浏览器
}
&#63;>

Front-end js (native js implements ajax and outputs when the status changes) Reference: 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("");

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.