Ajax適用場(chǎng)景

zouba

Ajax已經(jīng)成為大型網(wǎng)站所必有的技術(shù)。Ajax在網(wǎng)站的各個(gè)場(chǎng)景中，都可以看到。例如，
校友錄的登錄借口；
Google輸入關(guān)鍵字的文本框；
各大論壇上自動(dòng)驗(yàn)證用戶輸入的數(shù)據(jù)的文本框。

總起來，可以大致歸納為以下幾類：

1．表單驅(qū)動(dòng)的交互

傳統(tǒng)的表單提交，在文本框輸入內(nèi)容后，點(diǎn)擊按鈕，后臺(tái)處理完畢后，頁面刷新，再回頭檢查是否刷新結(jié)果正確。使用Ajax，在點(diǎn)擊sunmit按鈕后，立刻進(jìn)行異步處理，并在頁面上快速顯示了更新后的結(jié)果，這里沒有整個(gè)頁面刷新的問題。例如校友錄登錄就是使用使用這種方式。

2．深層次的樹的導(dǎo)航

深層次的級(jí)聯(lián)菜單（樹）的遍歷是一項(xiàng)非常復(fù)雜的任務(wù)，使用JavaScript來控制顯示邏輯，使用Ajax延遲加載更深層次的數(shù)據(jù)可以有效的減輕服務(wù)器的負(fù)擔(dān)。以前的對(duì)級(jí)聯(lián)菜單的處理多數(shù)是這樣的：為了避免每次對(duì)菜單的操作引起的重載頁面，不采用每次調(diào)用后臺(tái)的方式，而是一次性將級(jí)聯(lián)菜單的所有數(shù)據(jù)全部讀取出來并寫入數(shù)組，然后根據(jù)用戶的操作用JavaScript來控制它的子集項(xiàng)目的呈現(xiàn)，這樣雖然解決了操作響應(yīng)速度、不重載頁面以及避免向服務(wù)器頻繁發(fā)送請(qǐng)求的問題，但是如果用戶不對(duì)菜單進(jìn)行 操作或只對(duì)菜單中的一部分進(jìn)行操作的話，那讀取的數(shù)據(jù)中的一部分就會(huì)成為冗余數(shù)據(jù)而浪費(fèi)用戶的資源，特別是在菜單結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的情況下（比如菜單有 很多級(jí)、每一級(jí)菜又有上百個(gè)項(xiàng)目），這種弊端就更為突出。
如果在此案中應(yīng)用Ajax后，結(jié)果就會(huì)有所改觀：在初始化頁面時(shí)我們只讀出它的第一級(jí)的所有數(shù)據(jù)并顯示，在用戶操作一級(jí)菜單其中一項(xiàng)時(shí)，會(huì)通過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ù)，以此類推……這樣，用什么就取什么、用多少就取 多少，就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁面時(shí)不用重載全部?jī)?nèi)容，只更新需要更新的那部分即可，相對(duì)于后臺(tái)處理并重載的方式縮短了用戶等待時(shí)間，也把對(duì)資源的浪費(fèi)降到最低。例如Google的首頁，收入不同的關(guān)鍵詞，就會(huì)自動(dòng)提示響應(yīng)的關(guān)鍵字。

3．快速的用戶與用戶間的交流響應(yīng)
在眾多人參與的交流討論的場(chǎng)景下，最不爽的事情就是讓用戶一遍又一遍刷新頁面以便知道是否有新的討論出現(xiàn)。新的回復(fù)應(yīng)該以最快的速度顯示出來，而把用戶從分神的刷新中解脫出來，Ajax是最好的選擇。

4．類似投票、yes/no等無關(guān)痛癢的場(chǎng)景
對(duì)于類似這樣的場(chǎng)景中，如果提交過程需要達(dá)到40秒，很多的用戶就會(huì)直接忽略過去而不會(huì)參與，但是Ajax可以把時(shí)間控制在1秒之內(nèi)，從而更多的用戶會(huì)加入進(jìn)來。

5．對(duì)數(shù)據(jù)進(jìn)行過濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
對(duì)數(shù)據(jù)使用過濾器，按照時(shí)間排序，或者按照時(shí)間和名稱排序，開關(guān)過濾器等等。任何要求具備很高交互性數(shù)據(jù)操縱的場(chǎng)合都應(yīng)該用JavaScript，而不是用一系列的服務(wù)器請(qǐng)求來完成。在每次數(shù)據(jù)更新后，再對(duì)其進(jìn)行查找和處理需要耗費(fèi)較多的時(shí)間，而Ajax可以加速這個(gè)過程。例如，新浪的郵箱就是采用了這些技術(shù)。

6．普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
在文本框等輸入表單中給予輸入提示，或者自動(dòng)完成，可以有效的改善用戶體驗(yàn)，尤其是那些自動(dòng)完成的數(shù)據(jù)可能來自于服務(wù)器端的場(chǎng)合，Ajax是很好的選擇。這一點(diǎn)，Google做的最好。大家到Google的首頁輸入關(guān)鍵字，就會(huì)發(fā)現(xiàn)其優(yōu)點(diǎn)。