AJAX技術(shù)在電子商務(wù)網(wǎng)站中的應(yīng)用

[摘 要] AJAX是一種新興的Web表示層技術(shù)， 利用它可以構(gòu)建動態(tài)、快速和靈活的Web應(yīng)用程序。首先介紹了AJAX 的工作原理，并闡明了AJAX技術(shù)在Web應(yīng)用的獨特優(yōu)勢，最后探討了創(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的簡稱，它不是一項新的技術(shù)，而是多種技術(shù)的綜合，或者是設(shè)計方式，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技術(shù)。

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

1.減輕服務(wù)器負擔。

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

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

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

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

6.帶來更好的用戶體驗。

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

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

1.用戶注冊或數(shù)據(jù)驗證

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

2.商品展示

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

3.交互過程

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

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

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

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

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

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

1.客戶端瀏覽器層

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

2.Web服務(wù)器層

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

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

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

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

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

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

(2)Servlet請求處理

通過Servlet來處理XMLHttpRequest與處理一個來自瀏覽器的普通HTTP請求相似。可調(diào)用HttpServletRequest.getParameter( )來獲取由POST請求體傳送過來的formencoded數(shù)據(jù)。AJAX請求也與普通的WEB請求樣都成為此應(yīng)用同一HttpSession會話進程的一部分。

(3)通過JavaScript來處理服務(wù)器響應(yīng)

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

四、結(jié)論

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

參考文獻:

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

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

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