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