行(xíng)業動态

傳統網頁開(kāi)發用戶與服務器(qì)進行(xíng)交互是先讓用戶在form表單中輸入數(shù)據, 然後向網頁服務器(qì)提交表單并發出一個(gè)交互請(qǐng)求, 此交互請(qǐng)求可(kě)能是數(shù)據查詢、數(shù)據更新等操作(zuò)。當服務器(qì)收到用戶從客戶端發送過來(lái)的處理(lǐ)請(qǐng)求後, 将會(huì)做(zuò)出相關處理(lǐ)後給用戶客戶端返回一個(gè)新的站(zhàn)點頁面。這樣做(zuò)法會(huì)浪費很(hěn)多(duō)帶寬, 因為(wèi)在前後兩個(gè)站(zhàn)點頁面中的絕大(dà)部分HTML代碼都是完全相同。因為(wèi)每次用戶在客戶端與服務器(qì)的交互都需要向服務器(qì)發送請(qǐng)求, 用戶請(qǐng)求的響應時(shí)間(jiān)不但(dàn)依賴于服務器(qì)的響應快慢、還(hái)依賴于網絡帶寬等因素。采用傳統技(jì)術(shù)讓網頁與服務器(qì)進行(xíng)交互有(yǒu)如下幾個(gè)缺點。

1) 浪費帶寬。本來(lái)網頁中隻需要一部分內(nèi)容、部分頁面需要與服務器(qì)交互, 局部更新。但(dàn)是傳統做(zuò)法需要整個(gè)頁面刷新, 從服務器(qì)重新下載返回一個(gè)新的頁面, 相當于把整個(gè)頁面重新從服務器(qì)傳輸一次給客戶端;而第2次傳輸的內(nèi)容大(dà)部分都與第1次的相同, 隻是很(hěn)小(xiǎo)的部分有(yǒu)改動。單純通(tōng)過傳統表單方式與服務器(qì)進行(xíng)交互會(huì)浪費有(yǒu)限網絡帶寬與流量。

2) 交互響應速度慢。随着信息化發展、多(duō)媒體(tǐ)技(jì)術(shù)的推廣, 很(hěn)多(duō)網頁都是圖文并茂, 內(nèi)容豐富, 一個(gè)頁面也不小(xiǎo);當網絡速度相當固定時(shí), 重新返回整個(gè)圖文并茂的頁面比隻返回網頁中內(nèi)容發生(shēng)了改變的一部分頁面速度會(huì)慢很(hěn)多(duō);并且每次用戶與服務器(qì)進行(xíng)交互時(shí)都需要向服務器(qì)發送請(qǐng)求, 應用的響應時(shí)間(jiān)還(hái)依賴于服務器(qì)的響應時(shí)間(jiān)。

3) 用戶體(tǐ)驗效果差。特别是執行(xíng)數(shù)據查詢動作(zuò)時(shí), 在網頁頁面中發生(shēng)改變的可(kě)能是把數(shù)據查詢的結果顯示出來(lái), 但(dàn)傳統通(tōng)過表單提交查詢請(qǐng)求, 然後返回一個(gè)新的頁面的話(huà), 整個(gè)頁面會(huì)産生(shēng)抖動感, 用戶體(tǐ)驗性差。

2 AJAX技(jì)術(shù)在Web頁面制(zhì)作(zuò)中的優點

AJAX是英文字母“Asynchronous Java Script”和(hé)“XML”縮寫, 直譯是“異步Java Script”和(hé)“XML”。AJAX技(jì)術(shù)一種比較新穎、成熟、實用的技(jì)術(shù), 也是一種創建快速交互式網頁應用的網頁開(kāi)發技(jì)術(shù)。AJAX技(jì)術(shù)是通(tōng)過在後台與服務器(qì)進行(xíng)少(shǎo)量數(shù)據交換實現用戶在客戶端與服務器(qì)交互的需要。

1) AJAX是一種用于創建快速動态網頁的技(jì)術(shù)。傳統的網頁如果不使用AJAX技(jì)術(shù)進行(xíng)更新內(nèi)容, 必須重載整個(gè)網頁面;而采用AJAX技(jì)術(shù)與服務器(qì)交互隻需向服務器(qì)發送請(qǐng)求并取回必需的那(nà)部分數(shù)據。它通(tōng)過借助SOAP或基于XML的web service應用接口, 并在客戶端結合Java Script技(jì)術(shù)以處理(lǐ)從服務器(qì)返回的響應;所以在服務器(qì)與客戶端浏覽器(qì)之間(jiān)交換的數(shù)據大(dà)大(dà)減少(shǎo), 不像傳統技(jì)術(shù)那(nà)樣需要重新把頁面傳輸一次, 所以用戶在客戶端浏覽器(qì)就能更快地看到系統的響應。

2) 異步傳輸模式。AJAX使用異步方式與服務器(qì)通(tōng)信, 即用戶不需要打斷在客戶端的操作(zuò), 即可(kě)實現與服務器(qì)交互、數(shù)據傳遞等操作(zuò), 具有(yǒu)更加快速的響應能力。

3) 可(kě)以減輕服務器(qì)負擔。AJAX可(kě)以把之前一部分需要在服務器(qì)上(shàng)執行(xíng)的操作(zuò)代碼轉移到客戶端執行(xíng), 利用客戶端電(diàn)腦(nǎo)閑置的資源來(lái)處理(lǐ), 起到減輕服務器(qì)負擔并且節約網絡傳輸帶寬的作(zuò)用;從而減輕Web服務器(qì)的負擔, AJAX技(jì)術(shù)與服務器(qì)交互的原則是“按需取數(shù)”, 可(kě)以大(dà)大(dà)減少(shǎo)冗餘請(qǐng)求, 從而提供服務器(qì)響應速度。

4) 用戶體(tǐ)驗效果好。采用AJAX的最大(dà)優點, 是能在不刷新、也不更新整個(gè)頁面的前提下維護局部數(shù)據, 完成用戶與服務器(qì)交互過程。這使得(de)Web應用程序能更快捷地對用戶請(qǐng)求做(zuò)出相應的響應動作(zuò), 同時(shí)減少(shǎo)了在網絡上(shàng)傳輸那(nà)些(xiē)沒有(yǒu)改變過的數(shù)據, 節約了網絡帶寬。有(yǒu)了AJAX這種技(jì)術(shù), 當用戶在客戶端需要與服務器(qì)進行(xíng)交換時(shí), AJAX可(kě)以快捷地執行(xíng)服務器(qì)操作(zuò), 并悄悄地返回執行(xíng)操作(zuò)結果, 然後把執行(xíng)結果顯示在網頁中, 整個(gè)網頁不會(huì)有(yǒu)抖動感。

5) Web應用開(kāi)發更容易。有(yǒu)了AJAX為(wèi)Web應用程序開(kāi)發注入了新的魅力、新的活力, Web應用開(kāi)發效率更加高(gāo)。比如要開(kāi)發一個(gè)類似QQ聊天工具的Web應用程序, 不需要安裝額外應用程序, 直接在IE浏覽器(qì)上(shàng)執行(xíng), 隻依靠傳統表單form、JS、CSS技(jì)術(shù)是比較難實現, 而且開(kāi)發效率很(hěn)低(dī)。有(yǒu)了AJAX之後, 比如檢測用戶有(yǒu)沒有(yǒu)新加的好友(yǒu)、有(yǒu)沒有(yǒu)新的信息、好友(yǒu)查找等功能實現起來(lái)很(hěn)簡單, 而且開(kāi)發出來(lái)類似Web應用程序用戶體(tǐ)驗性很(hěn)好。

3 使用AJAX技(jì)術(shù)讓Web頁面更輕便、更精緻、用戶體(tǐ)驗效果更好

利用AJAX頁面不刷新技(jì)術(shù)與異步傳輸模式, 可(kě)以開(kāi)發出高(gāo)效的、交互的、似桌面應用軟件的Web應用程序, 随着JS語言以及應用開(kāi)發框架技(jì)術(shù)成熟, AJAX技(jì)術(shù)将在Web應用開(kāi)發發揮越來(lái)越重要的角色, 讓程序設計(jì)者能開(kāi)發出更加輕便、更高(gāo)品質、更高(gāo)技(jì)術(shù)含量的Web應用系統。

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

2) 使用ASP.NET進行(xíng)開(kāi)發電(diàn)子商務實訓系統, 廣泛采用了AJAX技(jì)術(shù)處理(lǐ)用戶與系統的交換, 比如商城用戶注冊時(shí)需要用戶進行(xíng)手機驗證, 筆者将用戶從服務器(qì)獲取“手機驗證代碼”請(qǐng)求編寫成AJAX, 在用戶點擊按鈕“獲取短(duǎn)信驗證碼”後, 頁面将會(huì)靜悄悄地通(tōng)過AJAX與後台服務器(qì)進行(xíng)交互, 生(shēng)成6位數(shù)字的手機驗證以短(duǎn)信形式發送到用戶手機上(shàng), 整個(gè)過程中用戶不需要進行(xíng)頁面跳(tiào)轉、不需要頁面刷新、也不需要表單提交就在手機上(shàng)收到了“手機短(duǎn)信驗證碼”。

3) 在開(kāi)發商城用戶注冊過程頁面中, 手機驗證通(tōng)過AJAX技(jì)術(shù)讓頁面從服務器(qì)ASP.NET動态腳本以實現獲取;本頁面中當用戶輸入手機号碼完畢後頁面則馬上(shàng)通(tōng)過Java Script (簡稱JS) 觸發AJAX, 将發送http請(qǐng)求到服務器(qì)驗證輸入的手機号碼是否被使用過, 服務器(qì)收到請(qǐng)求後調用ASP.NET動态腳本到數(shù)據庫中查找此手機号碼是否被注冊過, 把處理(lǐ)結果以響應形式返回給客戶端, 若被使用發出警告提醒用戶輸入别的手機号碼。

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