AJAX技術在電子商務網站中的應用

[摘 要] AJAX是一種新興的Web表示層技術， 利用它可以構建動態、快速和靈活的Web應用程序。首先介紹了AJAX 的工作原理，并闡明了AJAX技術在Web應用的獨特優勢，最后探討了創建基于AJAX電子商務網站應用程序的關鍵技術。

[關鍵詞] AJAX XMLHttpRequest JavaScript XML 電子商務

一、AJAX技術概述

AJAX是Asynchronous JavaScript and XML的簡稱，它不是一項新的技術，而是多種技術的綜合，或者是設計方式，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技術。

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

1.減輕服務器負擔。

2.不刷新整個頁面，在頁面內與服務器通信;

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

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

5.進一步促進頁面呈現與數據的分離;

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

二、AJAX技術在電子商務網站開發中的應用

電子商務網站是大眾經常接觸的Web應用，AJAX技術在建設電子商務網站中也能發揮很大作用，具體有以下方面應用:

1.用戶注冊或數據驗證

傳統的方法是在用戶填寫完注冊數據后，提交的結果是一個新頁面，要么顯示提交成功，要么出現重名要求重新填寫。如果注冊項目很多， 失敗的注冊將引起用戶較長時間來等待頁面刷新。如果采用AJAX技術可以很好地解決這個問題。用戶填寫好登錄名后，一旦輸入文本框失去焦點，該事件的處理函數就會通過AJAX調用來檢查用戶填寫的登錄名是否存在重復，用戶可以繼續填寫其它的注冊項，在這個過程中，網絡上傳輸的只是少量的文本片段，如用戶填寫的登錄名和服務器端返回的消息等，因而響應速度很快。

2.商品展示

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

3.交互過程

現在的電子商務網站提倡個性化，十分注意滿足用戶的需求，因此也非常關注同用戶的交互過程。基于AJAX的購物車相對傳統的購物車系統可以更快獲得服務器端的響應，比如用戶的訂購數超過庫存的錯誤消息不用等到用戶提交頁面才知道。其次是用戶的意見反饋，通常是采用留言簿或討論區的方式，可以利用AJAX技術設計出反應異常靈敏的客戶留言簿或討論區。

4.智能數據聯動

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

三、基于AJAX的構建電子商務應用程序設計實例

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

網上書店電子商務系統的體系架構由客戶端瀏覽器、Web服務器和數據庫服務器三層組成，如圖所示。

1.客戶端瀏覽器層

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

2.Web服務器層

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

3.數據庫服務器層

數據庫服務器層主要保存與網上書店電子商務系統相關的持久數據。在多層結構的應用程序環境中，數據庫連接的建立與關閉對系統性能的影響很大，因此在應用程序的數據庫設計中采用數據庫連接池(Connection Pool)技術以克服這種不足。

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

(1)發送一個XMLHttpRequest

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

(2)Servlet請求處理

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

(3)通過JavaScript來處理服務器響應

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

四、結論

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

參考文獻:

[1]曾 斌:web程序設計與應用[M].北京:清華大學出版社， 2004

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

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