Explication détaillée des données JavaScript push Comet technology_javascript Skills

Le push de données JavaScript est principalement dédié au service push en ligne de la webapp. Nous n'avons pas besoin d'envoyer des requêtes Ajax au serveur à chaque fois et de transmettre activement les données du serveur vers le local.

Historique évolutif du data push :

1. Interrogation simple du protocole HTTP, conserver un lien ou envoyer en continu des requêtes au backend via le frontend

2. Après la mise à jour H5, WebSocket a considérablement amélioré la commodité du transfert de données bidirectionnel et unidirectionnel

3. SSE (Server-Send Event) : une nouvelle façon de transmettre des données au serveur

Comet : Technologie push serveur basée sur une connexion HTTP longue
Ce cours présente Comet : une technologie de serveur push basée sur des connexions HTTP longues. Comet est une architecture d'application Web. Le serveur transmettra activement les données au programme client de manière asynchrone (boucle infinie de requête Ajax) sans que le client fasse explicitement une demande. L'architecture Comet convient parfaitement aux applications Web événementielles et aux applications qui nécessitent une forte interactivité et des performances en temps réel, telles que l'analyse des opérations boursières, les salons de discussion et les jeux en ligne sur le Web.

1. Examinons d'abord l'exemple le plus simple d'ajax demandant des données 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

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

De cette façon, le front-end peut obtenir les données back-end et les afficher. Simulons le backend en poussant continuellement les données vers le frontend :

Une solution consiste à envoyer en continu des requêtes ajax dans une boucle frontale

2. L'Ajax du front-end jQuery envoie des requêtes en continu :

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

Cependant, une telle interrogation de connexion gaspille très évidemment les requêtes réseau. Nous pouvons également laisser le serveur backend le faire en boucle. Voir l'exemple ci-dessous

.

3. Natif Ajax, le serveur pousse de temps en temps (boucle backend, utilisez ob_flush() et flush() pour cracher des données)

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

Js front-end (js natif implémente ajax et sort lorsque le statut change) Référence : 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("");

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.