行業動態AJAX技術讓Web信息系統的頁面更輕便

發布：2019-03-09 13:52:14 瀏覽：5321

傳統網頁開發用戶與服務器進行交互是先讓用戶在form表單中輸入數據,然后向網頁服務器提交表單并發出一個交互請求,此交互請求可能是數據查詢、數據更新等操作。當服務器收到用戶從客戶端發送過來的處理請求后,將會做出相關處理后給用戶客戶端返回一個新的站點頁面。這樣做法會浪費很多帶寬,因為在前后兩個站點頁面中的絕大部分HTML代碼都是完全相同。因為每次用戶在客戶端與服務器的交互都需要向服務器發送請求,用戶請求的響應時間不但依賴于服務器的響應快慢、還依賴于網絡帶寬等因素。采用傳統技術讓網頁與服務器進行交互有如下幾個缺點。

1)浪費帶寬。本來網頁中只需要一部分內容、部分頁面需要與服務器交互,局部更新。但是傳統做法需要整個頁面刷新,從服務器重新下載返回一個新的頁面,相當于把整個頁面重新從服務器傳輸一次給客戶端;而第2次傳輸的內容大部分都與第1次的相同,只是很小的部分有改動。單純通過傳統表單方式與服務器進行交互會浪費有限網絡帶寬與流量。

2)交互響應速度慢。隨著信息化發展、多媒體技術的推廣,很多網頁都是圖文并茂,內容豐富,一個頁面也不小;當網絡速度相當固定時,重新返回整個圖文并茂的頁面比只返回網頁中內容發生了改變的一部分頁面速度會慢很多;并且每次用戶與服務器進行交互時都需要向服務器發送請求,應用的響應時間還依賴于服務器的響應時間。

3)用戶體驗效果差。特別是執行數據查詢動作時,在網頁頁面中發生改變的可能是把數據查詢的結果顯示出來,但傳統通過表單提交查詢請求,然后返回一個新的頁面的話,整個頁面會產生抖動感,用戶體驗性差。

2AJAX技術在Web頁面制作中的優點

AJAX是英文字母“AsynchronousJavaScript”和“XML”縮寫,直譯是“異步JavaScript”和“XML”。AJAX技術一種比較新穎、成熟、實用的技術,也是一種創建快速交互式網頁應用的網頁開發技術。AJAX技術是通過在后臺與服務器進行少量數據交換實現用戶在客戶端與服務器交互的需要。

1)AJAX是一種用于創建快速動態網頁的技術。傳統的網頁如果不使用AJAX技術進行更新內容,必須重載整個網頁面;而采用AJAX技術與服務器交互只需向服務器發送請求并取回必需的那部分數據。它通過借助SOAP或基于XML的webservice應用接口,并在客戶端結合JavaScript技術以處理從服務器返回的響應;所以在服務器與客戶端瀏覽器之間交換的數據大大減少,不像傳統技術那樣需要重新把頁面傳輸一次,所以用戶在客戶端瀏覽器就能更快地看到系統的響應。

2)異步傳輸模式。AJAX使用異步方式與服務器通信,即用戶不需要打斷在客戶端的操作,即可實現與服務器交互、數據傳遞等操作,具有更加快速的響應能力。

3)可以減輕服務器負擔。AJAX可以把之前一部分需要在服務器上執行的操作代碼轉移到客戶端執行,利用客戶端電腦閑置的資源來處理,起到減輕服務器負擔并且節約網絡傳輸帶寬的作用;從而減輕Web服務器的負擔,AJAX技術與服務器交互的原則是“按需取數”,可以大大減少冗余請求,從而提供服務器響應速度。

4)用戶體驗效果好。采用AJAX的最大優點,是能在不刷新、也不更新整個頁面的前提下維護局部數據,完成用戶與服務器交互過程。這使得Web應用程序能更快捷地對用戶請求做出相應的響應動作,同時減少了在網絡上傳輸那些沒有改變過的數據,節約了網絡帶寬。有了AJAX這種技術,當用戶在客戶端需要與服務器進行交換時,AJAX可以快捷地執行服務器操作,并悄悄地返回執行操作結果,然后把執行結果顯示在網頁中,整個網頁不會有抖動感。

5)Web應用開發更容易。有了AJAX為Web應用程序開發注入了新的魅力、新的活力,Web應用開發效率更加高。比如要開發一個類似QQ聊天工具的Web應用程序,不需要安裝額外應用程序,直接在IE瀏覽器上執行,只依靠傳統表單form、JS、CSS技術是比較難實現,而且開發效率很低。有了AJAX之后,比如檢測用戶有沒有新加的好友、有沒有新的信息、好友查找等功能實現起來很簡單,而且開發出來類似Web應用程序用戶體驗性很好。

3使用AJAX技術讓Web頁面更輕便、更精致、用戶體驗效果更好

利用AJAX頁面不刷新技術與異步傳輸模式,可以開發出高效的、交互的、似桌面應用軟件的Web應用程序,隨著JS語言以及應用開發框架技術成熟,AJAX技術將在Web應用開發發揮越來越重要的角色,讓程序設計者能開發出更加輕便、更高品質、更高技術含量的Web應用系統。

1)AJAX解決問題的原理。AJAX通過與開發語言(如ASP.NET、PHP、JSP)結合起來,并嵌入Web頁面中,實現Web頁面的局部更新功能,把整個頁面中部分需要與服務器交換的功能代碼放置在AJAX代碼中,避免傳統才用表單form方法把整個頁面提交到服務器,然后把整個頁面重新加載,實現節省帶寬、網絡資源。

2)使用ASP.NET進行開發電子商務實訓系統,廣泛采用了AJAX技術處理用戶與系統的交換,比如商城用戶注冊時需要用戶進行手機驗證,筆者將用戶從服務器獲取“手機驗證代碼”請求編寫成AJAX,在用戶點擊按鈕“獲取短信驗證碼”后,頁面將會靜悄悄地通過AJAX與后臺服務器進行交互,生成6位數字的手機驗證以短信形式發送到用戶手機上,整個過程中用戶不需要進行頁面跳轉、不需要頁面刷新、也不需要表單提交就在手機上收到了“手機短信驗證碼”。

3)在開發商城用戶注冊過程頁面中,手機驗證通過AJAX技術讓頁面從服務器ASP.NET動態腳本以實現獲取;本頁面中當用戶輸入手機號碼完畢后頁面則馬上通過JavaScript(簡稱JS)觸發AJAX,將發送http請求到服務器驗證輸入的手機號碼是否被使用過,服務器收到請求后調用ASP.NET動態腳本到數據庫中查找此手機號碼是否被注冊過,把處理結果以響應形式返回給客戶端,若被使用發出警告提醒用戶輸入別的手機號碼。

4)AJAX能讓用戶與服務器進行交互時頁面顯得很輕便。AJAX能在不更新整個頁面的情況,與服務器進行數據交換,比如在修改商城系統用戶密碼時,采用傳統技術提交修改用戶密碼頁面時,用監測工具可測出加載整個頁面的流量大概需要5KB,但用AJAX技術,只要傳輸密碼文本給服務器,不需要傳輸頁面圖片、表單、表格等頁面數據,僅需要0.3KB流量就能快速地完成與遠端服務器的交互,實現客戶端與服務器實現精準交互。AJAX讓用戶在客戶端與服務器交互效率提高、服務器反饋及時、用戶體驗效果更好。