| 時間：2005-11-01 作者：David Teare 瀏覽次數(shù)： 132263 本文關(guān)鍵字：ajax, dhtml, dwr, javascript |
|
作為J2EE開發(fā)人員，我們似乎經(jīng)常關(guān)注“后端機(jī)制（backend mechanics）”。我們通常會忘記，J2EE的主要成功之處在Web應(yīng)用程序方面；許多原因使得人們喜歡利用Web開發(fā)應(yīng)用程序，但主要還是因?yàn)槠湟子诓渴鸬奶攸c(diǎn)允許站點(diǎn)以盡可能低的成本擁有上百萬的用戶。遺憾的是，在過去幾年中，我們在后端投入了太多的時間，而在使我們的Web用戶界面對用戶自然和響應(yīng)靈敏方面卻投入不足。
本文介紹一種方法，Ajax，使用它可以構(gòu)建更為動態(tài)和響應(yīng)更靈敏的Web應(yīng)用程序。該方法的關(guān)鍵在于對瀏覽器端的JavaScript、DHTML和與服務(wù)器異步通信的組合。本文也演示了啟用這種方法是多么簡單：利用一個Ajax框架（指DWR）構(gòu)造一個應(yīng)用程序，它直接從瀏覽器與后端服務(wù)進(jìn)行通信。如果使用得當(dāng)，這種強(qiáng)大的力量可以使應(yīng)用程序更加自然和響應(yīng)靈敏，從而提升用戶的瀏覽體驗(yàn)。
該應(yīng)用程序中所使用的示例代碼已打包為單獨(dú)的WAR文件，可供下載。
簡介
術(shù)語Ajax用來描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在Ajax之前，Web站點(diǎn)強(qiáng)制用戶進(jìn)入提交/等待/重新顯示范例，用戶的動作總是與服務(wù)器的“思考時間”同步。Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請求/響應(yīng)的循環(huán)中解脫出來。借助于Ajax，可以在用戶單擊按鈕時，使用JavaScript和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請求，以執(zhí)行更新或查詢數(shù)據(jù)庫。當(dāng)請求返回時，就可以使用JavaScript和CSS來相應(yīng)地更新UI，而不是刷新整個頁面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信：Web站點(diǎn)看起來是即時響應(yīng)的。
雖然Ajax所需的基礎(chǔ)架構(gòu)已經(jīng)出現(xiàn)了一段時間，但直到最近異步請求的真正威力才得到利用。能夠擁有一個響應(yīng)極其靈敏的Web站點(diǎn)確實(shí)激動人心，因?yàn)樗罱K允許開發(fā)人員和設(shè)計(jì)人員使用標(biāo)準(zhǔn)的HTML/CSS/JavaScript堆棧創(chuàng)建“桌面風(fēng)格的（desktop-like）”可用性。
通常，在J2EE中，開發(fā)人員過于關(guān)注服務(wù)和持久性層的開發(fā)，以至于用戶界面的可用性已經(jīng)落后。在一個典型的J2EE開發(fā)周期中，常常會聽到這樣的話，“我們沒有可投入UI的時間”或“不能用HTML實(shí)現(xiàn)”。但是，以下Web站點(diǎn)證明，這些理由再也站不住腳了：
所有這些Web站點(diǎn)都告訴我們，Web應(yīng)用程序不必完全依賴于從服務(wù)器重新載入頁面來向用戶呈現(xiàn)更改。一切似乎就在瞬間發(fā)生。簡而言之，在涉及到用戶界面的響應(yīng)靈敏度時，基準(zhǔn)設(shè)得更高了。
定義Ajax
Adaptive Path公司的Jesse James Garrett這樣定義Ajax：
Ajax不是一種技術(shù)。實(shí)際上，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含：
這非常好，但為什么要以Ajax命名呢？其實(shí)術(shù)語Ajax是由Jesse James Garrett創(chuàng)造的，他說它是“Asynchronous JavaScript + XML的簡寫”。
Ajax的工作原理
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。
在創(chuàng)建Web站點(diǎn)時，在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能：
一切皆有可能！但愿它能夠激發(fā)您開始開發(fā)自己的基于Ajax的站點(diǎn)。然而，在開始之前，讓我們介紹一個現(xiàn)有的Web站點(diǎn)，它遵循傳統(tǒng)的提交/等待/重新顯示的范例，我們還將討論Ajax如何提升用戶體驗(yàn)。
Ajax可用于那些場景？——一個例子：MSN Money頁面
前幾天，在瀏覽MSN Money頁面的時候，有一篇關(guān)于房地產(chǎn)投資的文章引起了我的好奇心。我決定使用站點(diǎn)的“Rate this article”（評價本文）功能，鼓勵其他的用戶花一點(diǎn)時間來閱讀這篇文章。在我單擊vote按鈕并等待了一會兒之后，整個頁面被刷新，在原來投票問題所在的地方出現(xiàn)了一個漂亮的感謝畫面。
而Ajax能夠使用戶的體驗(yàn)更加愉快，它可以提供響應(yīng)更加靈敏的UI，并消除頁面刷新所帶來的閃爍。目前，由于要刷新整個頁面，需要傳送大量的數(shù)據(jù)，因?yàn)楸仨氈匦掳l(fā)送整個頁面。如果使用Ajax，服務(wù)器可以返回一個包含了感謝信息的500字節(jié)的消息，而不是發(fā)送26,813字節(jié)的消息來刷新整個頁面。即使使用的是高速Internet，傳送26K和1/2K的差別也非常大。同樣重要的是，只需要刷新與投票相關(guān)的一小節(jié)，而不是刷新整個屏幕。
讓我們利用Ajax實(shí)現(xiàn)自己的基本投票系統(tǒng)。
原始的Ajax：直接使用XmlHttpRequest
如上所述，Ajax的核心是JavaScript對象XmlHttpRequest。下面的示例文章評價系統(tǒng)將帶您熟悉Ajax的底層基本知識：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已經(jīng)在本地WebLogic容器中安裝了ajax-demo.war，可以導(dǎo)航到http://localhost:7001/ajax-demo/raw-ajax.html，
瀏覽應(yīng)用程序，參與投票，并親眼看它如何運(yùn)轉(zhuǎn)。熟悉了該應(yīng)用程序之后，繼續(xù)閱讀，進(jìn)一步了解其工作原理細(xì)節(jié)。
首先，您擁有一些簡單的定位點(diǎn)標(biāo)記，它連接到一個JavaScriptcastVote(rank)函數(shù)。
function castVote(rank) {var url = "/ajax-demo/static-article-ranking.html";var callback = processAjaxResponse;executeXhr(callback, url);}該函數(shù)為您想要與之通信的服務(wù)器資源創(chuàng)建一個URL并調(diào)用內(nèi)部函數(shù)executeXhr，提供一個回調(diào)JavaScript函數(shù)，一旦服務(wù)器響應(yīng)可用，該函數(shù)就被執(zhí)行。由于我希望它運(yùn)行在一個簡單的Apache環(huán)境中，“cast vote URL”只是一個簡單的HTML頁面。在實(shí)際情況中，被調(diào)用的URL將記錄票數(shù)并動態(tài)地呈現(xiàn)包含投票總數(shù)的響應(yīng)。
