JavaScript Data Push Comet technology detailed _javascript skills

JavaScript data push is mainly committed to WebApp online push service, do not have every time we like the server to send AJAX requests to actively push data from the server side to the local.

Data Push Evolutionary history:

1. HTTP protocol simple polling, keep a link not put, or through the front-end non-stop to send the request back

2. H5 update with WebSocket greatly improve the convenience of two-way and one-way push data

3. SSE (Server-send Event): A new way for the server to push data

Comet: Server push technology based on HTTP long connection
This lesson introduces Comet: Server Push technology based on HTTP long connection, Comet is a kind of Web application architecture. The server side takes the initiative to push data to the client program asynchronously (Ajax request dead loops) without requiring the client to explicitly issue the request. The Comet architecture is ideal for event-driven WEB applications, as well as for interactive and real-time applications such as stock trading quotes analysis, chat rooms and Web version online games.

1. First look at one of the simplest AJAX request JSON data examples:

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 ' => ' I am the text of the test ');
echo Json_encode ($res);
? >

This will enable the front-end to obtain back-end data and output. Here we will simulate the back end pushing data to the front end continuously:

One way is for the front-end loops to keep sending Ajax requests

2. Front-End jquery Ajax continues to send 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

<?php 
Header (' Content-type:application/json;charset=utf-8 ');
Header ("cache-control:max-age=0"); Setting no cache sleep
(1);
$res = Array (' Success ' => ' OK ', ' text ' => ' I am the text of the test ');
echo Json_encode ($res);
? >

But this kind of connection polling, the network request waste is very obvious, we can also let the back-end server to loop to do this thing, see the following example

3. Native Ajax, the server is pushed once a time (back-end loop, with Ob_flush () and flush () spit data)

data.php

<?php 
//Header (' Content-type:application/json;charset=utf-8 ');
Header ("cache-control:max-age=0"); The setting is not cached
$i = 0;
while ($i <9) {
 $i + +;
 $res = Array (' Success ' => ' OK ', ' text ' => ' I am the text of the test ');
 echo Json_encode ($res);
 Sleep (1);
 $radom = rand (1,999);
 echo $radom;
 Echo ' <br/> ';
 Ob_flush (); Output caching must be used with the flush ()
 flush ();//cache Spit to Browser
}
?>

Foreground JS (native JS to implement Ajax, and when the state changes, the output) reference: http://www.jb51.net/article/82085.htm

var getxmlhttprequest = function () {
 if window. XMLHttpRequest) {
  //main browser provides XMLHttpRequest object return
  new XMLHttpRequest ();
 } else if (window. ActiveXObject) {
  //low version of IE browser does not provide XMLHttpRequest object
  //So must use IE browser specific implementation activexobject return
  new ActiveXObject ("Microsoft.xmlhttprequest");
 }

;
var xhr = Getxmlhttprequest ();
Xhr.onreadystatechange = function () {
 console.log (xhr.readystate);
 if (xhr.readystate = = 3 && Xhr.status = =) {
  //Get successful Execute Operation
  //data in 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 to learn JavaScript program to help you.