【正文】 用 圖 傳統(tǒng) Web的同步交互過程 (上 )和 Ajax的異步交互過程的比較 (下 ). 通常要產(chǎn)生一個(gè) HTTP請(qǐng)求的用戶動(dòng)作現(xiàn)在通過 JavaScript調(diào)用 Ajax引擎來代替 。 任何用戶動(dòng)作的響應(yīng)不再要求直接傳到服務(wù)器 。 例如簡(jiǎn)單的數(shù)據(jù)校驗(yàn)，內(nèi)存中的數(shù)據(jù)編輯，甚至一些頁面導(dǎo)航 ， Ajax引擎自己就可以處理它 。 如果引擎需要從服務(wù)器取數(shù)據(jù)來響應(yīng)用戶動(dòng)作 ， 假設(shè)它提交需要處理的數(shù)據(jù)，載入另外的 界面代碼，或者接收新的數(shù)據(jù) ， 引擎讓這些工作異步進(jìn)行，通常使用 XML或者 JSON， 不用再 耽誤 用戶界面的交互 ，從而避免了 用戶 只能呆呆的對(duì)著空白 頁面 的現(xiàn)象 。 北京航 空航天大學(xué)畢業(yè)設(shè)計(jì) (論文 ) 第 7 頁 7 2． 1． 3 Ajax 的優(yōu)點(diǎn)和缺點(diǎn) 使用 Ajax的最大優(yōu)點(diǎn)，就是能在不更新整個(gè)頁面的前提下維護(hù)數(shù)據(jù) ，并只對(duì)需要更新的數(shù)據(jù)進(jìn)行更新 。這使得 Web應(yīng)用程序更為迅捷地回應(yīng)用戶動(dòng)作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變過的信息。 Ajax不需要任何瀏覽器插件 ， 只 需要用戶允許 JavaScript在瀏覽器上執(zhí)行。就像DHTML應(yīng)用程序那樣， Ajax應(yīng)用程序必須在眾多不同的瀏 覽器和平臺(tái)上經(jīng)過嚴(yán)格的測(cè)試。隨著 Ajax的成熟，一些簡(jiǎn)化 Ajax使用方法的程序庫也相繼問世。同樣，也出現(xiàn)了 一些 輔助程序設(shè)計(jì)的技術(shù)，為那些不支持 JavaScript的用戶提供替代功能。 對(duì)應(yīng)用 Ajax最主要的批評(píng)就是，它可能破壞瀏覽器后退按鈕的正常行為。在動(dòng)態(tài)更新頁面的情況下，用戶無法回到前一個(gè)頁面狀態(tài)，這是因?yàn)闉g覽器僅能記下歷史記錄中的靜態(tài)頁面。一個(gè)被完整讀入的頁面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過的頁面之間的差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在 Ajax應(yīng)用程序中，卻無法這樣做。 不過開發(fā)者已想出了種種辦法來解決這個(gè)問題，當(dāng)中大多數(shù)都是在用戶單擊后退按鈕訪問歷史記錄時(shí)，通過建立或使用一個(gè)隱藏的 IFRAME來重現(xiàn)頁面上的變更。（例如，當(dāng)用戶在 Google Maps中單擊后退時(shí)，它在一個(gè)隱藏的 IFRAME中進(jìn)行搜索，然后將搜索結(jié)果反映到 Ajax元素上，以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時(shí)的狀態(tài)。） 一個(gè)相關(guān)的觀點(diǎn)認(rèn)為，使用動(dòng)態(tài)頁面更新使得用戶難于將某個(gè)特定的狀態(tài)保存到收藏夾中。 其實(shí) 該問題的解決方案也已出現(xiàn)，大部分都使用 URL片斷標(biāo)識(shí)符（通常被稱為錨點(diǎn)，即 URL中 后面的部分）來保持跟蹤，允許用戶 回到指定的某個(gè)應(yīng)用程序狀態(tài)。（許多瀏覽器允許 JavaScript動(dòng)態(tài)更新錨點(diǎn)，這使得 Ajax應(yīng)用程序能夠在更新顯示內(nèi)容的同時(shí)更新錨點(diǎn)。）這些解決方案也同時(shí)解決了許多關(guān)于不支持后退按鈕的爭(zhēng)論。 進(jìn)行 Ajax開發(fā)時(shí)，網(wǎng)絡(luò)延遲 —— 即用戶發(fā)出請(qǐng)求到服務(wù)器發(fā)出響應(yīng)之間的間隔 ——需要慎重考慮。不給予用戶明確的回應(yīng) ，沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù) ，或者對(duì) XMLHttpRequest的不恰當(dāng)處理，都會(huì)使用戶感到延遲，這是用戶不欲看到的，也是他們無法理解的。通常的解決方案是，使用一個(gè)可視化的組件來告訴用戶系統(tǒng)正在進(jìn)行后臺(tái)操作并且正在 讀取數(shù)據(jù)和內(nèi)容。 一些手持設(shè)備（如手機(jī)、 PDA等）現(xiàn)在還不能很好的支持 Ajax； 用 JavaScript作的 Ajax引擎， JavaScript的兼容性和 DeBug都是讓人頭痛的事 ； 北京航 空航天大學(xué)畢業(yè)設(shè)計(jì) (論文 ) 第 8 頁 8 Ajax的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾 ―― 用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過的 。 2． 2 GWT（ Google Web Toolkit） 簡(jiǎn)介 2． 2． 1 什么是 GWT Google Web Toolkit是 Google公司在 2020年 5月發(fā)布的一款有效 的 網(wǎng)絡(luò)程序開發(fā)框架。 GWT與 其他開發(fā)框架的不同就在于編程人員在客戶 端所編寫的是 Java代碼 ， 而并非JavaScript代碼。 Java代碼被認(rèn)為是一種可以信賴的編程語言，而 GWT所帶來的這種不同正是對(duì)于傳統(tǒng)意義上的 JavaScript編程的一個(gè)里程碑似的 改變。這也就意味著除了可以得到很多作為 Java編程語言所帶來的許多優(yōu)勢(shì)以外，還可以運(yùn)用 許多其他可用的 Java開發(fā)工具。 我們 所 需要 的 則只是用 Java代碼來豐富我們程序的許多復(fù)雜的功能 ，而不是用 以往的 JavaScript。大型的網(wǎng)絡(luò)應(yīng)用程序存在著管理上的困難，而 Java正是這樣一種對(duì) 大 型網(wǎng)絡(luò)應(yīng)用 程序有著很好的管理性的開發(fā)語言。雖然我們從 Java上得到了很多豐富程序功能的益處，但是 GWT仍然允許你使用 JavaScript代碼 ，而不是從根本上拋棄 JavaScript。 GWT提供了全面 的 配置工具來滿足現(xiàn)代網(wǎng)絡(luò) 應(yīng)用的開發(fā)，如圖 。從 UI組建到配置工具再到與服務(wù)器的交互技術(shù) ， GWT的這些工具的應(yīng)用不僅在視覺上，而且在應(yīng)用上都能讓我們更加體會(huì)到桌面應(yīng)用程序的很多特性。 W i d g e t sA n dP a n e lI 1 8 NX M LP a r s e rH i s t o r yM g m tJ U i tI n t e g r a t i o nJ S N IJ R E E m u l a t i o nJ a v a t o J s C o m p i l e rR P CG W T 圖 GWT開發(fā)組件 北京航 空航天大學(xué)畢業(yè)設(shè)計(jì) (論文 ) 第 9 頁 9 2． 2． 2 為什么要選擇 GWT 眾所周知 ，即使對(duì)于 Ajax技術(shù)非常熟悉的開發(fā)者而言， Ajax應(yīng)用的開發(fā)和調(diào)試過程也不是一件容易的事情，更困難的 是 ， 到目前為止， 還 沒有出現(xiàn) 一種 合適的開發(fā)工具能夠支持 Ajax的 開發(fā)和調(diào)試。 與此相反的是， Java語言 —— 企業(yè)應(yīng)用開發(fā)的主流語言 ，在 開發(fā)和調(diào)試過程卻因?yàn)橛懈鞣N各樣開發(fā)工具的支持 ， 則顯得更為 簡(jiǎn)單 。 而且這樣的開發(fā)工具我們可以免費(fèi)獲得，比如 Eclipse、 NetBeans等 。 如果能夠應(yīng)用 Java語言開發(fā) Ajax。 Ajax應(yīng)用開發(fā)的最大難題 —— 開發(fā)工 具 ， 就將迎刃而解。 在 這種情況下，我們就可以既充分利用 Java語言 的開發(fā)優(yōu)勢(shì)降低 Ajax應(yīng)用 的 開發(fā) 難度，加快 Ajax應(yīng)用 開發(fā) 的 速度，為 Ajax的大規(guī)模應(yīng)用創(chuàng)造可能，又可以充分發(fā)揮 Ajax技術(shù)的優(yōu)勢(shì)，創(chuàng)建更加動(dòng)態(tài)和交互性更好的 Web應(yīng)用程序，提升用戶的瀏覽體驗(yàn)。 GWT的出現(xiàn)為我們提供了這種可能。 它 支持開發(fā)者使用 Java語言開發(fā) Ajax應(yīng)用。GWT框架本身是開源的，但是 GWT中的開發(fā)工具僅僅提供開發(fā)用 License，不允許分發(fā)。 GWT提供了一組基于 Java語言的開發(fā)包，這個(gè)開發(fā)包的設(shè)計(jì)參考 Java AWT包設(shè)計(jì)，類命名規(guī)則、接口設(shè)計(jì)、事件監(jiān)聽等都和 AWT非常類似。熟悉 Java AWT的開發(fā)者不需要花費(fèi)多大的力氣就能夠快速的理解 GWT開發(fā)工具包，將更多地時(shí)間投入到 GWT應(yīng)用的開發(fā)過程中。 2． 2． 3 GWT 的 特性 GWT除了支持將應(yīng)用 Java語言開發(fā)的應(yīng)用轉(zhuǎn)化為 Ajax應(yīng)用，同時(shí)提供了更多的高級(jí)特性，下面是這些特性的簡(jiǎn)單描述。 1. GWT編譯器 GWT編譯器是 GWT的核心，負(fù)責(zé)完成將 Java代碼翻譯 成 Ajax內(nèi)容的工作。 GWT編譯器能夠翻譯 Java語言的大部分特性。包括支持 Java語言中的基本類型、 事件 處理等，支持 接口，支持正則表達(dá)式和序列化。 2. 跨平臺(tái)支持 如果你使用 GWT中提供的顯示組件 (比如 Button)和組裝組件 (比如 VerticalPanel)， 北京航 空航天大學(xué)畢業(yè)設(shè)計(jì) (論文 ) 第 10 頁 10 GWT編譯生成的 Ajax應(yīng)用能夠支持大部分的瀏覽器和操作系統(tǒng)，比如 Inter Explorer、Firefox等，也能夠 支持 Linux、 Windows等不同操作系統(tǒng)。這是因?yàn)?GWT最大限度的將這些控件翻譯成瀏覽器內(nèi)置的類型。比如 Button類編譯后生成的是標(biāo)準(zhǔn) HTML： input type=button。 GWT建議使用 CSS修飾頁面元素的顯示效果 。 GWT的類中很少提供訪問頁面元素樣式屬性的方法，我們可以直接在 CSS文件中通過對(duì)應(yīng)的樣式名稱來設(shè)置頁面元素的默認(rèn)顯示效果。比如使用 .gwtButton { fontsize: 150%。 } 使用 Button元素的默認(rèn)顯示效果。 3. 宿主模式 (Hosted Mode) 宿主模式是指我們和沒有轉(zhuǎn)換為 Ajax應(yīng)用的 GWT應(yīng)用交互的狀態(tài)。當(dāng)我們開發(fā)和調(diào)試時(shí)，我們就一直處在宿主模式下。在這種情況下， Java虛擬機(jī)使用 GWT內(nèi)置的瀏覽器運(yùn)行 GWT應(yīng)用編譯后的 class內(nèi)容，因此能夠 達(dá)到 “ 編碼、測(cè)試、調(diào)試 ” 過 程的最佳速度。 我們可以運(yùn)行 。 4. Web模式 (Web Mode) Web模式是指已經(jīng)成功轉(zhuǎn)化為 Ajax應(yīng)用的狀態(tài)，這種狀態(tài)下，我們已經(jīng)開始通過 Web方式來訪問 Ajax應(yīng)用了。 在 Web模式下運(yùn)行時(shí)，不再需要 GWT工具包或者 JVM的支持。 5. 命令行工具 GWT工具包中提供了幾個(gè)非常適用的小工具來幫助我們更快的建立 GWT應(yīng)用開發(fā)環(huán)境： projectCreator、 applicationCreator、 junitCreator。 ? projectCreator： 創(chuàng)建在 Eclipse中開發(fā) GWT應(yīng)用所需要的項(xiàng)目基本文件和可選的Ant buildfile文件。 ? applicationCreator： applicationCreator命令用于創(chuàng)建基本的 HelloWorld！ 應(yīng)用和GWT應(yīng)用開發(fā)環(huán)境。 ? junitCreator ： 生成 junti測(cè)試代碼。 本文中所有的環(huán)境準(zhǔn)備、實(shí)例開發(fā)和說明 都 針對(duì) Windows操作平臺(tái)，如果使用其他的操作系統(tǒng)，請(qǐng)根據(jù)實(shí)際情況進(jìn)行適當(dāng)?shù)恼{(diào)整。 北京航 空航天大學(xué)畢業(yè)設(shè)計(jì) (論文 ) 第 11 頁 11 2． 3 EXT 簡(jiǎn)介 簡(jiǎn)單的講， EXT是 一個(gè)封裝了常用桌面應(yīng)用和 Web組件的 Ajax框架，其許可證協(xié)議模式比較多，總體來說是個(gè)半開源的 Ajax框架 。 ExtJS可以用來開發(fā) RIA，豐富了 客戶端的 Ajax應(yīng)用，是一個(gè)用 JavaScript編寫 的 ，主要用于創(chuàng)建前端用戶界面， 與后臺(tái)技術(shù)無關(guān)的前端 Ajax框架。因此，可以把 ExtJS用在 .Net、 Java、 Php等各種開發(fā)語言開發(fā)的應(yīng)用中。 2． 4 RPC（ Remote Procedure Calls） 簡(jiǎn)介 由以上 對(duì) Google Web Toolkit的介紹我們知道 ， GWT是一個(gè)用來處理客戶端與服務(wù)器端的網(wǎng)絡(luò)程序 框架。當(dāng)一個(gè)服務(wù)在網(wǎng)絡(luò)程序中需要進(jìn)行處理時(shí)，就必須 使 這個(gè)服務(wù)在客戶端與服務(wù)器端來回往復(fù)。 在 GWT中，客戶端代碼在運(yùn)行時(shí)更像是一個(gè) C/S結(jié)構(gòu)的客戶端，但它 卻是在網(wǎng)絡(luò)瀏覽器中運(yùn)行 的 。所以從服務(wù)器端請(qǐng)求 HTML網(wǎng)頁是沒有必要的。而 在通常的客戶端 — 服務(wù)器端的體系中， 當(dāng) GWT需要和服務(wù)器端進(jìn)行聯(lián)系時(shí)， 就 需要 通過 遠(yuǎn)程程序調(diào)用 Remote Procedure Calls（ 以下簡(jiǎn)稱 RPC） 來執(zhí)行 。 RPC是一個(gè)適用于結(jié)構(gòu)分配 和基于客戶端于服務(wù)器端應(yīng)用 的強(qiáng)大技術(shù) ，是一種基于擴(kuò)展了傳統(tǒng)的或 本地的程序的概念，而所謂的遠(yuǎn)程是指 不存在相同地址空間。 GWT會(huì)自動(dòng)的產(chǎn)生許多適合于 RPC所需要的類別。 在真正進(jìn)入 RPC之前， 先來介紹在 建立 RPC服務(wù)時(shí)不同的類和接口之間是什么樣的關(guān)系。 在 RPC服務(wù)中是通過類和接口來實(shí)現(xiàn)的。 ? Service： 這是為我們服務(wù)定義的一個(gè)接口。在我們的服務(wù)中這個(gè)接口繼承了RemoteService，來說明這個(gè)服務(wù)是一個(gè) GWT RPC服務(wù)。而這卻是 一個(gè)同步的接口定義，要想在服務(wù)器端實(shí)現(xiàn)就必須實(shí)現(xiàn)這個(gè)接口。 ? ServiceAsync:這是一個(gè)異步的接口定義 ，而它必須有一個(gè)實(shí)現(xiàn)相同方法的同步接口。除此以外，還需要一個(gè) AsyncCallback作為一個(gè)參數(shù)，否則所定義的方法是不能實(shí)現(xiàn)的。而這個(gè)接口的命名的規(guī)則通常是同步接口的名稱加上 Async作為后綴。 北京航 空航天大學(xué)畢業(yè)設(shè)計(jì) (論文 ) 第 12 頁 12 ? ServiceImpl ： 這 是 所 定 義 的 方 法 在 服 務(wù) 器 端 的 實(shí) 現(xiàn) ， 它 必 須 繼 承RemoteServiceServlet然后實(shí)現(xiàn)同步的接口。 RPC的工作原理和實(shí)現(xiàn)流程如下圖 ,其具體的實(shí)現(xiàn)過程將在 介紹。 服 務(wù) 對(duì) 象 本 地 異 步 服 務(wù)遠(yuǎn) 程 服 務(wù) 接 口 本 地 服 務(wù) 接 口 本 地 服 務(wù)遠(yuǎn) 程 服 務(wù)實(shí) 現(xiàn) 本 地 的異 步 服 務(wù)可 轉(zhuǎn) 換 的 J a v a 代 碼 在客 戶 端 以 J a v a S c r i p t代 碼 形 式 運(yùn) 行