行業動态

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

1) 浪費帶寬。本來(lái)網頁中隻需要(yào / yāo)一(yī / yì ／yí)部分内容、部分頁面需要(yào / yāo)與服務器交互, 局部更新。但是(shì)傳統做法需要(yào / yāo)整個(gè)頁面刷新, 從服務器重新下載返回一(yī / yì ／yí)個(gè)新的(de)頁面, 相當于(yú)把整個(gè)頁面重新從服務器傳輸一(yī / yì ／yí)次給客戶端;而(ér)第2次傳輸的(de)内容大(dà)部分都與第1次的(de)相同, 隻是(shì)很小的(de)部分有改動。單純通過傳統表單方式與服務器進行交互會浪費有限網絡帶寬與流量。

2) 交互響應速度慢。随着信息化發展、多媒體技術的(de)推廣, 很多網頁都是(shì)圖文并茂, 内容豐富, 一(yī / yì ／yí)個(gè)頁面也(yě)不(bù)小;當網絡速度相當固定時(shí), 重新返回整個(gè)圖文并茂的(de)頁面比隻返回網頁中内容發生了(le／liǎo)改變的(de)一(yī / yì ／yí)部分頁面速度會慢很多;并且每次用戶與服務器進行交互時(shí)都需要(yào / yāo)向服務器發送請求, 應用的(de)響應時(shí)間還依賴于(yú)服務器的(de)響應時(shí)間。

3) 用戶體驗效果差。特别是(shì)執行數據查詢動作時(shí), 在(zài)網頁頁面中發生改變的(de)可能是(shì)把數據查詢的(de)結果顯示出(chū)來(lái), 但傳統通過表單提交查詢請求, 然後返回一(yī / yì ／yí)個(gè)新的(de)頁面的(de)話, 整個(gè)頁面會産生抖動感, 用戶體驗性差。

2 AJAX技術在(zài)Web頁面制作中的(de)優點

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

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

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

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

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

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

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

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

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

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

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

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