JavaScriptデータプッシュは、主にWebAppsのオンラインプッシュサービスにコミットしています。 Ajaxリクエストを送信するために、サーバーのように毎回サーバーからローカルエリアにデータを積極的にプッシュする必要はありません。
データプッシュ進化の歴史:
1. HTTPプロトコルは、リンクを維持する、またはフロントエンドを介してバックエンドに継続的にリクエストを送信するのが簡単です
2。H5の更新後、WebSocketは両方向と一方向の方向にデータをプッシュする利便性を大幅に改善します。
3。SSE(サーバーセンドイベント):サーバーがデータをプッシュする新しい方法
彗星:HTTP Long Connectionに基づいたサーバープッシュテクノロジー
このレッスンでは、Comet:WebアプリケーションアーキテクチャであるHTTP Long Connectionsに基づいたサーバープッシュテクノロジーを紹介します。サーバーは、クライアントが明示的なリクエストを行うことなく、非同期的にデータをクライアントプログラムに積極的にプッシュします(AJAX要求デッドループ)。 Cometアーキテクチャは、イベント主導のWebアプリケーションや、株式取引市場分析、チャットルーム、Webバージョンのオンラインゲームなど、強力なインタラクティブでリアルタイムの機能を必要とするアプリケーションに非常に適しています。
1.まず、AJAXリクエスト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"> function(data){console.log(data)}; </script>data.php
<?php header( 'content-type:application/json; charset = utf-8'); $ res = array( 'success' => 'ok'、 'text' => '私はテストのテキスト'); echo json_encode($ res);?>>>
このようにして、フロントエンドはバックエンドデータを取得して出力できます。バックエンドをシミュレーションして、データを連続的にフロントエンドにプッシュしましょう。
1つの方法は、フロントエンドループでajaxリクエストを継続的に送信することです
2。フロントエンドのjQueryの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"> function conn 「json」、成功(data){console.log()}};} </script>data.php
<?PHP Header( 'Content-Type:Application/json; charset = utf-8'); header( "cache-control:max-age = 0"); //キャッシュスリープなし(1); $ res = array( 'success' => 'ok'、 'text' => '私はテストのテキスト'); echo json_encode($ res);??>
ただし、このような接続ポーリングにより、ネットワークリクエストは非常に明白になります。また、バックエンドサーバーをこのことを循環させることもできます。次の例を参照してください
3.ネイティブAjax、サーバーはたまにそれをプッシュすることがあります(バックエンドループ、ob_flush()とflush()を使用してデータを吐き出します)
data.php
<?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);睡眠(1); $ radom = rand(1,999);エコー$ radom; echo '<br/>'; ob_flush(); //出力キャッシュは、flush()で使用する必要があります。 //ブラウザにスピットします}?>FrontEnd JS(ネイティブJSがAJAXを実装し、状態が変更されたときに出力を実装)参照://www.vevb.com/article/82085.htm
var getXmlhttprequest = function(){if(window.xmlhttprequest){//主流ブラウザーはxmlhttprequestオブジェクトを提供しますnew xmlhttprequest(); } else if(window.activexobject){// IEブラウザーの下位バージョンはxmlhttprequestオブジェクトを提供していません。 }}; var xhr = getxmlhttprequest(); xhr.onedystatechange = 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( "");上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。