|
---------------------------------------------------------
AJAX
---------------------------------------------------------
作為J2EE開發(fā)人員，我們似乎經(jīng)常關注“后端機制（backend mechanics）”。我們通常會忘記，J2EE的主要成功之處在Web應用程序方面；許多原因使得人們喜歡利用Web開發(fā)應用程序，但主要還是因為其易于部署的特點允許站點以盡可能低的成本擁有上百萬的用戶。遺憾的是，在過去幾年中，我們在后端投入了太多的時間，而在使我們的Web用戶界面對用戶自然和響應靈敏方面卻投入不足。
本文介紹一種方法，Ajax，使用它可以構建更為動態(tài)和響應更靈敏的Web應用程序。該方法的關鍵在于對瀏覽器端的JavaScript、DHTML和與服務器異步通信的組合。本文也演示了啟用這種方法是多么簡單：利用一個Ajax框架（指DWR）構造一個應用程序，它直接從瀏覽器與后端服務進行通信。如果使用得當，這種強大的力量可以使應用程序更加自然和響應靈敏，從而提升用戶的瀏覽體驗。
該應用程序中所使用的示例代碼已打包為單獨的WAR文件，可供下載。
簡介
術語Ajax用來描述一組技術，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。在Ajax之前，Web站點強制用戶進入提交/等待/重新顯示范例，用戶的動作總是與服務器的“思考時間”同步。Ajax提供與服務器異步通信的能力，從而使用戶從請求/響應的循環(huán)中解脫出來。借助于Ajax，可以在用戶單擊按鈕時，使用JavaScript和DHTML立即更新UI，并向服務器發(fā)出異步請求，以執(zhí)行更新或查詢數(shù)據(jù)庫。當請求返回時，就可以使用JavaScript和CSS來相應地更新UI，而不是刷新整個頁面。最重要的是，用戶甚至不知道瀏覽器正在與服務器通信：Web站點看起來是即時響應的。
雖然Ajax所需的基礎架構已經(jīng)出現(xiàn)了一段時間，但直到最近異步請求的真正威力才得到利用。能夠擁有一個響應極其靈敏的Web站點確實激動人心，因為它最終允許開發(fā)人員和設計人員使用標準的HTML/CSS/JavaScript堆棧創(chuàng)建“桌面風格的（desktop-like）”可用性。
通常，在J2EE中，開發(fā)人員過于關注服務和持久性層的開發(fā)，以至于用戶界面的可用性已經(jīng)落后。在一個典型的J2EE開發(fā)周期中，常常會聽到這樣的話，“我們沒有可投入UI的時間”或“不能用HTML實現(xiàn)”。但是，以下Web站點證明，這些理由再也站不住腳了：
BackPack
Google Suggest
Google Maps
PalmSphere
所有這些Web站點都告訴我們，Web應用程序不必完全依賴于從服務器重新載入頁面來向用戶呈現(xiàn)更改。一切似乎就在瞬間發(fā)生。簡而言之，在涉及到用戶界面的響應靈敏度時，基準設得更高了。
定義Ajax
Adaptive Path公司的Jesse James Garrett這樣定義Ajax：
Ajax不是一種技術。實際上，它由幾種蓬勃發(fā)展的技術以新的強大方式組合而成。Ajax包含：
基于XHTML和CSS標準的表示；
使用Document Object Model進行動態(tài)顯示和交互；
使用XMLHttpRequest與服務器進行異步通信；
使用JavaScript綁定一切。
這非常好，但為什么要以Ajax命名呢？其實術語Ajax是由Jesse James Garrett創(chuàng)造的，他說它是“Asynchronous JavaScript + XML的簡寫”。
Ajax的工作原理
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。
在創(chuàng)建Web站點時，在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能：
動態(tài)更新購物車的物品總數(shù)，無需用戶單擊Update并等待服務器重新發(fā)送整個頁面。
提升站點的性能，這是通過減少從服務器下載的數(shù)據(jù)量而實現(xiàn)的。例如，在Amazon的購物車頁面，當更新籃子中的一項物品的數(shù)量時，會重新載入整個頁面，這必須下載32K的數(shù)據(jù)。如果使用Ajax計算新的總量，服務器只會返回新的總量值，因此所需的帶寬僅為原來的百分之一。
消除了每次用戶輸入時的頁面刷新。例如，在Ajax中，如果用戶在分頁列表上單擊Next，則服務器數(shù)據(jù)只刷新列表而不是整個頁面。
直接編輯表格數(shù)據(jù)，而不是要求用戶導航到新的頁面來編輯數(shù)據(jù)。對于Ajax，當用戶單擊Edit時，可以將靜態(tài)表格刷新為內(nèi)容可編輯的表格。用戶單擊Done之后，就可以發(fā)出一個Ajax請求來更新服務器，并刷新表格，使其包含靜態(tài)、只讀的數(shù)據(jù)。
一切皆有可能！但愿它能夠激發(fā)您開始開發(fā)自己的基于Ajax的站點。然而，在開始之前，讓我們介紹一個現(xiàn)有的Web站點，它遵循傳統(tǒng)的提交/等待/重新顯示的范例，我們還將討論Ajax如何提升用戶體驗。
出處：藍色理想
責任編輯：moby
上一頁 RIA和AJAX分析 [2] 下一頁 RIA和AJAX分析 [4]
◎進入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
第 1 頁 
第 3 頁 RIA和AJAX分析 [3]
