[摘 要] AJAX是一種新興的Web表示層技術(shù)， 利用它可以構(gòu)建動(dòng)態(tài)、快速和靈活的Web應(yīng)用程序。首先介紹了AJAX 的工作原理，并闡明了AJAX技術(shù)在Web應(yīng)用的獨(dú)特優(yōu)勢(shì)，最后探討了創(chuàng)建基于AJAX電子商務(wù)網(wǎng)站應(yīng)用程序的關(guān)鍵技術(shù)。

[關(guān)鍵詞] AJAX XMLHttpRequest JavaScript XML 電子商務(wù)

一、AJAX技術(shù)概述

AJAX是Asynchronous JavaScript and XML的簡(jiǎn)稱，它不是一項(xiàng)新的技術(shù)，而是多種技術(shù)的綜合，或者是設(shè)計(jì)方式，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技術(shù)。

傳統(tǒng)的Web應(yīng)用采用同步交互過(guò)程，這種情況下，用戶首先向Web服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后Web服務(wù)器根據(jù)用戶請(qǐng)求的內(nèi)容，執(zhí)行相應(yīng)的任務(wù)，并向用戶返回結(jié)果，這是一種不連貫的用戶體驗(yàn)，在服務(wù)器處理請(qǐng)求時(shí)，用戶就只能等待著，此時(shí)瀏覽器顯示的頁(yè)面是空白的。與傳統(tǒng)的Web應(yīng)用不同，AJAX采用了異步交互的方式。它在用戶和服務(wù)器之間引入了一個(gè)中間媒介，從而改變了同步交互過(guò)程中的“處理-等待-處理-等待”模式。AJAX帶來(lái)的好處主要有以下幾方面:

1.減輕服務(wù)器負(fù)擔(dān)。

2.不刷新整個(gè)頁(yè)面，在頁(yè)面內(nèi)與服務(wù)器通信;

3.使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力;

4.基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序;

5.進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)與數(shù)據(jù)的分離;

6.帶來(lái)更好的用戶體驗(yàn)。

二、AJAX技術(shù)在電子商務(wù)網(wǎng)站開(kāi)發(fā)中的應(yīng)用

電子商務(wù)網(wǎng)站是大眾經(jīng)常接觸的Web應(yīng)用，AJAX技術(shù)在建設(shè)電子商務(wù)網(wǎng)站中也能發(fā)揮很大作用，具體有以下方面應(yīng)用:

1.用戶注冊(cè)或數(shù)據(jù)驗(yàn)證

傳統(tǒng)的方法是在用戶填寫完注冊(cè)數(shù)據(jù)后，提交的結(jié)果是一個(gè)新頁(yè)面，要么顯示提交成功，要么出現(xiàn)重名要求重新填寫。如果注冊(cè)項(xiàng)目很多， 失敗的注冊(cè)將引起用戶較長(zhǎng)時(shí)間來(lái)等待頁(yè)面刷新。如果采用AJAX技術(shù)可以很好地解決這個(gè)問(wèn)題。用戶填寫好登錄名后，一旦輸入文本框失去焦點(diǎn)，該事件的處理函數(shù)就會(huì)通過(guò)AJAX調(diào)用來(lái)檢查用戶填寫的登錄名是否存在重復(fù)，用戶可以繼續(xù)填寫其它的注冊(cè)項(xiàng)，在這個(gè)過(guò)程中，網(wǎng)絡(luò)上傳輸?shù)闹皇巧倭康奈谋酒?，如用戶填寫的登錄名和服?wù)器端返回的消息等，因而響應(yīng)速度很快。

2.商品展示

電子商務(wù)網(wǎng)站需要展示待交易商品的各項(xiàng)信息，一般可以通過(guò)文字、圖片、視頻等來(lái)表現(xiàn)。AJAX技術(shù)在這方面有很多的應(yīng)用， 比如對(duì)于商品的分類顯示可以采用基于AJAX的動(dòng)態(tài)樹(shù)型結(jié)構(gòu)， 這種結(jié)構(gòu)在進(jìn)行顯示、展開(kāi)、添加、修改和刪除等操作時(shí)，不會(huì)引起頁(yè)面重載，而且只在需要時(shí)才去請(qǐng)求數(shù)據(jù)庫(kù)，進(jìn)行數(shù)據(jù)加載，不僅速度很快，而且大大減少了服務(wù)器端的負(fù)擔(dān)。

3.交互過(guò)程

現(xiàn)在的電子商務(wù)網(wǎng)站提倡個(gè)性化，十分注意滿足用戶的需求，因此也非常關(guān)注同用戶的交互過(guò)程?；贏JAX的購(gòu)物車相對(duì)傳統(tǒng)的購(gòu)物車系統(tǒng)可以更快獲得服務(wù)器端的響應(yīng)，比如用戶的訂購(gòu)數(shù)超過(guò)庫(kù)存的錯(cuò)誤消息不用等到用戶提交頁(yè)面才知道。其次是用戶的意見(jiàn)反饋，通常是采用留言簿或討論區(qū)的方式，可以利用AJAX技術(shù)設(shè)計(jì)出反應(yīng)異常靈敏的客戶留言簿或討論區(qū)。

4.智能數(shù)據(jù)聯(lián)動(dòng)

電子商務(wù)網(wǎng)站中經(jīng)常碰到當(dāng)某一項(xiàng)數(shù)據(jù)改變的時(shí)候，其他項(xiàng)也跟著變動(dòng)，并且有一對(duì)一的應(yīng)關(guān)系。比如在電子商務(wù)網(wǎng)站上查詢產(chǎn)品的頁(yè)面中，在產(chǎn)品類型下拉框中選擇了某一產(chǎn)品類型，則在產(chǎn)品名稱中要顯示出所有對(duì)應(yīng)該產(chǎn)品類型的產(chǎn)品名稱。在這個(gè)過(guò)程中使用AJAX，頁(yè)面被局部刷新，反應(yīng)迅速，通信量大大降低，速度快得多。

三、基于AJAX的構(gòu)建電子商務(wù)應(yīng)用程序設(shè)計(jì)實(shí)例

網(wǎng)上書店電子商務(wù)系統(tǒng)是一種比較常見(jiàn)的電子商務(wù)網(wǎng)站。目前經(jīng)常使用的基于Struts架構(gòu)的Web應(yīng)用系統(tǒng)，為網(wǎng)上書店的應(yīng)用開(kāi)發(fā)提供了強(qiáng)有力的支持，使得開(kāi)發(fā)過(guò)程大大簡(jiǎn)化，提高了開(kāi)發(fā)效率，但是它也存在很多問(wèn)題:幾乎用戶的每一次動(dòng)作都會(huì)觸發(fā)一次頁(yè)面請(qǐng)求以及隨即而至的頁(yè)面刷新，當(dāng)網(wǎng)絡(luò)擁塞和更新的頁(yè)面未到達(dá)時(shí)，用戶只能處于等待狀態(tài)。AJAX的異步請(qǐng)求機(jī)制改善了基于傳統(tǒng)的請(qǐng)求/響應(yīng)方式的不足，為客戶端執(zhí)行屏幕更新提供更大的靈活性，因此在網(wǎng)上書店電子商務(wù)系統(tǒng)的設(shè)計(jì)中將AJAX技術(shù)引入Struts架構(gòu)。

網(wǎng)上書店電子商務(wù)系統(tǒng)的體系架構(gòu)由客戶端瀏覽器、Web服務(wù)器和數(shù)據(jù)庫(kù)服務(wù)器三層組成，如圖所示。

1.客戶端瀏覽器層

客戶端瀏覽器層由HTML，CSS，JavaScript文件組成，負(fù)責(zé)將模型(業(yè)務(wù)邏輯)的當(dāng)前狀態(tài)展示給用戶，并接受用戶的輸入，確認(rèn)等信息，當(dāng)模型狀態(tài)發(fā)生改變時(shí)(業(yè)務(wù)數(shù)據(jù)的改變)，用戶界面信息會(huì)隨之更新。在該層的設(shè)計(jì)中，改變了傳統(tǒng)的基于請(qǐng)求/響應(yīng)的頁(yè)面訪問(wèn)方式，在用戶界面與Web服務(wù)器之間新增了AJAX引擎中間層，用于異步發(fā)送客戶端用戶的請(qǐng)求。

2.Web服務(wù)器層

Web服務(wù)器負(fù)責(zé)網(wǎng)上書店電子商務(wù)系統(tǒng)的業(yè)務(wù)邏輯控制與處理，是整個(gè)網(wǎng)上書店電子商務(wù)系統(tǒng)的核心。首先配置Struts-config.xml文件，創(chuàng)建Action類的子類，在子類中加入需要處理的邏輯代碼，通過(guò)調(diào)用不同的業(yè)務(wù)模型實(shí)現(xiàn)對(duì)于不同頁(yè)面請(qǐng)求的處理。在設(shè)計(jì)業(yè)務(wù)模型時(shí)，充分考慮到了模型組件的重用性，即模型組件在設(shè)計(jì)時(shí)即不與客戶端類型相關(guān)，也不與所采用的具體框架相關(guān)，所有業(yè)務(wù)模型由JavaBean組件來(lái)實(shí)現(xiàn)，由Action類來(lái)調(diào)用，從而完成相關(guān)業(yè)務(wù)邏輯處理。

3.數(shù)據(jù)庫(kù)服務(wù)器層

數(shù)據(jù)庫(kù)服務(wù)器層主要保存與網(wǎng)上書店電子商務(wù)系統(tǒng)相關(guān)的持久數(shù)據(jù)。在多層結(jié)構(gòu)的應(yīng)用程序環(huán)境中，數(shù)據(jù)庫(kù)連接的建立與關(guān)閉對(duì)系統(tǒng)性能的影響很大，因此在應(yīng)用程序的數(shù)據(jù)庫(kù)設(shè)計(jì)中采用數(shù)據(jù)庫(kù)連接池(Connection Pool)技術(shù)以克服這種不足。

網(wǎng)上書店在查詢商品、訂單處理等模塊時(shí)采用了AJAX實(shí)現(xiàn)，取得較好的交互效果。系統(tǒng)Web服務(wù)器層使用Hibernate作為持久層，負(fù)責(zé)Java對(duì)象與數(shù)據(jù)庫(kù)表之間映射;使用JavaBean完成服務(wù)器端的數(shù)據(jù)處理，利用Dom實(shí)現(xiàn)Java對(duì)象的序列化以及解析從客戶端接收到的XML數(shù)據(jù)流;在中間層的最上面，使用Java Servlet來(lái)負(fù)責(zé)響應(yīng)來(lái)自瀏覽器的請(qǐng)求并把數(shù)據(jù)處理的結(jié)果返回給瀏覽器。在系統(tǒng)的客戶層，負(fù)責(zé)與服務(wù)器交互的是AJAX引擎;下面的JavaScript就負(fù)責(zé)數(shù)據(jù)處理和響應(yīng)瀏覽器事件。DOM負(fù)責(zé)讀取和更新HTML文檔，而HTML、CSS則負(fù)責(zé)數(shù)據(jù)的表現(xiàn)。下面以訂單處理為例說(shuō)明AJAX的應(yīng)用。在系統(tǒng)中，單擊訂單號(hào)，無(wú)須提交，頁(yè)面下方顯示該訂單的詳細(xì)情況。具體設(shè)計(jì)步驟如下:

(1)發(fā)送一個(gè)XMLHttpRequest

首先，需要用JavaScript來(lái)創(chuàng)建XMLHttpRequest類向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求， XMLHttpRequest類首先由IE以ActiveX對(duì)象引入，被稱為XMLHTTP。

(2)Servlet請(qǐng)求處理

通過(guò)Servlet來(lái)處理XMLHttpRequest與處理一個(gè)來(lái)自瀏覽器的普通HTTP請(qǐng)求相似?？烧{(diào)用HttpServletRequest.getParameter( )來(lái)獲取由POST請(qǐng)求體傳送過(guò)來(lái)的formencoded數(shù)據(jù)。AJAX請(qǐng)求也與普通的WEB請(qǐng)求樣都成為此應(yīng)用同一HttpSession會(huì)話進(jìn)程的一部分。

(3)通過(guò)JavaScript來(lái)處理服務(wù)器響應(yīng)

XMLHttpRequest的readyState屬性是一個(gè)給出請(qǐng)求生命周期狀態(tài)的數(shù)字值。它從表示“未初始化”的0變化到表示“完成”的4。每次readyState改變時(shí)，都會(huì)引發(fā)readystatechange事件，通過(guò)onreadystatechange屬性配置回調(diào)處理函數(shù)將會(huì)被調(diào)用。

四、結(jié)論

通過(guò)本文所述， 在電子商務(wù)網(wǎng)站應(yīng)用開(kāi)發(fā)中使用AJAX，不僅減少了頁(yè)面重載次數(shù)，而且可以將原來(lái)的一些服務(wù)器端的工作利用客戶端閑置的能力來(lái)處理，從而減輕服務(wù)器端的負(fù)擔(dān)。當(dāng)然，任何東西有利也有弊，AJAX的適用范圍是由它的特性所決定的。如果過(guò)多的使用JavaScript，那么客戶端將非常臃腫，不利于用戶的瀏覽體驗(yàn)。

參考文獻(xiàn):

[1]曾 斌:web程序設(shè)計(jì)與應(yīng)用[M].北京:清華大學(xué)出版社， 2004

[2]柯自聰:Ajax 開(kāi)發(fā)精要——概念、案例與框架[M].北京:電子工業(yè)出版社， 2006

[3]陳 曦:基于Ajax構(gòu)建web應(yīng)用程序的研究[J].吉林華工學(xué)院學(xué)報(bào)，2007(4)