Ajax應用場(chǎng)景
一、適用場(chǎng)景
表單驅動(dòng)的交互
傳統的表單提交,在文本框輸入內容后,點(diǎn)擊按鈕,后臺處理完畢后,頁(yè)面刷新,再回頭檢查是否刷新結果正確。使用Ajax,在點(diǎn)擊 sunmit按鈕后,立刻進(jìn)行異步處理,并在頁(yè)面上快速顯示了更新后的結果,這里沒(méi)有整個(gè)頁(yè)面刷新的問(wèn)題。
深層次的樹(shù)的導航
深層次的級聯(lián)菜單(樹(shù))的遍歷是一項非常復雜的任務(wù),使用JavaScript來(lái)控制顯示邏輯,使用Ajax延遲加載更深層次的數據可以有效 的減輕服務(wù)器的負擔。
我們以前的對級聯(lián)菜單的處理多數是這樣的:
為了避免每次對菜單的操作引起的重載頁(yè)面,不采用每次調用后臺的方式,而是一次性將級聯(lián)菜單的所有數據全部讀取出來(lái)并寫(xiě)入數組, 然后根據用戶(hù)的操作用 JavaScript來(lái)控制它的子集項目的呈現,這樣雖然解決了操作響應速度、不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請求的 問(wèn)題,但是如果用戶(hù)不對菜單進(jìn)行 操作或只對菜單中的一部分進(jìn)行操作的話(huà),那讀取的數據中的一部分就會(huì )成為冗余數據而浪費用戶(hù)的資源, 特別是在菜單結構復雜、數據量大的情況下(比如菜單有 很多級、每一級菜又有上百個(gè)項目),這種弊端就更為突出。
如果在此案中應用Ajax后,結果就會(huì )有所改觀(guān):
在初始化頁(yè)面時(shí)我們只讀出它的第一級的所有數據并顯示,在用戶(hù)操作一級菜單其中一項時(shí),會(huì )通過(guò)Ajax向后臺請求當前一級項目所屬的 二級子菜單的所有數據,如 果再繼續請求已經(jīng)呈現的二級菜單中的一項時(shí),再向后面請求所操作二級菜單項對應的所有三級菜單的所有數據, 以此類(lèi)推……這樣,用什么就取什么、用多少就取 多少,就不會(huì )有數據的冗余和浪費,減少了數據下載總量,而且更新頁(yè)面時(shí)不用重載全部?jì)?容,只更新需要更新的那部分即可,相對于后臺處理并重載的方式縮短了 用戶(hù)等待時(shí)間,也把對資源的浪費降到最低。
快速的用戶(hù)與用戶(hù)間的交流響應
在眾多人參與的交流討論的場(chǎng)景下,最不爽的事情就是讓用戶(hù)一遍又一遍刷新頁(yè)面以便知道是否有新的討論出現。新的回復應該以最快 的速度顯示出來(lái),而把用戶(hù)從分神的刷新中解脫出來(lái),Ajax是最好的選擇。
類(lèi)似投票、yes/no等無(wú)關(guān)痛癢的場(chǎng)景
對于類(lèi)似這樣的場(chǎng)景中,如果提交過(guò)程需要達到40秒,很多的用戶(hù)就會(huì )直接忽略過(guò)去而不會(huì )參與,但是Ajax可以把時(shí)間控制在1秒之內 ,從而更多的用戶(hù)會(huì )加入進(jìn)來(lái)。
對數據進(jìn)行過(guò)濾和操縱相關(guān)數據的場(chǎng)景
對數據使用過(guò)濾器,按照時(shí)間排序,或者按照時(shí)間和名稱(chēng)排序,開(kāi)關(guān)過(guò)濾器等等。任何要求具備很高交互性數據操縱的場(chǎng)合都應該用 JavaScript,而不是用一系列的服務(wù)器請求來(lái)完成。在每次數據更新后,再對其進(jìn)行查找和處理需要耗費較多的時(shí)間,而Ajax可以加速這個(gè)過(guò) 程。
普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
在文本框等輸入表單中給予輸入提示,或者自動(dòng)完成,可以有效的改善用戶(hù)體驗,尤其是那些自動(dòng)完成的數據可能來(lái)自于服務(wù)器端的場(chǎng)合, Ajax是很好的選擇。
二、不適用場(chǎng)景
部分簡(jiǎn)單的表單
雖然表單提交可以從Ajax獲取最大的益處,但一個(gè)簡(jiǎn)單的評論表單極少能從Ajax得到什么明顯的改善。而一些較少用到的表單提交,Ajax則 幫不上什么忙。
搜索
有些使用了Ajax的搜索引擎如Start.com和Live.com不允許使用瀏覽器的后退按鈕來(lái)查看前一次搜索的結果,這對已經(jīng)養成搜索習慣的用戶(hù) 來(lái)說(shuō)是不可原諒的?,F在Dojo通過(guò)iframe來(lái)解決這個(gè)問(wèn)題。
基本的導航
使用Ajax來(lái)做站點(diǎn)內的導航是一個(gè)壞主意,為什么不把時(shí)間放在讓系統程序作的更好上呢?
替換大量的文本
使用Ajax可以實(shí)現頁(yè)面的局部刷新,但是如果頁(yè)面的每個(gè)部分都改變了,為什么不重新做一次服務(wù)器請求呢?
對呈現的操縱
Ajax看起來(lái)像是一個(gè)純粹的UI技術(shù),但事實(shí)上它不是。它實(shí)際上是一個(gè)數據同步、操縱和傳輸的技術(shù)。對于可維護的干凈的web應用,不使 用Ajax來(lái)控制頁(yè)面呈現是一個(gè)不錯的主意。JavaScript可以很簡(jiǎn)單的處理XHMTL/HTML/DOM,使用CSS規則就可以很好的表達數據顯示。
存在的問(wèn)題
用JavaScript作的Ajax引擎,JavaScript的兼 容性和DeBug都是讓人頭痛的事;
Ajax的無(wú)刷新重載,由于頁(yè)面的變化沒(méi)有刷新重載那么明顯,所以容易給用戶(hù)帶 來(lái)困擾?D?D用戶(hù)不太清楚現在的數據是新的還是已經(jīng)更新過(guò)的;現有的解決有:在相關(guān)位置提示、數據更新的區域設計得比較明顯、數據更新 后給用戶(hù)提示等;
中間過(guò)程不能被bookmark。解決方法: GoogleMaps通過(guò)在頁(yè)面上提供一個(gè)”link to this page”的辦法來(lái)解決。另外,還可以通過(guò)url鏈接中加無(wú)效的?^標記來(lái)解決,但還未驗證。
聯(lián)系客服