JavaScript Data Push ist hauptsächlich für den Online -Push -Service von WebApps verpflichtet. Wir müssen nicht jedes Mal, wie bei einem Server, die Daten vom Server aktiv in den lokalen Bereich schieben, um AJAX -Anforderungen zu senden.
Verschingung der Datenverschiebung Evolution:
1. Das HTTP -Protokoll ist einfach zu befragen, einen Link zu führen oder Anfragen kontinuierlich an das Backend durch das vordere Ende zu senden
2. Nach dem H5 -Update verbessert WebSocket die Bequemlichkeit, Daten sowohl in Richtungen als auch in unidirektionale Richtungen zu schieben.
3.. SSE (Serversend-Ereignis): Eine neue Möglichkeit für Server, Daten zu pushen
Comet: Server -Push -Technologie basierend auf HTTP Long Connection
In dieser Lektion wird Comet vorgestellt: eine Server -Push -Technologie basierend auf HTTP Long Connections, eine Webanwendungsarchitektur. Der Server wird Daten aktiv auf asynchrones (AJAX Request Dead Loop) an das Client -Programm übertragen, ohne dass der Client explizite Anfragen stellt. Die Comet-Architektur eignet sich sehr für ereignisgesteuerte Webanwendungen sowie Anwendungen, die starke interaktive und echtzeit-Funktionen erfordern, wie z. B. Analyse des Aktienhandels, Chat-Räume und Webversion Online-Spiele.
1. Schauen wir uns zunächst das einfachste Beispiel für AJAX -Anforderungen an JSON -Daten an:
index.html
<meta charset = "utf-8"> <script type = "text/javascript" src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min Funktion (Daten) {console.log (Daten);}}); </script>Data.php
<? Php Header ('Content-Typ: application/json; charset = utf-8');Auf diese Weise kann das Front-End die Back-End-Daten erhalten und diese ausgeben. Lassen Sie uns das Backend -Sendern kontinuierlich an die Frontend -Schiebung simulieren:
Eine Möglichkeit besteht
2. Ajax in Front-End JQuery sendet ständig 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 conn () {) {$. "JSON", Erfolg: Funktion (Daten) {console.log (Daten); </script>Data.php
<? PHP-Header ('Content-Typ: Application/JSON; CharSet = UTF-8'); Header ("Cache-Control: max-al-age = 0"); // keinen Cache -Schlaf festlegen (1); $ res = array ('Erfolg' => 'OK', 'text' => 'Ich bin der Text des Tests');Eine solche Verbindungsabfragung macht jedoch die Verschwendung von Netzwerkenanforderungen sehr offensichtlich. Wir können auch den Backend -Server durch dieses Ding durchlaufen lassen und das folgende Beispiel sehen
3. Native Ajax, der Server drückt ihn einmal von Zeit zu Zeit (Backend Loop, verwenden Sie OB_FLUSH () und Flush (), um Daten auszuspucken).
Data.php
<? php // header ('content-type: application/json; charSet = utf-8'); Header ("Cache-Control: max-age = 0"); // kein Cache $ i = 0; während ($ i <9) {$ i ++; // $ res = array ('Erfolg' => 'ok', 'text' => 'Ich bin der Text des Tests'); // echo json_encode ($ res); Schlaf (1); $ radom = rand (1.999); echo $ radom; echo '<br/>'; ob_flush (); // Ausgangscache, muss mit Flush () verwendet werden; // Cache Spucke zum Browser}?>Frontend JS (native JS implementieren AJAX und Ausgänge, wenn sich der Zustand ändert) Referenz: //www.vevb.com/article/82085.htm
var getXmlHttpRequest = function () {if (window.xmlhttpRequest) {// Mainstream -Browser liefern xmlhttpRequest -Objekt zurück. } else if (window.activeXObject) {// Die untere Version des IE -Browsers liefert nicht xmlHttpRequest -Objekt // Sie müssen also die spezifische Implementierung von 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) {// Die Operation nach erfolgreicher Erfassung ausführen }}; xhr.open ("get", "data.php", true); xhr.send ("");Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.