JavaScript Data Push est principalement engagé dans le service push en ligne de WebApps. Nous n'avons pas besoin de pousser activement les données du serveur vers la zone locale à chaque fois, comme un serveur, pour envoyer des demandes AJAX.
Historique de l'évolution de la poussée des données:
1. Le protocole HTTP est simple à interroger, à garder un lien ou à envoyer des demandes au backend en continu à travers le front
2. Après la mise à jour H5, WebSocket améliore considérablement la commodité de pousser les données dans les deux sens et les directions unidirectionnelles.
3. SSE (Événement Server-Send): une nouvelle façon pour les serveurs de pousser les données
COMET: TECHNOLOGIE DE PUSSE DE SERVEA
Cette leçon présente Comet: une technologie de push serveur basée sur les connexions longues HTTP, qui est une architecture d'application Web. Le serveur poussera activement les données vers le programme client de manière asynchrone (la boucle Dead Dead Ajax) sans que le client ne fasse des demandes explicites. L'architecture COMET est très adaptée aux applications Web axées sur les événements, ainsi que pour les applications qui nécessitent de solides capacités interactives et en temps réel, telles que l'analyse du marché des opérations d'actions, les salles de chat et les jeux en ligne de version Web.
1. Regardons d'abord l'exemple le plus simple des données JSON de demande Ajax:
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 / javascrip fonction (data) {console.log (data);}}); </cript>data.php
<? Php En-tête ('Content-Type: Application / JSON; charSet = UTF-8'); $ res = array ('Success' => 'OK', 'Text' => 'Je suis le texte du test'); echo json_encode ($ res);?>De cette façon, le frontal peut obtenir les données back-end et les sortir. Simulons le backend en poussant en continu des données vers le frontend:
Une façon consiste à envoyer en continu les demandes de l'Ajax dans la boucle avant
2. Ajax en frontal jQuery envoie constamment des demandes:
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 / javascrip "JSON", Succès: fonction (données) {console.log (données); </cript>data.php
<? PHP En-tête ('Content-Type: Application / JSON; charSet = UTF-8'); En-tête ("Cache-Control: Max-Age = 0"); // ne définit aucun sommeil de cache (1); $ res = array ('Success' => 'ok', 'text' => 'Je suis le texte du test'); echo json_encode ($ res);?>Cependant, un tel sondage de connexion rend les déchets de demande de réseau très évidents. Nous pouvons également laisser le serveur backend faire passer cette chose, voir l'exemple suivant
3. Ajax natif, le serveur le pousse de temps en temps (boucle backend, utilisez ob_flush () et flush () pour cracher des données)
data.php
<? php // en-tête ('contenu-type: application / json; charset = utf-8'); en-tête ("cache-control: max-age = 0"); // ne définit aucun cache $ i = 0; while ($ i <9) {$ i ++; // $ res = array ('Success' => 'ok', 'text' => 'Je suis le texte du test'); // echo json_encode ($ res); sommeil (1); $ radom = rand (1 999); Echo $ radom; echo '<br/>'; ob_flush (); // Le cache de sortie doit être utilisé avec flush (); // cache crache au navigateur}?>Frontend JS (native JS implémente Ajax et sorties lorsque l'état change) Référence: //www.vevb.com/article/82085.htm
var getXmlhttpRequest = function () {if (window.xmlhttprequest) {// Les navigateurs traditionnels fournissent un objet xmlhttpRequest renvoie nouveau xmlHttpRequest (); } else if (window.activexObject) {// La version inférieure du navigateur IE ne fournit pas d'objet XMLHTTPRequest // vous devez donc utiliser l'implémentation spécifique du navigateur IE ActiveXObject return new activeXObject ("Microsoft.xmlhttprequest"); }}; var xhr = getxmlhttprequest (); xhr.onreadystateChange = function () {console.log (xhr.readystate); if (xhr.readystate === 3 && xhr.status === 200) {// Exécuter l'opération après une acquisition réussie // Les données sont dans xhr.ResponSext Console.log (xhr.ResponSeText); }}; xhr.open ("get", "data.php", true); xhr.send ("");Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.