傳統(tǒng)網(wǎng)頁開發(fā)用戶與服務器進行交互是先讓用戶在form表單中輸入數(shù)據(jù), 然后向網(wǎng)頁服務器提交表單并發(fā)出一個交互請求, 此交互請求可能是數(shù)據(jù)查詢、數(shù)據(jù)更新等操作。當服務器收到用戶從客戶端發(fā)送過來的處理請求后, 將會做出相關(guān)處理后給用戶客戶端返回一個新的站點頁面。這樣做法會浪費很多帶寬, 因為在前后兩個站點頁面中的絕大部分HTML代碼都是完全相同。因為每次用戶在客戶端與服務器的交互都需要向服務器發(fā)送請求, 用戶請求的響應時間不但依賴于服務器的響應快慢、還依賴于網(wǎng)絡帶寬等因素。采用傳統(tǒng)技術(shù)讓網(wǎng)頁與服務器進行交互有如下幾個缺點。
1) 浪費帶寬。本來網(wǎng)頁中只需要一部分內(nèi)容、部分頁面需要與服務器交互, 局部更新。但是傳統(tǒng)做法需要整個頁面刷新, 從服務器重新下載返回一個新的頁面, 相當于把整個頁面重新從服務器傳輸一次給客戶端;而第2次傳輸?shù)膬?nèi)容大部分都與第1次的相同, 只是很小的部分有改動。單純通過傳統(tǒng)表單方式與服務器進行交互會浪費有限網(wǎng)絡帶寬與流量。
2) 交互響應速度慢。隨著信息化發(fā)展、多媒體技術(shù)的推廣, 很多網(wǎng)頁都是圖文并茂, 內(nèi)容豐富, 一個頁面也不小;當網(wǎng)絡速度相當固定時, 重新返回整個圖文并茂的頁面比只返回網(wǎng)頁中內(nèi)容發(fā)生了改變的一部分頁面速度會慢很多;并且每次用戶與服務器進行交互時都需要向服務器發(fā)送請求, 應用的響應時間還依賴于服務器的響應時間。
3) 用戶體驗效果差。特別是執(zhí)行數(shù)據(jù)查詢動作時, 在網(wǎng)頁頁面中發(fā)生改變的可能是把數(shù)據(jù)查詢的結(jié)果顯示出來, 但傳統(tǒng)通過表單提交查詢請求, 然后返回一個新的頁面的話, 整個頁面會產(chǎn)生抖動感, 用戶體驗性差。
2 AJAX技術(shù)在Web頁面制作中的優(yōu)點
AJAX是英文字母“Asynchronous Java Script”和“XML”縮寫, 直譯是“異步Java Script”和“XML”。AJAX技術(shù)一種比較新穎、成熟、實用的技術(shù), 也是一種創(chuàng)建快速交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)。AJAX技術(shù)是通過在后臺與服務器進行少量數(shù)據(jù)交換實現(xiàn)用戶在客戶端與服務器交互的需要。
1) AJAX是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。傳統(tǒng)的網(wǎng)頁如果不使用AJAX技術(shù)進行更新內(nèi)容, 必須重載整個網(wǎng)頁面;而采用AJAX技術(shù)與服務器交互只需向服務器發(fā)送請求并取回必需的那部分數(shù)據(jù)。它通過借助SOAP或基于XML的web service應用接口, 并在客戶端結(jié)合Java Script技術(shù)以處理從服務器返回的響應;所以在服務器與客戶端瀏覽器之間交換的數(shù)據(jù)大大減少, 不像傳統(tǒng)技術(shù)那樣需要重新把頁面?zhèn)鬏斠淮? 所以用戶在客戶端瀏覽器就能更快地看到系統(tǒng)的響應。
2) 異步傳輸模式。AJAX使用異步方式與服務器通信, 即用戶不需要打斷在客戶端的操作, 即可實現(xiàn)與服務器交互、數(shù)據(jù)傳遞等操作, 具有更加快速的響應能力。
3) 可以減輕服務器負擔。AJAX可以把之前一部分需要在服務器上執(zhí)行的操作代碼轉(zhuǎn)移到客戶端執(zhí)行, 利用客戶端電腦閑置的資源來處理, 起到減輕服務器負擔并且節(jié)約網(wǎng)絡傳輸帶寬的作用;從而減輕Web服務器的負擔, AJAX技術(shù)與服務器交互的原則是“按需取數(shù)”, 可以大大減少冗余請求, 從而提供服務器響應速度。
4) 用戶體驗效果好。采用AJAX的最大優(yōu)點, 是能在不刷新、也不更新整個頁面的前提下維護局部數(shù)據(jù), 完成用戶與服務器交互過程。這使得Web應用程序能更快捷地對用戶請求做出相應的響應動作, 同時減少了在網(wǎng)絡上傳輸那些沒有改變過的數(shù)據(jù), 節(jié)約了網(wǎng)絡帶寬。有了AJAX這種技術(shù), 當用戶在客戶端需要與服務器進行交換時, AJAX可以快捷地執(zhí)行服務器操作, 并悄悄地返回執(zhí)行操作結(jié)果, 然后把執(zhí)行結(jié)果顯示在網(wǎng)頁中, 整個網(wǎng)頁不會有抖動感。
5) Web應用開發(fā)更容易。有了AJAX為Web應用程序開發(fā)注入了新的魅力、新的活力, Web應用開發(fā)效率更加高。比如要開發(fā)一個類似QQ聊天工具的Web應用程序, 不需要安裝額外應用程序, 直接在IE瀏覽器上執(zhí)行, 只依靠傳統(tǒng)表單form、JS、CSS技術(shù)是比較難實現(xiàn), 而且開發(fā)效率很低。有了AJAX之后, 比如檢測用戶有沒有新加的好友、有沒有新的信息、好友查找等功能實現(xiàn)起來很簡單, 而且開發(fā)出來類似Web應用程序用戶體驗性很好。
3 使用AJAX技術(shù)讓Web頁面更輕便、更精致、用戶體驗效果更好
利用AJAX頁面不刷新技術(shù)與異步傳輸模式, 可以開發(fā)出高效的、交互的、似桌面應用軟件的Web應用程序, 隨著JS語言以及應用開發(fā)框架技術(shù)成熟, AJAX技術(shù)將在Web應用開發(fā)發(fā)揮越來越重要的角色, 讓程序設(shè)計者能開發(fā)出更加輕便、更高品質(zhì)、更高技術(shù)含量的Web應用系統(tǒng)。
1) AJAX解決問題的原理。AJAX通過與開發(fā)語言 (如ASP.NET、PHP、JSP) 結(jié)合起來, 并嵌入Web頁面中, 實現(xiàn)Web頁面的局部更新功能, 把整個頁面中部分需要與服務器交換的功能代碼放置在AJAX代碼中, 避免傳統(tǒng)才用表單form方法把整個頁面提交到服務器, 然后把整個頁面重新加載, 實現(xiàn)節(jié)省帶寬、網(wǎng)絡資源。
2) 使用ASP.NET進行開發(fā)電子商務實訓系統(tǒng), 廣泛采用了AJAX技術(shù)處理用戶與系統(tǒng)的交換, 比如商城用戶注冊時需要用戶進行手機驗證, 筆者將用戶從服務器獲取“手機驗證代碼”請求編寫成AJAX, 在用戶點擊按鈕“獲取短信驗證碼”后, 頁面將會靜悄悄地通過AJAX與后臺服務器進行交互, 生成6位數(shù)字的手機驗證以短信形式發(fā)送到用戶手機上, 整個過程中用戶不需要進行頁面跳轉(zhuǎn)、不需要頁面刷新、也不需要表單提交就在手機上收到了“手機短信驗證碼”。
3) 在開發(fā)商城用戶注冊過程頁面中, 手機驗證通過AJAX技術(shù)讓頁面從服務器ASP.NET動態(tài)腳本以實現(xiàn)獲取;本頁面中當用戶輸入手機號碼完畢后頁面則馬上通過Java Script (簡稱JS) 觸發(fā)AJAX, 將發(fā)送http請求到服務器驗證輸入的手機號碼是否被使用過, 服務器收到請求后調(diào)用ASP.NET動態(tài)腳本到數(shù)據(jù)庫中查找此手機號碼是否被注冊過, 把處理結(jié)果以響應形式返回給客戶端, 若被使用發(fā)出警告提醒用戶輸入別的手機號碼。
4)  AJAX能讓用戶與服務器進行交互時頁面顯得很輕便。AJAX能在不更新整個頁面的情況, 與服務器進行數(shù)據(jù)交換, 比如在修改商城系統(tǒng)用戶密碼時, 采用傳統(tǒng)技術(shù)提交修改用戶密碼頁面時, 用監(jiān)測工具可測出加載整個頁面的流量大概需要5KB, 但用AJAX技術(shù), 只要傳輸密碼文本給服務器, 不需要傳輸頁面圖片、表單、表格等頁面數(shù)據(jù), 僅需要0.3KB流量就能快速地完成與遠端服務器的交互, 實現(xiàn)客戶端與服務器實現(xiàn)精準交互。AJAX讓用戶在客戶端與服務器交互效率提高、服務器反饋及時、用戶體驗效果更好。