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