JavaScript data push is mainly committed to the online push service of webapps. We don’t need to actively push data from the server to the local area every time, like a server, to send Ajax requests.
History of data push evolution:
1. The HTTP protocol is simple to poll, keeping a link, or sending requests to the backend continuously through the front end
2. After the H5 update, WebSocket greatly improves the convenience of pushing data in both directions and unidirectional directions.
3. SSE (Server-Send Event): A new way for servers to push data
Comet: Server push technology based on HTTP long connection
This lesson introduces Comet: a server push technology based on HTTP long connections, which is a web application architecture. The server will actively push data to the client program in an asynchronous manner (the Ajax request dead loop) without the client making explicit requests. The Comet architecture is very suitable for event-driven web applications, as well as applications that require strong interactive and real-time capabilities, such as stock trading market analysis, chat rooms and web version online games.
1. Let’s first look at the simplest example of ajax request 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
<?php header('Content-type: application/json;charset=utf-8');$res = array('success'=>'ok', 'text'=>'I'm the text of the test');echo json_encode($res);?>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 the front end loop
2. Ajax in front-end jQuery constantly 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
<?php header('Content-type: application/json;charset=utf-8');header("Cache-Control:max-age=0"); //Set no cache sleep(1);$res = array('success'=>'ok', 'text'=>'I'm the text of the test');echo json_encode($res);?>However, such connection polling makes network request waste very obvious. We can also let the backend server cycle through this thing, see the following example
3. Native Ajax, the server pushes it once every once in a while (backend loop, use ob_flush() and flush() to spit out data)
data.php
<?php // header('Content-type: application/json;charset=utf-8');header("Cache-Control:max-age=0"); //Set no cache $i = 0;while ($i<9) { $i++; // $res = array('success'=>'ok', 'text'=>'I'm the text of the test'); // echo json_encode($res); sleep(1); $radom = rand(1,999); echo $radom; echo '<br/>'; ob_flush(); //Output cache, must be used with flush(); //Cache spit to the browser}?>Frontend js (native js implement ajax and outputs when the state changes) Reference: //www.VeVB.COM/article/82085.htm
var getXmlHttpRequest = function() { if (window.XMLHttpRequest) { //Mainstream browsers provide XMLHttpRequest object return new XMLHttpRequest(); } else if (window.ActiveXObject) { //The lower version of IE browser does not provide XMLHttpRequest object//So you must use the specific implementation of IE browser ActiveXObject return new ActiveXObject("Microsoft.XMLHttpRequest"); }};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() { console.log(xhr.readyState); if (xhr.readyState === 3 && xhr.status === 200) { //Execute the operation after successful acquisition//The data is in xhr.responseText console.log(xhr.responseText); }};xhr.open("get", "data.php", true);xhr.send("");The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.