TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊
Js異步刷新，其實(shí)也就是ajax技術(shù)的適用場(chǎng)合。網(wǎng)上有人整理過(guò)一下6項(xiàng)可供你參閱。
1.表單驅(qū)動(dòng)的交互
傳統(tǒng)的表單提交,在文本框輸入內(nèi)容后,點(diǎn)擊按鈕,后臺(tái)處理完畢后,頁(yè)面刷新,再回頭檢查是否刷新結(jié)果正確.使用Ajax,在點(diǎn)擊submit按鈕后,立刻進(jìn)行異步處理,并在頁(yè)面上快速顯示了更新后的結(jié)果,這里沒(méi)有整個(gè)頁(yè)面刷新的問(wèn)題.
2.深層次的樹(shù)的導(dǎo)航
深層次的級(jí)聯(lián)菜單(樹(shù))的遍歷是一項(xiàng)非常復(fù)雜的任務(wù),使用JavaScript來(lái)控制顯示邏輯,使用Ajax延遲加載更深層次的數(shù)據(jù)可以有效的減輕服務(wù)器的負(fù)擔(dān).
我們以前的對(duì)級(jí)聯(lián)菜單的處理多數(shù)是這樣的:
為了避免每次對(duì)菜單的操作引起的重載頁(yè)面,不采用每次調(diào)用后臺(tái)的方式,而是一次性將級(jí)聯(lián)菜單的所有數(shù)據(jù)全部讀取出來(lái)并寫(xiě)入數(shù)組,然后根據(jù)用戶(hù)的操作用 JavaScript來(lái)控制它的子集項(xiàng)目的呈現(xiàn),這樣雖然解決了操作響應(yīng)速度,不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請(qǐng)求的問(wèn)題,但是如果用戶(hù)不對(duì)菜單進(jìn)行 操作或只對(duì)菜單中的一部分進(jìn)行操作的話(huà),那讀取的數(shù)據(jù)中的一部分就會(huì)成為冗余數(shù)據(jù)而浪費(fèi)用戶(hù)的資源,特別是在菜單結(jié)構(gòu)復(fù)雜,數(shù)據(jù)量大的情況下(比如菜單有 很多級(jí),每一級(jí)菜又有上百個(gè)項(xiàng)目),這種弊端就更為突出.
如果在此案中應(yīng)用Ajax后,結(jié)果就會(huì)有所改觀:
在初始化頁(yè)面時(shí)我們只讀出它的第一級(jí)的所有數(shù)據(jù)并顯示,在用戶(hù)操作一級(jí)菜單其中一項(xiàng)時(shí),會(huì)通過(guò)Ajax向后臺(tái)請(qǐng)求當(dāng)前一級(jí)項(xiàng)目所屬的二級(jí)子菜單的所有數(shù)據(jù),如 果再繼續(xù)請(qǐng)求已經(jīng)呈現(xiàn)的二級(jí)菜單中的一項(xiàng)時(shí),再向后面請(qǐng)求所操作二級(jí)菜單項(xiàng)對(duì)應(yīng)的所有三級(jí)菜單的所有數(shù)據(jù),以此類(lèi)推……這樣,用什么就取什么,用多少就取 多少,就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi),減少了數(shù)據(jù)下載總量,而且更新頁(yè)面時(shí)不用重載全部?jī)?nèi)容,只更新需要更新的那部分即可,相對(duì)于后臺(tái)處理并重載的方式縮短了 用戶(hù)等待時(shí)間,也把對(duì)資源的浪費(fèi)降到最低.
3.快速的用戶(hù)與用戶(hù)間的交流響應(yīng)
在眾多人參與的交流討論的場(chǎng)景下,最不爽的事情就是讓用戶(hù)一遍又一遍刷新頁(yè)面以便知道是否有新的討論出現(xiàn).新的回復(fù)應(yīng)該以最快的速度顯示出來(lái),而把用戶(hù)從分神的刷新中解脫出來(lái),Ajax是最好的選擇.
4.類(lèi)似投票,yes/no等無(wú)關(guān)痛癢的場(chǎng)景
對(duì)于類(lèi)似這樣的場(chǎng)景中,如果提交過(guò)程需要達(dá)到40秒,很多的用戶(hù)就會(huì)直接忽略過(guò)去而不會(huì)參與,但是Ajax可以把時(shí)間控制在1秒之內(nèi),從而更多的用戶(hù)會(huì)加入進(jìn)來(lái).
5.對(duì)數(shù)據(jù)進(jìn)行過(guò)濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
對(duì)數(shù)據(jù)使用過(guò)濾器,按照時(shí)間排序,或者按照時(shí)間和名稱(chēng)排序,開(kāi)關(guān)過(guò)濾器等等.任何要求具備很高交互性數(shù)據(jù)操縱的場(chǎng)合都應(yīng)該用JavaScript,而不是用一系列的服務(wù)器請(qǐng)求來(lái)完成.在每次數(shù)據(jù)更新后,再對(duì)其進(jìn)行查找和處理需要耗費(fèi)較多的時(shí)間,而Ajax可以加速這個(gè)過(guò)程.
6.普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
在文本框等輸入表單中給予輸入提示,或者自動(dòng)完成,可以有效的改善用戶(hù)體驗(yàn),尤其是那些自動(dòng)完成的數(shù)據(jù)可能來(lái)自于服務(wù)器端的場(chǎng)合,Ajax是很好的選擇.
更多的可以搜索下 ajax適用場(chǎng)景... ^V^
舉報(bào)