多數傳統網頁執行的主要問題點在於網頁的回應時間過長,使用者按下網頁上的超連結或是按鍵之後,往往要等待數秒鐘,甚至10幾秒才能夠看到網頁回傳的處理結果,更糟的是使用者有可能需要執行多次的重新整理才能看到所需要的答案,這種考驗使用者耐心的Click and Wait式的操作感覺,因為無法像視窗應用程式一樣提供敏捷的操作反應,是造成Ajax風格的網頁興起的主要推手。
新一代的Ajax(Asynchronous Javascript and XML)網頁開發技術是一種Rich Client網頁解決方案,Ajax網頁會善用用戶端網頁的Javascript技術,透過XmlHttp傳輸協定和網際網路上的伺服器進行溝通,再使用XML技術解析伺服器傳回的執行結果,最後再利用DHTML、DOM(Document Object Model),和CSS(Cascading Style Sheet)等技術將伺服器傳回的結果顯示到網頁上供使用者檢視,是一種結合用戶端和伺服器的技術,其優點是可以只更新網頁的部份內容,減少使用者等待的時間,提升使用者的工作效率,同時也可以降低網頁對伺服器頻寬的需求,是一個頗為優良的解決方案。
傳統的網頁單純依靠HTTP協定進行用戶端和伺服器之間的運作,用戶端發出需求,然後等待伺服器傳回處理結果,取得伺服器執行結果後再更新整個網頁顯示的內容,其架構如圖:
Ajax網頁的架構和傳統的網頁不同地方在於在用戶端執行的網頁可以透過Javascript搭配XmlHttp協定,以不引發網頁PostBack的方式發出需求,呼叫伺服器上的XML Web Service服務或是網頁提供的功能,再以較有效率的方式更新網頁的部份內容,降低使用者對等待的不耐,提升使用者對網頁操作的感覺,其架構如圖:
體驗Ajax風格的網頁
PageFlakes.com
www.bing.com/maps
Maps.Google.com
Maps.Yahoo.com
DeepEarth(Silverlight網頁)
Google Suggest
G-Mail
Amazon Diamond Search
開發Ajax風格的網頁
‧Hard Code
Javascript + DHTML + DOM + CSS + XmlHttp + XML
Javascript
類似C語言語法,可以用來控制HTML元素,改變網頁顯示的內容或樣式,或是透過XmlHttp通訊協定呼叫網頁或XML Web Service服務提供的功能。
DHTML(Dynamic HTML)、DOM(Document Object Model)和CSS(Cascading Style Sheet)
利用Javascript控制網頁中的物件顯示的資料和效果的技術稱為DHTML。網頁定義的文件模型(DOM)負責將網頁中的物件建構成物件階層,協助網頁執行尋找物件的動作,以便更新物件的內容或樣式,而CSS樣式則是用來定義網頁中物件的樣式之語法。
XmlHttp(Extensible Markup Language Hypertext Transfer Protocol)
支援使用HTTP通訊協定在網際網路傳輸XML、HTML和二進位資料的通訊協定,可以利用網頁中的Javascript語法啟動執行傳送需求給伺服器的動作。XML(Extensible Markup Language)文件處理
XML是一種可以允許自訂的可擴充標示語言,Ajax網頁必須有能力處理伺服器傳回的XML文件,並從自伺服器取得XML文件中取出所需要的結果,再利用Javascript、DOM和CSS技術更新部分網頁顯示的內容或效果。
‧Client Script Callback技術
‧ASP.NET 2.0或更高版本的做法,使用ClientScriptManager類別和ICallbackEventHandler介面
‧Microsoft ASP.NET Ajax Extension + Ajax Control Toolkit
製作Ajax風格網頁的缺點
‧偵錯不易
‧易出錯Weak type
善用http://www.w3schools.com
‧維護不易
‧必須在不同的瀏覽器上進行測試
‧安全性 - IE瀏覽器必須可以進行Active Scripting
‧沒有Framework
新一代的Ajax(Asynchronous Javascript and XML)網頁開發技術是一種Rich Client網頁解決方案,Ajax網頁會善用用戶端網頁的Javascript技術,透過XmlHttp傳輸協定和網際網路上的伺服器進行溝通,再使用XML技術解析伺服器傳回的執行結果,最後再利用DHTML、DOM(Document Object Model),和CSS(Cascading Style Sheet)等技術將伺服器傳回的結果顯示到網頁上供使用者檢視,是一種結合用戶端和伺服器的技術,其優點是可以只更新網頁的部份內容,減少使用者等待的時間,提升使用者的工作效率,同時也可以降低網頁對伺服器頻寬的需求,是一個頗為優良的解決方案。
傳統的網頁單純依靠HTTP協定進行用戶端和伺服器之間的運作,用戶端發出需求,然後等待伺服器傳回處理結果,取得伺服器執行結果後再更新整個網頁顯示的內容,其架構如圖:
Ajax網頁的架構和傳統的網頁不同地方在於在用戶端執行的網頁可以透過Javascript搭配XmlHttp協定,以不引發網頁PostBack的方式發出需求,呼叫伺服器上的XML Web Service服務或是網頁提供的功能,再以較有效率的方式更新網頁的部份內容,降低使用者對等待的不耐,提升使用者對網頁操作的感覺,其架構如圖:
體驗Ajax風格的網頁
PageFlakes.com
www.bing.com/maps
Maps.Google.com
Maps.Yahoo.com
DeepEarth(Silverlight網頁)
Google Suggest
G-Mail
Amazon Diamond Search
開發Ajax風格的網頁
‧Hard Code
Javascript + DHTML + DOM + CSS + XmlHttp + XML
Javascript
類似C語言語法,可以用來控制HTML元素,改變網頁顯示的內容或樣式,或是透過XmlHttp通訊協定呼叫網頁或XML Web Service服務提供的功能。
DHTML(Dynamic HTML)、DOM(Document Object Model)和CSS(Cascading Style Sheet)
利用Javascript控制網頁中的物件顯示的資料和效果的技術稱為DHTML。網頁定義的文件模型(DOM)負責將網頁中的物件建構成物件階層,協助網頁執行尋找物件的動作,以便更新物件的內容或樣式,而CSS樣式則是用來定義網頁中物件的樣式之語法。
XmlHttp(Extensible Markup Language Hypertext Transfer Protocol)
支援使用HTTP通訊協定在網際網路傳輸XML、HTML和二進位資料的通訊協定,可以利用網頁中的Javascript語法啟動執行傳送需求給伺服器的動作。XML(Extensible Markup Language)文件處理
XML是一種可以允許自訂的可擴充標示語言,Ajax網頁必須有能力處理伺服器傳回的XML文件,並從自伺服器取得XML文件中取出所需要的結果,再利用Javascript、DOM和CSS技術更新部分網頁顯示的內容或效果。
‧Client Script Callback技術
‧ASP.NET 2.0或更高版本的做法,使用ClientScriptManager類別和ICallbackEventHandler介面
‧Microsoft ASP.NET Ajax Extension + Ajax Control Toolkit
製作Ajax風格網頁的缺點
‧偵錯不易
‧易出錯Weak type
善用http://www.w3schools.com
‧維護不易
‧必須在不同的瀏覽器上進行測試
‧安全性 - IE瀏覽器必須可以進行Active Scripting
‧沒有Framework