ajax 5、綜合
Jesse James Garrett提到的Ajax引擎,實際上是一個比較複雜的JavaScript應用程式,用來處理使用者請求,讀寫伺服器和更改DOM內容。
JavaScript的Ajax引擎讀取資訊,並且互動地重寫DOM,這使網頁能無縫化重構,也就是在頁面已經下載完畢後改變頁面內容,這是我們一直在通過JavaScript和DOM在廣泛使用的方法,但要使網頁真正動態起來,不僅要內部的互動,還需要從外部擷取資料,在以前,我們是讓使用者來輸入資料並通過DOM來改變網頁內容的,但現在,XMLHTTPRequest,可以讓我們在不重載頁面的情況下讀寫伺服器上的資料,使使用者的輸入達到最少。 基於XML的網路通訊也並不是新事物,實際上FLASH和JAVA Applet都有不錯的表現,現在這種富互動在網頁上也可用了,基於標準化的並被廣泛支援和技術,並且不需要外掛程式或下載小程式。
Ajax是傳統WEB應用程式的一個轉變。以前是伺服器每次產生HTML頁面並返回給用戶端(瀏覽器)。在大多數網站中,很多頁面中至少90%都是一樣的,比如:結構、格式、頁頭、頁尾、廣告等,所不同的只是一小部分的內容,但每次伺服器都會產生所有的頁面再返回給用戶端,這無形之中是一種浪費,不管是對於使用者的時間、頻寬、CPU耗用,還是對於ISP的高價租用的頻寬和空間來說。如果按一頁來算,只能幾K或是幾十K可能並不起眼,但像SINA每天要產生幾百萬個頁面的大ISP來說,可以說是損失巨大的。而AJAX可以所為用戶端和伺服器的中介層,來處理用戶端的請求,並根據需要向伺服器端發送請求,用什麼就取什麼、用多少就取多少,就不會有資料的冗餘和浪費,減少了資料下載總量,而且更新頁面時不用重載全部內容,只更新需要更新的那部分即可,相對於純幕後處理並重載的方式縮短了使用者等待時間,也把對資源的浪費降到最低,基於標準化的並被廣泛支援和技術,並且不需要外掛程式或下載小程式,所以Ajax對於使用者和ISP來說是雙盈的。
Ajax使WEB中的介面與應用分離(也可以說是資料與呈現分離),而在以前兩者是沒有清晰的界限的,資料與呈現分離的分離,有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的發布系統。也可以把以前的一些伺服器負擔的工作轉嫁到用戶端,利於用戶端閑置的處理能力來處理。
四、應用
Ajax理念的出現,揭開了無重新整理更新頁面時代的序幕,並有代替傳統web開發中採用form(表單)遞交方式更新web頁面的趨勢,可以算是一個裡程碑。但Ajax都不是適用於所有地方的,它的適用範圍是由它的特性所決定的。
舉個應用的例子,是關於串聯功能表方面的Ajax應用。我們以前的對串聯功能表的處理是這樣的:
為了避免每次對菜單的操作引起的重載頁面,不採用每次調用背景方式,而是一次性將串聯功能表的所有資料全部讀取出來並寫入數組,然後根據使用者的操作用JavaScript來控制它的子集項目的呈現,這樣雖然解決了操作響應速度、不重載頁面以及避免向伺服器頻繁發送請求的問題,但是如果使用者不對菜單進行操作或只對菜單中的一部分進行操作的話,那讀取的資料中的一部分就會成為冗餘資料而浪費使用者的資源,特別是在菜單結構複雜、資料量大的情況下(比如菜單有很多級、每一級菜又有上百個項目),這種弊端就更為突出。
如果在此案中應用Ajax後,結果就會有所改觀:
在初始化頁面時我們唯讀出它的第一級的所有資料並顯示,在使用者操作一級菜單其中一項時,會通過Ajax向後台請求當前一級項目所屬的二級子功能表的所有資料,如果再繼續請求已經呈現的二級菜單中的一項時,再向後面請求所操作二級功能表項目對應的所有三級菜單的所有資料,以此類推……這樣,用什麼就取什麼、用多少就取多少,就不會有資料的冗餘和浪費,減少了資料下載總量,而且更新頁面時不用重載全部內容,只更新需要更新的那部分即可,相對於幕後處理並重載的方式縮短了使用者等待時間,也把對資源的浪費降到最低。
此外,Ajax由於可以調用外部資料,也可以實現資料彙總的功能(當然要有相應授權),比如微軟剛剛在3月15日發布的線上RSS閱讀器BETA版;還可以利於一些開放的資料,開發自已的一些應用程式,比如用Amazon的資料作的一些新穎的圖書搜尋應用。
總之,Ajax適用於互動較多,頻繁讀資料,資料分類良好的WEB應用。
五、Ajax的優勢
1、減輕伺服器的負擔。因為Ajax的根本理念是“按需取資料”,所以最大可能在減少了冗餘請求和響影對伺服器造成的負擔;
2、無重新整理更新頁面,減少使用者實際和心理等待時間;
首先,“按需取資料”的模式減少了資料的實際讀取量,打個很形象的比方,如果說重載的方式是從一個終點回到原點再到另一個終點的話,那麼Ajax就是以一個終點為基點到達另一個終點;
圖5-1
圖5-2
其次,即使要讀取比較大的資料,也不用像RELOAD一樣出現白屏的情況,由於Ajax是用XMLHTTP發送請求得到服務端應答資料,在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面的,所以在讀取資料的過程中,使用者所面對的也不是白屏,而是原來的頁面狀態(或者可以加一個LOADING的提示框讓使用者瞭解資料讀取的狀態),只有當接收到全部資料後才更新相應部分的內容,而這種更新也是瞬間的,使用者幾乎感覺不到。總之使用者是很敏感的,他們能感覺到你對他們的體貼,雖然不太可能立竿見影的效果,但會在使用者的心中一點一滴的積累他們對網站的依賴。
3、更好的使用者體驗;
4、也可以把以前的一些伺服器負擔的工作轉嫁到用戶端,利於用戶端閑置的處理能力來處理,減輕伺服器和頻寬的負擔,節約空間和頻寬租用成本;
5、Ajax由於可以調用外部資料;
6、基於標準化的並被廣泛支援和技術,並且不需要外掛程式或下載小程式;
7、Ajax使WEB中的介面與應用分離(也可以說是資料與呈現分離);
8、對於使用者和ISP來說是雙盈的。
六、Ajax的問題
1、一些手持功能(如手機、PDA等)現在還不能很好的支援Ajax;
2、用JavaScript作的Ajax引擎,JavaScript的相容性和DeBug都是讓人頭痛的事;
3、Ajax的無重新整理重載,由於頁面的變化沒有重新整理重載那麼明顯,所以容易給使用者帶來困擾――使用者不太清楚現在的資料是新的還是已經更新過的;現有的解決有:在相關位置提示、資料更新的地區設計得比較明顯、資料更新後給使用者提示等;
4、對流媒體的支援沒有FLASH、Java Applet好;
七、結束語
更好的Ajax應用,需要更多的用戶端的開發,和對當前的WEB應用理念的思考,而且良好的使用者體驗,來源於為處處使用者考慮的理念,而不單純是某種技術。
八、DEMO Ajax圖片瀏覽器DEMO: http://www.DragonSon.com/pic/
九、作者連絡方式
MSN: waymangood@hotmail.com OICQ: 458620
E-Mail: amourguo@gmail.com網站: http://www.DragonSon.com
- Ajax: 一個建立Web應用的新途徑
- Ajax的錯誤處理機制探討(2)
- Ajax的錯誤處理機制探討(1)
- 初次體驗.NET Ajax無重新整理技術
- Rails系統中的AJAX開發技術簡析(4)