Ajax技術適用場景、不適用場景、存在的問題
阿新 • • 發佈:2019-02-17
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連結中加無效的?^標記來解決,但還未驗證。
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連結中加無效的?^標記來解決,但還未驗證。