英文原文：Reverse Ajax, Part 1: Introduction to Comet

在過去的幾年中，web開發已經發生了很大的變化。現如今，我們期望的是能夠通過web快速、動態地訪問應用。在這一新的文章系列中，我們學習如何使用反向Ajax（Reverse Ajax）技術來開發事件驅動的web應用，以此來實現更好的用戶體驗。客戶端的例子使用的是JQuery JavaScript庫，在這首篇文章中，我們探索不同的反向Ajax技術，使用可下載的例子來學習使用了流（streaming）方法和長輪詢（long polling）方法的Comet。

　　前言

　　web開發在過去的幾年中有了很大的進展，我們已經遠超了把靜態網頁鏈接在一起的做法，這種做法會引起瀏覽器的刷新，并且要等待頁面的加載。現在需要的是能夠通過web來訪問的完全動態的應用，這些應用通常需要盡可能的快，提供近乎實時的組件。在這一新的由五部分組成的文章系列中，我們學習如何使用反向Ajax（Reverse Ajax）技術來開發事件驅動的web應用。

　　在這第一篇文章中，我們要了解反向Ajax、輪詢（polling）、流（streaming）、Comet和長輪詢（long polling），學習如何實現不同的反向Ajax通信技術，并探討每種方法的優點和缺點。你可以下載本文中例子的相應源代碼。

　　Ajax、反向Ajax和WebSocket

　　異步的JavaScript和XML（Asynchronous JavaScript and XML，Ajax），一種可通過JavaScript來訪問的瀏覽器功能特性，其允許腳本向幕后的網站發送一個HTTP請求而又無需重新加載頁面。Ajax的出現已經超過了十年，盡管其名字中包含了XML，但你幾乎可以在Ajax請求中傳送任何的東西，最常用的數據是JSON，其與JavaScript語法很接近，且消耗更少帶寬。清單1給出了這樣的一個例子，Ajax請求通過某個地方的郵政編碼來檢索該地的名稱。

　　清單1. Ajax請求舉例

　　在本文可下載的源代碼中，你可在listing1.html中看到這一例子的作用。

　　反向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. 使用HTTP輪詢的反向Ajax

　　JSONP輪詢基本上與HTTP輪詢一樣，不同之處則是JSONP可以發出跨域請求（不是在你的域內的請求）。清單1使用JSONP來通過郵政編碼獲取地名，JSONP請求通常可通過它的回調參數和返回內容識別出來，這些內容是可執行的JavaScript代碼。

　　要在JavaScript中實現輪詢的話，你可以使用setInterval來定期地發出Ajax請求，如清單2所示：

　　清單2. JavaScript輪詢

　　文章源代碼中的輪詢演示給出了輪詢方法所消耗的帶寬，間隔很小，但可以看到有些請求并未返回事件，清單3給出了這一輪詢示例的輸出。

　　清單3. 輪詢演示例子的輸出

　　用JavaScript實現的輪詢的優點和缺點：

　　1. 優點：很容易實現，不需要任何服務器端的特定功能，且在所有的瀏覽器上都能工作。

　　2. 缺點：這種方法很少被用到，因為它是完全不具伸縮性的。試想一下，在100個客戶端每個都發出2秒鐘的輪詢請求的情況下，所損失的帶寬和資源數量，在這種情況下30%的請求沒有返回數據。

　　Piggyback

　　捎帶輪詢（piggyback polling）是一種比輪詢更加聰明的做法，因為它會刪除掉所有非必需的請求（沒有返回數據的那些）。不存在時間間隔，客戶端在需要的時候向服務器端發送請求。不同之處在于響應的那部分上，響應被分成兩個部分：對請求數據的響應和對服務器事件的響應，如果任何一部分有發生的話。圖2給出了一個例子。

　　圖2. 使用了piggyback輪詢的反向Ajax

　　在實現piggyback技術時，通常針對服務器端的所有Ajax請求可能會返回一個混合的響應，文章的下載中有一個實現示例，如下面的清單4所示。

　　清單4. piggyback代碼示例

　　清單5給出了一些piggyback輸出。

　　清單5. piggyback輸出示例

　　你可以看到表單驗證的結果和附加到響應上的事件，同樣，這種方法也有著一些優點和缺點：

　　1. 優點：沒有不返回數據的請求，因為客戶端對何時發送請求做了控制，對資源的消耗較少。該方法也是可用在所有的瀏覽器上，不需要服務器端的特殊功能。

　　2. 缺點：當累積在服務器端的事件需要傳送給客戶端時，你卻一點都不知道，因為這需要一個客戶端行為來請求它們。

　　Comet

　　使用了輪詢或是捎帶的反向Ajax非常受限：其不具伸縮性，不提供低延遲通信（只要事件一到達服務器端，它們就以盡可能快的速度到達瀏覽器端）。Comet是一個web應用模型，在該模型中，請求被發送到服務器端并保持一個很長的存活期，直到超時或是有服務器端事件發生。在該請求完成后，另一個長生存期的Ajax請求就被送去等待另一個服務器端事件。使用Comet的話，web服務器就可以在無需顯式請求的情況下向客戶端發送數據。

　　Comet的一大優點是，每個客戶端始終都有一個向服務器端打開的通信鏈路。服務器端可以通過在事件到來時立即提交（完成）響應來把事件推給客戶端，或者它甚至可以累積再連續發送。因為請求長時間保持打開的狀態，故服務器端需要特別的功能來處理所有的這些長生存期請求。圖3給出了一個例子。（這一文章系列的第2部分會更加詳細地解釋服務器端的約束條件）。

　　圖3. 使用Comet的反向Ajax

　　Comet的實現可以分成兩類：使用流（streaming）的那些和使用長輪詢（long polling）的那些。

　　使用HTTP流的Comet

　　在流（streaming）模式中，有一個持久連接會被打開。只會存在一個長生存期請求（圖3中的#1），因為每個到達服務器端的事件都會通過這同一連接來發送。因此，客戶端需要有一種方法來把通過這同一連接發送過來的不同響應分隔開來。從技術上來講，兩種常見的流技術包括Forever Iframe（隱藏的IFrame），或是被用來在JavaScript中創建Ajax請求的XMLHttpRequest對象的多部分（multi-part）特性。

　　Forever Iframe

　　Forever Iframe（永存的Iframe）技術涉及了一個置于頁面中的隱藏Iframe標簽，該標簽的src屬性指向返回服務器端事件的servlet路徑。每次在事件到達時，servlet寫入并刷新一個新的script標簽，該標簽內部帶有JavaScript代碼，iframe的內容被附加上這一script標簽，標簽中的內容就會得到執行。

　　1. 優點：實現簡單，在所有支持iframe的瀏覽器上都可用。

　　2. 缺點： 沒有方法可用來實現可靠的錯誤處理或是跟蹤連接的狀態，因為所有的連接和數據都是由瀏覽器通過HTML標簽來處理的，因此你沒有辦法知道連接何時在哪一端已被斷開了。

　　Multi-part XMLHttpRequest

　　第二種技術，更可靠一些，是XMLHttpRequest對象上使用某些瀏覽器（比如說Firefox）支持的multi-part標志。Ajax請求被發送給服務器端并保持打開狀態，每次有事件到來時，一個多部分的響應就會通過這同一連接來寫入，清單6給出了一個例子。

　　清單6. 設置Multi-part XMLHttpRequest的JavaScript代碼示例

　　在服務器端，事情要稍加復雜一些。首先你必須要設置多部分請求，然后掛起連接。清單7展示了如何掛起一個HTTP流請求。（這一系列的第3部分會更加詳細地談及這些API。）

　　清單7. 使用Servlet 3 API來在servlet中掛起一個HTTP流請求

　　現在，每次有事件發生時你都可以遍歷所有的掛起連接并向它們寫入數據，如清單8所示：

　　清單8. 使用Servlet 3 API來向掛起的多部分請求發送事件

　　本文可下載文件的Comet-straming文件夾中的部分說明了HTTP流，在運行例子并打開主頁時，你會看到只要事件一到達服務器端，雖然不同步但它們幾乎立刻會出現在頁面上。而且，如果打開Firebug控制臺的話，你就能看到只有一個Ajax請求是打開的。如果再往下看一些，你會看到JSON響應被附在Response選項卡中，如圖4所示：

　　圖4. HTTP流請求的FireBug視圖

　　照例，做法存在著一些優點和缺點：

　　1. 優點：只打開了一個持久連接，這就是節省了大部分帶寬使用率的Comet技術。

　　2. 缺點：并非所有的瀏覽器都支持multi-part標志。某些被廣泛使用的庫，比如說用Java實現的CometD，被報告在緩沖方面有問題。例如，一些數據塊（多個部分）可能被緩沖，然后只有在連接完成或是緩沖區已滿時才被發送，而這有可能會帶來比預期要高的延遲。

　　使用HTTP長輪詢的Comet

　　長輪詢（long polling）模式涉及了打開連接的技術。連接由服務器端保持著打開的狀態，只要一有事件發生，響應就會被提交，然后連接關閉。接下來。一個新的長輪詢連接就會被正在等待新事件到達的客戶端重新打開。

　　你可以使用script標簽或是單純的XMLHttpRequest對象來實現HTTP長輪詢。

　　script標簽

　　正如iframe一樣，其目標是把script標簽附加到頁面上以讓腳本執行。服務器端則會：掛起連接直到有事件發生，接著把腳本內容發送回瀏覽器，然后重新打開另一個script標簽來獲取下一個事件。

　　1. 優點：因為是基于HTML標簽的，所有這一技術非常容易實現，且可跨域工作（缺省情況下，XMLHttpRequest不允許向其他域或是子域發送請求）。

　　2. 缺點：類似于iframe技術，錯誤處理缺失，你不能獲得連接的狀態或是有干涉連接的能力。

　　XMLHttpRequest長輪詢

　　第二種，也是一種推薦的實現Comet的做法是打開一個到服務器端的Ajax請求然后等待響應。服務器端需要一些特定的功能來允許請求被掛起，只要一有事件發生，服務器端就會在掛起的請求中送回響應并關閉該請求，完全就像是你關閉了servlet響應的輸出流。然后客戶端就會使用這一響應并打開一個新的到服務器端的長生存期的Ajax請求，如清單9所示：

　　清單9. 設置長輪詢請求的JavaScript代碼示例

　　在后端，代碼也是使用Servlet 3 API來掛起請求，正如HTTP流的做法一樣，但你不需要所有的多部分處理代碼，清單10給出了一個例子。

　　清單10. 掛起一個長輪詢Ajax請求

　　在接收到事件時，只是取出所有的掛起請求并完成它們，如清單11所示：

　　清單11. 在有事件發生時完成長輪詢Ajax請求

　　在附帶的下載源文件中，comet-long-polling文件夾包含了一個長輪詢示例web應用，你可以使用 mvn jetty:run 命令來運行它。

　　1. 優點：客戶端很容易實現良好的錯誤處理系統和超時管理。這一可靠的技術還允許在與服務器端的連接之間有一個往返，即使連接是非持久的（當你的應用有許多的客戶端時，這是一件好事）。它可用在所有的瀏覽器上；你只需要確保所用的XMLHttpRequest對象發送到的簡單的Ajax請求就可以了。

　　2. 缺點：相比于其他技術來說，不存在什么重要的缺點，像所有我們已經討論過的技術一樣，該方法依然依賴于無狀態的HTTP連接，其要求服務器端有特殊的功能來臨時掛起連接。

　　建議

　　因為所有現代的瀏覽器都支持跨域資源共享（Cross-Origin Resource Share，CORS）規范，該規范允許XHR執行跨域請求，因此基于腳本的和基于iframe的技術已成為了一種過時的需要。

　　把Comet做為反向Ajax的實現和使用的最好方式是通過XMLHttpRequest對象，該做法提供了一個真正的連接句柄和錯誤處理。考慮到不是所有的瀏覽器都支持multi-part標志，且多部分流可能會遇到緩沖問題，因此建議你選擇經由HTTP長輪詢使用XMLHttpRequest對象（在服務器端掛起的一個簡單的Ajax請求）的Comet模式，所有支持Ajax的瀏覽器也都支持該種做法。

　　結論

　　本文提供的是反向Ajax技術的一個入門級介紹，文章探索了實現反向Ajax通信的不同方法，并說明了每種實現的優勢和弊端。你的具體情況和應用需求將會影響到你對最合適方法的選擇。不過一般來說，如果你想要在低延遲通信、超時和錯誤檢測、簡易性，以及所有瀏覽器和平臺的良好支持這幾方面有一個最好的折中的話，那就選擇使用了Ajax長輪詢請求的Comet。

　　請繼續閱讀這一系列的第2部分：該部分將會探討第三種反向Ajax技術：WebSocket。盡管還不是所有的瀏覽器都支持該技術，但WebSocket肯定是一種非常好的反向Ajax通信媒介，WebSocket消除了所有與HTTP連接的無狀態特性相關的限制。第2部分還會談及由Comet和WebSocket技術帶來的服務器端約束。

　　代碼下載

　　reverse_ajaxpt1_source.zip

　　參考資料

　　學習資料

　　1. 在維基百科上了解這些內容：

　　1.1 Ajax
　　1.2 Reverse Ajax
　　1.3 Comet
　　1.4 WebSockets

　　2. “Exploring Reverse AJAX”（Google Maps .Net Control博客，2006年8月）：獲得一些關于反向Ajax技術的介紹說明。

　　3. “Cross-domain communications with JSONP, Part 1: Combine JSONP and jQuery to quickly build powerful mashups”（developerWorks, February 2009）：了解如何把不起眼的跨域調用技術（JSONP）和一個靈活的JavaScript庫（JQuery）結合在一起，以令人驚訝的速度構建出一些功能強大的聚合應用。

　　4. “Cross-Origin Resource Sharing (CORS)”規范（W3C, July 2010）：了解更多關于這一機制的內容，該機制允許XHR執行跨域請求。

　　5. “Build Ajax applications with Ext JS”（developerWorks, July 2008）：對大大增強了JavaScript開發的這一框架有一個大概的了解。

　　6. “Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax”（developerWorks, January 2006）：學習如何使用Ajax和XMLHttpRequest對象來創建一種永不會讓用戶等待服務器響應的請求/響應模型。

　　7. “Create Ajax applications for the mobile Web”（developerWorks, March 2010）：了解如何使用Ajax構建跨瀏覽器的智能手機Web應用。

　　8. “Improve the performance of Web 2.0 applications“（developerWorks, December 2009）：探討不同的瀏覽器端緩存機制。

　　9. “Introducing JSON”（JSON.org）：獲得對JSON語法的一個入門介紹。

　　10. developerWorks Web development zone：獲得各種談論基于Web的解決方案的文章。

　　11. developerWorks podcasts：收聽各種與軟件開發者進行的有趣的訪談和討論。

　　12. developerWorks technical events and webcasts：隨時關注developerWorks的技術事件和webcast的進展。

　　獲取產品和技術

　　1. 獲取ExtJS，這是一個用來構建富互聯網應用的跨瀏覽器JavaScript庫。

　　2. XAMPP為Apache、PHP、MySQL和其他產品提供了一種簡易的安裝。

　　3. 免費試用IBM軟件，下載使用版，登錄在線試用，在沙箱環境中使用產品，或是通過云來訪問，有超過100種IBM產品試用版選擇。

　　討論

　　1. 現在就創建你的developerWorks個人資料，并設置一個關于Reverse Ajax的觀看列表。與developerWorks社區建立聯系并保持聯系。

　　2. 找到其他在web開發方面感興趣的developerWorks成員。

　　3. 分享你的知識：加入一個關注web專題的developerWorks組。

　　4. Roland Barcia在他的博客中談論Web 2.0和中間件。

　　5. 關注developerWork成員的shared bookmarks on web topics。

　　6. 快速獲得答案：訪問Web 2.0 Apps論壇。

　　7. 快速獲得答案：訪問Ajax論壇。

　　關于作者

　　Mathieu Carbou是Ovea的一位提供服務和開發解決方案的Java web架構師和顧問。他是幾個開源項目的提交者和領導者，也是Montreal的Java User Group的一位演講者和領導者。Mathieu有著很強的代碼設計和最佳實踐背景，他是一個從客戶端到后端的事件驅動的web開發方面的專家。他的工作重點是在高度可伸縮的web應用中提供事件驅動的和消息式的解決方案。你可以看一看他的博客。

　　相關博文

　　用 ASP.NET MVC 實現基于 Multipart XMLHttpRequest 的 Comet

　　用 ASP.NET MVC 實現基于 XMLHttpRequest long polling（長輪詢） 的 Comet