Ajax應用方面的一些補充

來源:互聯網
上載者:User
ajax

  Ajax理念的出現,揭開了無重新整理更新頁面時代的序幕,並有代替傳統web開發中採用form(表單)遞交方式更新web頁面的趨勢,可以算是一個裡程碑。但Ajax都不是適用於所有地方的,它的適用範圍是由它的特性所決定的。通過我這幾天對Ajax學習後的瞭解覺得它的特性主要有2點:

  1、按需取資料。頁面不讀取無用的冗餘資料,而是在使用者操作過程中的某項互動需要某部分資料時才會向伺服器發送請求。

  2、無重新整理更新頁面。用戶端利用XMLHTTP發送請求得到服務端應答資料,在不重新載入整個頁面的情況下用JavaScript操作DOM最終更新頁面。

  3、預讀功能也可以通過Ajax實現,但並不是Ajax的優勢所在,它的主要優勢還是在互動方面。

  Ajax帶來的正面效果:

  1、減輕伺服器的負擔。因為Ajax的根本理念是“按需取資料”,所以最大可能在減少了冗餘請求和響影對伺服器造成的負擔。

  2、減少使用者實際和心理等待時間。

  首先,“按需取資料”的模式減少了資料的實際讀取量,打個很形象的比方,如果說重載的方式是從一個終點回到原點再到另一個終點的話,那麼Ajax就是以一個終點為基點到達另一個終點;
  其次,即使要讀取比較大的資料,也不用像RELOAD一樣出現白屏的情況,由於Ajax是用XMLHTTP發送請求得到服務端應答資料,在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面的,所以在讀取資料的過程中,使用者所面對的也不是白屏,而是原來的頁面狀態(或者可以加一個LOADING的提示框讓使用者瞭解資料讀取的狀態),只有當接收到全部資料後才更新相應部分的內容,而這種更新也是瞬間的,使用者幾乎感覺不到。總之使用者是很敏感的,他們能感覺到你對他們的體貼,雖然不太可能立竿見影的效果,但會在使用者的心中一點一滴的積累他們對網站的依賴。

  舉個應用的例子,慶祥提的一個建議很適合Ajax,是關於串聯功能表方面的Ajax應用。


  我們以前的對串聯功能表的處理是這樣的:

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

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

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



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.