首頁 > web前端 > js教程 > 反向ajax是什麼?如何實現反向ajax? (精選版)

反向ajax是什麼?如何實現反向ajax? (精選版)

寻∝梦
發布: 2018-09-10 15:30:27
原創
2039 人瀏覽過

你知道反向ajax嗎?知道反向ajax是怎麼實現的嗎?都不知道,還不快來看這篇文章,介紹了關於反向ajax的詳細資訊。以下開始閱讀本篇

什麼是反向ajax

反向Ajax (Reverse Ajax) 本質上則是這樣的一種概念:能夠從伺服器端傳送數據。在一個標準的HTTP Ajax 請求中,資料是發送給伺服器端的,反向Ajax 可以某些特定的方式來模擬發出一個Ajax 請求,這樣的話,伺服器就可以盡可能快地向客戶端發送事件(低延遲通信)。

反向ajax實作方式

1. 輪詢(Polling)

輪詢其實是一種最笨的實作反向ajax的方法:用javascript在客戶端定時發送ajax請求。

setInterval(function() { 
    $.getJSON('events', function(events) { 
        console.log(events); 
    }); 
}, 2000);12345
登入後複製

為了盡快取得伺服器端事件,輪詢的間隔(兩次請求相隔的時間)必須盡可能地小。這樣做的缺點就十分明顯:如果間隔減小的話,客戶端瀏覽器就會發出更多的請求,這些請求中的許多都不會返回任何有用的數據,而這將會白白地浪費掉頻寬和處理資源。

2.PiggyBack(捎帶輪詢)

#捎帶輪詢是一種比輪詢更加聰明的做法,因為它會刪除所有非必需的請求(沒有回傳資料的那些)。

它是一種半主動的方式,也就是說還是由Browser主動發出請求,但是每次請求的回應中除了當次的回應之外,還會把上次請求以來已經發生的變化同時發給Browser。

也就是說,當次請求的更新會搭載到下一次請求的回應一併發回。這樣,在Browser的感覺就好像上一次請求又有更新了。但這種感覺取決於Browser向Server發出請求的頻率。如果,第二次請求遲遲沒有發出,那麼上一次的更新就不會拿到。

3. Comet(伺服器推)

這是一種基於 HTTP 長連線的「伺服器推」技術。

實作方式主要有以下兩種:

1)HTTP 流(HTTP Streaming)

在頁面中嵌入一個隱蔵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 長輪詢(HTTP Long Polling)

這種情況下,由客戶端向伺服器端發出請求並開啟一個連線。這個連線只有在收到伺服器端的資料之後才會關閉。伺服器端發送完資料之後,就立即關閉連線。客戶端則馬上再開啟一個新的連接,等待下一次的資料。 (想看更多就到PHP中文網AJAX開發手冊欄位中學習)

#優點:在無訊息的情況下不會頻繁的請求,耗費資源小。

缺點:伺服器hold連線會消耗資源,回傳資料順序無保證,難以管理維護。

實例:WebQQ、Hi網頁版、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中文網AJAX使用手冊欄位中學習),有問題的可以在下方留言提問。

以上是反向ajax是什麼?如何實現反向ajax? (精選版)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板