DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax應用場景簡析
Ajax應用場景簡析
編輯:AJAX詳解     

AJax適用場景

1.表單驅動的交互

傳統的表單提交,在文本框輸入內容後,點擊按鈕,後台處理完畢後,頁面刷新,再回頭檢查是否刷新結果正確。使用AJax,在點擊sunmit按鈕後,立刻進行異步處理,並在頁面上快速顯示了更新後的結果,這裡沒有整個頁面刷新的問題。

2.深層次的樹的導航

深層次的級聯菜單(樹)的遍歷是一項非常復雜的任務,使用JavaScript來控制顯示邏輯,使用AJax延遲加載更深層次的數據可以有效的減輕服務器的負擔。

我們以前的對級聯菜單的處理多數是這樣的:

為了避免每次對菜單的操作引起的重載頁面,不采用每次調用後台的方式,而是一次性將級聯菜單的所有數據全部讀取出來並寫入數組,然後根據用戶的操作用 JavaScript來控制它的子集項目的呈現,這樣雖然解決了操作響應速度、不重載頁面以及避免向服務器頻繁發送請求的問題,但是如果用戶不對菜單進行 操作或只對菜單中的一部分進行操作的話,那讀取的數據中的一部分就會成為冗余數據而浪費用戶的資源,特別是在菜單結構復雜、數據量大的情況下(比如菜單有 很多級、每一級菜又有上百個項目),這種弊端就更為突出。

如果在此案中應用AJax後,結果就會有所改觀:

在初始化頁面時我們只讀出它的第一級的所有數據並顯示,在用戶操作一級菜單其中一項時,會通過AJax向後台請求當前一級項目所屬的二級子菜單的所有數據,如 果再繼續請求已經呈現的二級菜單中的一項時,再向後面請求所操作二級菜單項對應的所有三級菜單的所有數據,以此類推……這樣,用什麼就取什麼、用多少就取 多少,就不會有數據的冗余和浪費,減少了數據下載總量,而且更新頁面時不用重載全部內容,只更新需要更新的那部分即可,相對於後台處理並重載的方式縮短了 用戶等待時間,也把對資源的浪費降到最低。

3.快速的用戶與用戶間的交流響應

在眾多人參與的交流討論的場景下,最不爽的事情就是讓用戶一遍又一遍刷新頁面以便知道是否有新的討論出現。新的回復應該以最快的速度顯示出來,而把用戶從分神的刷新中解脫出來,AJax是最好的選擇。

4.類似投票、yes/no等無關痛癢的場景

對於類似這樣的場景中,如果提交過程需要達到40秒,很多的用戶就會直接忽略過去而不會參與,但是AJax可以把時間控制在1秒之內,從而更多的用戶會加入進來。

5.對數據進行過濾和操縱相關數據的場景

對數據使用過濾器,按照時間排序,或者按照時間和名稱排序,開關過濾器等等。任何要求具備很高交互性數據操縱的場合都應該用JavaScript,而不是用一系列的服務器請求來完成。在每次數據更新後,再對其進行查找和處理需要耗費較多的時間,而AJax可以加速這個過程。

6.普通的文本輸入提示和自動完成的場景

在文本框等輸入表單中給予輸入提示,或者自動完成,可以有效的改善用戶體驗,尤其是那些自動完成的數據可能來自於服務器端的場合,AJax是很好的選擇。

AJax不適用場景

1.部分簡單的表單

雖然表單提交可以從Ajax獲取最大的益處,但一個簡單的評論表單極少能從Ajax得到什麼明顯的改善。而一些較少用到的表單提交,AJax則幫不上什麼忙。

2.搜索

有些使用了AJax的搜索引擎如Start.com和Live.com不允許使用浏覽器的後退按鈕來查看前一次搜索的結果,這對已經養成搜索習慣的用戶來說是不可原諒的。

現在Dojo通過iframe來解決這個問題。

3.基本的導航

使用AJax來做站點內的導航是一個壞主意,為什麼不把時間放在讓系統程序作的更好上呢?

4.替換大量的文本

使用AJax可以實現頁面的局部刷新,但是如果頁面的每個部分都改變了,為什麼不重新做一次服務器請求呢?

5.對呈現的操縱

Ajax看起來像是一個純粹的UI技術,但事實上它不是。它實際上是一個數據同步、操縱和傳輸的技術。對於可維護的干淨的web應用,不使用AJax來控制頁面呈現是一個不錯的主意。JavaScript可以很簡單的處理XHMTL/Html/DOM,使用CSS規則就可以很好的表達數據顯示。

存在的問題

1.用Javascript作的AJax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事;

2.AJax的無刷新重載,由於頁面的變化沒有刷新重載那麼明顯,所以容易給用戶帶來困擾?D?D用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等;

3.中間過程不能被bookmark。解決方法:GoogleMaps通過在頁面上提供一個”link to this page”的辦法來解決。另外,還可以通過url鏈接中加無效的?^標記來解決,但還未驗證。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved