ホームページ > ウェブフロントエンド > jsチュートリアル > 逆アヤックスとは何ですか?逆Ajaxを実装するにはどうすればよいですか? (選択したバージョン)

逆アヤックスとは何ですか?逆Ajaxを実装するにはどうすればよいですか? (選択したバージョン)

寻∝梦
リリース: 2018-09-10 15:30:27
オリジナル
2056 人が閲覧しました

ajaxをご存知ですか?逆ajaxがどのように実装されているかご存知ですか?分からないので、リバースAjaxについて詳しく紹介しているこの記事を参考にしてみてはいかがでしょうか。以下からこの記事を読み始めてください

reverse ajax とは

Reverse Ajax (リバース Ajax) は本質的に、サーバーからクライアントにデータを送信できるという概念です。標準の HTTP Ajax リクエストでは、リバース Ajax はいくつかの特定の方法で Ajax リクエストの作成をシミュレートできるため、サーバーはできるだけ早くイベントをクライアントに送信できます (低遅延通信)。

リバース ajax の実装方法

1. ポーリング

ポーリングは、実際にはリバース ajax を実装する最も愚かな方法です。JavaScript を使用して、クライアントで ajax リクエストを定期的に送信します。

setInterval(function() { 
    $.getJSON('events', function(events) { 
        console.log(events); 
    }); 
}, 2000);12345
ログイン後にコピー

サーバー側のイベントをできるだけ早く取得するには、ポーリング間隔 (2 つのリクエストの間の時間) をできるだけ短くする必要があります。この欠点は明らかです。間隔が短縮されると、クライアント ブラウザはより多くのリクエストを発行しますが、その多くは有用なデータを返さないため、帯域幅とプロセス リソースが無駄になります。

2. PiggyBack (PiggyBack)

PiggyBack は、重要でないリクエスト (データを返さないリクエスト) をすべて削除するため、ポーリングよりも賢いアプローチです。

これはセミアクティブなメソッドです。つまり、ブラウザは引き続きアクティブにリクエストを発行しますが、各リクエストの応答では、現在の応答に加えて、最後のリクエスト以降に発生した変更も送信されます。ブラウザ。

言い換えると、リクエストされたアップデートは次のリクエストの応答に組み込まれて送り返されます。このようにして、ブラウザは最後のリクエストが更新されたかのように感じます。ただし、この感覚はブラウザがサーバーにリクエストを行う頻度によって異なります。 2 番目のリクエストが送信されない場合、最後の更新は取得されません。

3. Comet (サーバープッシュ)

これは、HTTP ロング接続に基づく「サーバープッシュ」技術です。

主な実装方法は 2 つあります:

1) HTTP ストリーミング

ページに非表示の iframe を埋め込み、この非表示の iframe の src 属性を長い接続リクエストまたはサーバーの xhr リクエストに設定します。クライアントに継続的にデータを入力します。

利点: メッセージはすぐに届き、無駄なリクエストは送信されません。管理は比較的便利です。

短所: サーバーによる長時間の接続の維持により、オーバーヘッドが増加します。

例: Gmail チャット

<script type="text/javascript">
    $(function () {
        (function iframePolling() {
            var url = "${pageContext.request.contextPath}/communication/user/ajax.mvc?timed=" + new Date().getTime();            var $iframe = $(&#39;<iframe id="frame" name="polling" style="display: none;" src="&#39; + url + &#39;"></iframe>&#39;);
            $("body").append($iframe);
            $iframe.load(function () {
                $("#logs").append("[data: " + $($iframe.get(0).contentDocument).find("body").text() + " ]<br/>");
                $iframe.remove();                // 递归
                iframePolling();
            });
        })();    
    });</script>
ログイン後にコピー

2) HTTP ロングポーリング

この場合、クライアントはサーバーにリクエストを作成し、接続を開きます。この接続は、サーバーからデータを受信した後にのみ閉じられます。サーバーはデータを送信した後、すぐに接続を閉じます。クライアントはすぐに新しい接続を開き、次のデータを待ちます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアル のコラムにアクセスして学習してください)

利点: メッセージがない場合は頻繁にリクエストが発生することがなくなり、リソースの消費が少なくなります。

短所: サーバー保留接続はリソースを消費し、返されるデータの順序は保証されず、管理と維持が困難です。

例: WebQQ、こんにちは Web バージョン、Facebook IM。

<script type="text/javascript">
            $(function () {
                (function longPolling() {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/communication/user/ajax.mvc",
                        data: {"timed": new Date().getTime()},
                        dataType: "text",
                        timeout: 5000,
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");                            if (textStatus == "timeout") { // 请求超时
                                    longPolling(); // 递归调用
                                // 其他错误,如网络错误等
                                } else { 
                                    longPolling();
                                }
                            },
                        success: function (data, textStatus) {
                            $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>");                            if (textStatus == "success") { // 请求成功
                                longPolling();
                            }
                        }
                    });
                })();
            });        </script>
ログイン後にコピー

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX ユーザー マニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上が逆アヤックスとは何ですか?逆Ajaxを実装するにはどうすればよいですか? (選択したバージョン)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート