JavaScript Data Push está comprometido principalmente con el servicio push en línea de las Apps web. No necesitamos impulsar activamente los datos del servidor al área local cada vez, como un servidor, para enviar solicitudes AJAX.
Historial de la evolución del empuje de datos:
1. El protocolo HTTP es fácil de sondear, mantener un enlace o enviar solicitudes al backend continuamente a través de la parte delantera
2. Después de la actualización H5, WebSocket mejora enormemente la conveniencia de presionar datos en direcciones y direcciones unidireccionales.
3. SSE (evento de envío de servidor): una nueva forma para que los servidores presionen los datos
Comet: Tecnología de empuje del servidor basada en la conexión HTTP Long
Esta lección presenta Comet: un servidor Push Technology basada en HTTP Long Connections, que es una arquitectura de aplicaciones web. El servidor impulsará activamente los datos al programa del cliente de manera asincrónica (el bucle AJAX Solic de Dead) sin que el cliente realice solicitudes explícitas. La arquitectura del cometa es muy adecuada para aplicaciones web basadas en eventos, así como aplicaciones que requieren fuertes capacidades interactivas y en tiempo real, como el análisis del mercado de comercio de acciones, las salas de chat y los juegos en línea de la versión web.
1. Veamos primero el ejemplo más simple de los datos de JSON de solicitud de 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/javaScript"> $ .Jajax ({url: 'data.php', datatype: ",", ",", ",". function (data) {console.log (data);data.php
<? Php Header ('Content-Type: Application/JSson; Charset = UTF-8'); $ res = Array ('Success' => 'Ok', 'Text' => 'Soy el texto de la prueba'); echo json_enCode ($ res) ;?>De esta manera, el front-end puede obtener los datos de fondo y obtenerlos. Simulemos el backend empujando continuamente los datos al frontend:
Una forma es enviar continuamente las solicitudes de AJAX en el bucle frontal
2. Ajax en front-end jQuery envía constantemente solicitudes:
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", éxito: function (data) {console.log (data); </script>data.php
<? Php Header ('Content-Type: Application/JSson; Charset = UTF-8'); Header ("Cache-Control: Max-Age = 0"); // no establecer cache sleep (1); $ res = array ('suctar' => 'ok', 'text' => 'Soy el texto de la prueba'); echo json_encode ($ res);?>Sin embargo, dicha encuesta de conexión hace que la solicitud de red los desechos sea muy obvio. También podemos dejar que el servidor de backend pase por esta cosa, vea el siguiente ejemplo
3. Ajax nativo, el servidor lo empuja de vez en cuando (backend bucle, use ob_flush () y flush () para escupir datos)
data.php
<? Php // Header ('Content-Type: Application/JSson; Charset = UTF-8'); Header ("Cache-Control: Max-Age = 0"); // no establece caché $ i = 0; while ($ i <9) {$ i ++; // $ res = array ('éxito' => 'ok', 'text' => 'Soy el texto de la prueba'); // echo json_encode ($ res); dormir (1); $ radom = rand (1,999); Echo $ Radom; echo '<br/>'; ob_flush (); // Cache de salida, debe usarse con FLUSH (); // Spit de caché al navegador}?>?Frontend JS (Native JS Implement AJAX y sale cuando cambia el estado) Referencia: //www.vevb.com/article/82085.htm
var getxmlhttprequest = function () {if (window.xmlhttprequest) {// Los navegadores principales proporcionan xmlhttprequest objeto return nuevo xmlhttprequest (); } else if (window.activexObject) {// La versión inferior del navegador IE no proporciona el objeto xmlhttprequest //, por lo que debe usar la implementación específica del navegador IE ActiveXObject return New ActiveXObject ("Microsoft.xmlhttprequest"); }}; var xhr = getxmlhttprequest (); xhr.onreadyStateChange = function () {console.log (xhr.readyState); if (xhr.readyState === 3 && xhr.status === 200) {// Ejecutar la operación después de la adquisición exitosa // Los datos están en XHR.Responsetext Console.log (xhr.ResponseText); }}; xhr.open ("get", "data.php", true); xhr.send ("");Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.