Detaillierte Erläuterung der JavaScript-Daten-Push-Fähigkeiten von Comet technology_javascript

JavaScript-Daten-Push ist hauptsächlich für den Online-Push-Dienst von WebApps gedacht. Wir müssen nicht jedes Mal Ajax-Anfragen an den Server senden und Daten aktiv vom Server an den lokalen Server senden.

Evolutionsgeschichte des Daten-Push:

1. Einfache Abfrage des HTTP-Protokolls, Behalten eines Links oder kontinuierliches Senden von Anfragen an das Backend über das Frontend

2. Nach dem H5-Update hat WebSocket den Komfort des bidirektionalen und einseitigen Daten-Pushs erheblich verbessert

3. SSE (Server-Send Event): eine neue Art der Serverübertragung von Daten

Comet: Server-Push-Technologie basierend auf einer langen HTTP-Verbindung
Dieser Kurs stellt Comet vor: eine Server-Push-Technologie, die auf langen HTTP-Verbindungen basiert. Comet ist eine Webanwendungsarchitektur. Der Server überträgt aktiv Daten asynchron an das Client-Programm (Ajax-Anfrage-Endlosschleife), ohne dass der Client explizit eine Anfrage stellt. Die Comet-Architektur eignet sich sehr gut für ereignisgesteuerte Webanwendungen und Anwendungen, die eine starke Interaktivität und Echtzeitleistung erfordern, wie z. B. Aktienhandelsanalysen, Chatrooms und webbasierte Online-Spiele.

1. Schauen wir uns zunächst das einfachste Beispiel für die Anforderung von JSON-Daten durch Ajax an:

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;>

Auf diese Weise kann das Front-End die Back-End-Daten erhalten und ausgeben. Lassen Sie uns simulieren, dass das Backend kontinuierlich Daten an das Frontend überträgt:

Eine Möglichkeit besteht darin, kontinuierlich Ajax-Anfragen in einer Front-End-Schleife zu senden

2. Ajax des Front-Ends von jQuery sendet kontinuierlich Anfragen:

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;>

Eine solche Verbindungsabfrage verschwendet jedoch offensichtlich Netzwerkanfragen. Wir können dies auch in einer Schleife tun. Siehe das Beispiel unten

3. Natives Ajax, der Server pusht hin und wieder (Backend-Schleife, verwenden Sie ob_flush() und flush(), um Daten auszuspucken)

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 (natives JS implementiert Ajax und gibt aus, wenn sich der Status ändert) Referenz:

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("");

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.