最後更新:2014-12-27
來源:互聯網
上載者:User
關鍵字
伺服器
HTML5
Ajax
comet
回應通信
用戶端的示例使用的是 jQuery HTTP://www.aliyun.com/zixun/aggregation/33906.html">JavaScript 庫。 在這首篇文章中,我們探索不同的反向 Ajax 技術,使用可下載的例子來學習使用了流 (streaming) 方法和長輪詢 (long polling) 方法的 Comet。
Web 開發在過去的幾年中有了很大的進展,我們已經遠超了把靜態網頁連結在一起的做法,這種做法會引起瀏覽器的刷新,並且要等待頁面的載入。 現在需要的是能夠通過 Web 來訪問完全動態的應用。 這些應用通常需要盡可能的快,提供近乎即時的元件。 在這個分為 5 部分的新系列中,我們學習如何使用反向 Ajax (Reverse Ajax) 技術來開發事件驅動的 Web 應用。
在這第一篇文章中,我們要瞭解反向 Ajax、輪詢 (polling)、流 (streaming)、Comet 和長輪詢 (long polling)。 學習如何實現不同的反向 Ajax 通信技術,並探討每種方法的優點和缺點。
Ajax、反向 Ajax 和 WebSockets
非同步 JavaScript 和 XML (Ajax),一種可通過 JavaScript 來訪問的瀏覽器功能特性,其允許腳本向幕後的網站發送一個 HTTP 要求而又無需重新載入頁面。 Ajax 的出現已經超過了十年,儘管其名字中包含了 XML,但您幾乎可以在 Ajax 請求中傳送任何的東西。 最常使用的資料是 JSON,它與 JavaScript 語法非常接近且消耗更少的頻寬。 清單 1清單 1 給出了這樣的一個例子,Ajax 請求通過某個地方的郵遞區號來檢索該地的名稱。
清單 1. 清單 1 Ajax 請求示例
var url = 'HTTP://www.geonames.org/postalCodeLookupJSON?postalcode=' + $('#postalCode').val() + '&country=' + $('# country').val() + '&callback=?'; $.getJSON(url, function(data) { $('#placeName').val(data.postalcodes[0].placeName); });
反向 Ajax (Reverse Ajax) 本質上則是這樣的一種概念:能夠從伺服器端向用戶端發送資料。 在一個標準的 HTTP Ajax 請求中,資料是發送給伺服器端的,反向 Ajax 可以某些特定的方式來類比發出一個 Ajax 請求,這些方式本文都會論及,這樣的話,伺服器就可以盡可能快地向用戶端發送事件(低延遲通信)。
WebSocket 技術來自 HTML5,是一種最近才出現的技術,許多瀏覽器已經支援它(Firefox、Google Chrome、Safari 等等)。 WebSocket 啟用雙向的、全雙工的通信通道,其通過某種被稱為 WebSocket 握手的 HTTP 要求來打開連接,並用到了一些特殊的報頭。 連接保持在活動狀態,您可以用 JavaScript 來寫和接收資料,就像是正在用一個原始的 TCP 套介面一樣。 WebSocket 會在這一文章系列的第二部分中談及。
反向 Ajax 技術
反向 Ajax 的目的是讓伺服器將資訊推送到用戶端。 Ajax 請求預設情況下是無狀態的,且只能從用戶端向伺服器端發出請求。 您可以通過使用技術類比伺服器端和用戶端之間的回應式通信來繞過這一限制。
HTTP 輪詢和 JSONP 輪詢
輪詢 (Polling) 涉及了從用戶端向伺服器端發出請求以獲取一些資料,這顯然就是一個純粹的 Ajax HTTP 要求。 為了儘快地獲得伺服器端事件,輪詢的間隔(兩次請求相隔的時間)必須盡可能地小。 但有這樣的一個缺點存在:如果間隔減小的話,用戶端瀏覽器就會發出更多的請求,這些請求中的許多都不會返回任何有用的資料,而這將會白白地浪費掉頻寬和處理資源。
圖 1 圖 1 中的時間表說明了用戶端發出了某些輪詢請求,但沒有資訊返回這種情況,用戶端必須要等到下一個輪詢來獲取兩個伺服器端接收到的事件。
圖 1. 使用 HTTP 輪詢的反向 Ajax
JSONP 輪詢基本上與 HTTP 輪詢一樣。 不同之處在于使用 JSONP 您可以發送跨域請求(請求不屬於您所在的域)。 清單1清單 1 使用了 JSONP 來通過郵遞區號獲取地名。 JSONP 請求通常可通過它的回檔參數和返回內容識別出來,這些內容是可執行檔 JavaScript 代碼。