ajax技術(shù)在電子商務(wù)分銷平臺中的應(yīng)用[畢業(yè)論文]

1、<p><b>　　畢業(yè)論文</b></p><p>　　Ajax技術(shù)在電子商務(wù)分銷平臺中的應(yīng)用</p><p>　　摘 要：電子商務(wù)自興起后就不斷的飛速發(fā)展，越來越多的小商戶和個體經(jīng)營者希望進駐電子商務(wù)市場，對電子商務(wù)個人分銷的需求與日俱增。C2C網(wǎng)站開始趨于消費者成為主流。當C2C網(wǎng)站發(fā)展到一定程度時，B2B2C形式的商業(yè)分銷平臺就成為了主流。商業(yè)電子

2、化的趨勢為客戶提供了便利的交易方式和廣泛的選擇。為了抓住更多的有效客戶，行業(yè)內(nèi)小企業(yè)越來越需要電子商務(wù)分銷平臺體驗優(yōu)化相關(guān)的技術(shù)和解決方案。AJAX技術(shù)在一定程度上解決了客戶體驗帶來的難題。AJAX技術(shù)采用異步交互方式,它的出現(xiàn)改善了傳統(tǒng)的Web 應(yīng)用,減少了用戶訪問網(wǎng)站的等待時間,實現(xiàn)了無重載的頁面刷新。本文將研究把AJAX技術(shù)應(yīng)用到電子商務(wù)系統(tǒng)的設(shè)計中,包括對AJAX框架，jQuery和DWZ的應(yīng)用研究。其中，將針對每一個模塊的應(yīng)用

3、深度探討jquery中的$.ajax方法、$.post方法、$.get方法以及XML類型傳輸和DWZ的json類型傳輸。并在最后探討ajax在電子商務(wù)分銷平臺中的常見問題和解決方法。</p><p>　　關(guān)鍵詞：AJAX；分銷平臺；異步交互；用戶體驗</p><p>　　Develop E-commerce Distribution Website with Ajax</p>

4、<p>　　Abstract: Since the rise of e-commerce after the rapid development, more and more businesses and individual operators wanted join in e-commerce market, increasing demand for e-commerce personal distribution.

5、C2C become main consumers. When the C2C website developed, B2B2C will become popular. E-commerce offers customers a convenient way to trade and a wide selection. Industry, businesses increasingly need the relevant techno

6、logy and solutions to optimize the e-commerce distribution website.Ajax </p><p>　　Key words: AJAX; Distribution Website; Asynchronous interaction; User Experience</p><p><b>　　目 錄</b>

7、;</p><p>　　一、AJAX技術(shù)概述1</p><p>　?。ㄒ唬〢JAX技術(shù)簡介1</p><p>　?。ǘ〢JAX技術(shù)原理2</p><p>　　（三）AJAX技術(shù)框架3</p><p>　　二、電子商務(wù)分銷平臺的分析6</p><p>　?。ㄒ唬╇娮由虅?wù)分銷平臺的需求分

8、析6</p><p>　?。ǘ〢JAX技術(shù)在平臺中的應(yīng)用需求分析7</p><p>　　三、AJAX技術(shù)在電子商務(wù)分銷平臺中的應(yīng)用設(shè)計10</p><p>　?。ㄒ唬┫到y(tǒng)軟件設(shè)計及開發(fā)原則10</p><p>　?。ǘ┫到y(tǒng)的數(shù)據(jù)庫設(shè)計10</p><p>　?。ㄈ┫到y(tǒng)結(jié)構(gòu)層次11</p>

9、<p>　?。ㄋ模┫到y(tǒng)的功能模塊劃分及異步模塊設(shè)計12</p><p>　　四、AJAX技術(shù)在電子商務(wù)分銷平臺中的應(yīng)用及實現(xiàn)14</p><p>　?。ㄒ唬〢JAX技術(shù)在用戶名驗證中的應(yīng)用15</p><p>　　（二）AJAX技術(shù)在登錄中的應(yīng)用17</p><p>　?。ㄈ〢JAX技術(shù)在購物車中的應(yīng)用20</p

10、><p>　?。ㄋ模〢JAX技術(shù)在搜索自動完成中的應(yīng)用25</p><p>　?。ㄎ澹〢JAX技術(shù)在供應(yīng)商后臺管理系統(tǒng)中的應(yīng)用27</p><p>　　五、AJAX技術(shù)在應(yīng)用中的問題及解決30</p><p>　?。ㄒ唬〢JAX在客戶端的緩存問題30</p><p>　　（二）AJAX技術(shù)潛在的安全問題30<

11、;/p><p>　?。ㄈ〢JAX技術(shù)在應(yīng)用中的其他問題31</p><p><b>　　結(jié)束語32</b></p><p>　　致謝錯誤!未定義書簽。</p><p><b>　　引言</b></p><p>　　隨著互聯(lián)的發(fā)展，通過瀏覽器/服務(wù)器的方式所進行并完成的各種

12、商務(wù)活動、交易活動、金融活動和相關(guān)的綜合服務(wù)活動的方式越來越成為主流。在國際市場化的進程中，對于任何一個以互聯(lián)網(wǎng)為分銷渠道并且需要借助網(wǎng)絡(luò)發(fā)揮重要作用的公司來說，用戶體驗現(xiàn)在已經(jīng)成為它的價值的主要部分。電子商務(wù)平臺中的買主變換率、回頭客、訪問持續(xù)時間等，現(xiàn)在都需要緊密依賴于客戶體驗。另外，由于互聯(lián)網(wǎng)用戶越來越多的由普通大眾構(gòu)成，因此人們對與產(chǎn)品進行交互過程中的體驗的關(guān)注也越來越迫切。為了讓更多的人能快速接受產(chǎn)品，企業(yè)都開始致力于研究其交

13、互產(chǎn)品如何變得更加貼近人的行為，更加人性化。</p><p>　　AJAX能給用戶帶來完全不同的界面瀏覽感受。以往的動態(tài)交互技術(shù)被隱藏到AJAX中。用戶所面對的只是一個靜態(tài)界面，不再需要在提交全部頁面以及等待。服務(wù)器端的結(jié)果被直接無刷新地顯示在頁面上。因此使用AJAX開發(fā)的應(yīng)用程序能夠提供快速的響應(yīng)界面，減少了頁面刷新帶來的閃爍。使程序更加親和化，解決了刷新后丟失數(shù)據(jù)的問題。此外，異步的交互也降低了服務(wù)器的工作壓

14、力。在一定程度上優(yōu)化了網(wǎng)絡(luò)通信質(zhì)量，提供了更好的用戶體驗。</p><p>　　一、AJAX技術(shù)概述</p><p>　?。ㄒ唬〢JAX技術(shù)簡介</p><p>　　AJAX全稱為Asynchronous JavaScript and XML（異步JavaScript和XML），是一種設(shè)計交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，它包括：</p><p>

15、;　　1.使用XHTML+CSS來表示信息；</p><p>　　2.使用JavaScript操作DOM（Document Object Model）進行動態(tài)顯示及交互；</p><p>　　3.使用XML和XSLT進行數(shù)據(jù)交換及相關(guān)操作；</p><p>　　4.使用XMLHttpRequest對象與Web服務(wù)器進行異步通信； </p><p&

16、gt;　　5.使用JavaScript綁定一切；</p><p>　　AJAX技術(shù)的核心是XMLHttpRequest，它最早由微軟IE5支持這個對象，隨后Mozilla1.0、Apple Safari1.2及Opera都陸續(xù)支持。XMLHttpRequest是一組API函數(shù)集，可被JavaScript、JScript、VBScript以及其他web瀏覽器內(nèi)嵌的腳本語言使用，通過HTTP在瀏覽器和web服務(wù)器之間

17、收發(fā)XML或其他數(shù)據(jù)。2005年初，許多事件使得Ajax被大眾所接受。Google在它著名的交互應(yīng)用程序中使用了異步通訊，如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創(chuàng)，該文的迅速流傳提高了人們使用該項技術(shù)的意識。另外，對Mozilla/Gecko的支持使得該技術(shù)走向成熟，變得更為易用。</p&

18、gt;<p>　?。ǘ〢JAX技術(shù)原理</p><p>　　AJAX的核心技術(shù)即是XMLHTTPRequest。通過利用ajax，代碼中的JS部分會使用此對象直接與服務(wù)器進行通信。XMLHTTPRequest對象支持Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7等瀏覽器。但是不同的瀏覽器創(chuàng)

19、建XMLHTTPRequest對象的方法是有差異，所以通常為了滿足多個瀏覽器，創(chuàng)建對象時間將使用try/catch來檢測用戶的瀏覽器。</p><p>　　創(chuàng)建XMLHTTPRequest對象當然是在用戶的操作事件發(fā)起時開始，在通信中，readyState屬性存有與服務(wù)器響應(yīng)的參數(shù)，onreadystatechang在每當readyState改變時執(zhí)行操作，當readystate的狀態(tài)信息改變?yōu)?時，即可使用re

20、sponseText屬性將服務(wù)的值返回到客戶端中，整個請求/響應(yīng)過程即完成。此時，就可以利用JS代碼把信息按友好化的界面設(shè)計輸出在瀏覽器上。值得一提的是，onreadystatechang是一直處于活動狀態(tài)的，所以才出現(xiàn)了無刷新顯示界面信息的功能。如圖所示：</p><p>　　圖 1-1 Ajax原理圖</p><p>　　其中，當創(chuàng)建完xmlHttp對象后，將執(zhí)行open()方法和se

21、nd()方法，設(shè)置提交類型為GET或POST，服務(wù)器端腳本的URL，以及是否異步處理。同時，當readyState為4時，請求完成，服務(wù)器將數(shù)據(jù)發(fā)送回頁面。</p><p>　　另外，與XML搭配使用，可以更充分的實現(xiàn)客戶端無刷新展示服務(wù)內(nèi)容。XML為可擴展標記語言，類似于HTML，但不同于HTML的顯示功能，XML是用來傳輸數(shù)據(jù)的載體。它具有很強的自我描述性。當需要在客戶端顯示展示數(shù)據(jù)時，可以使用JS解析XML

22、從中讀取信息。</p><p>　　（三）AJAX技術(shù)框架</p><p>　　隨著Ajax的不斷成熟，越來越多的Ajax框架雨后春筍，框架成為了Ajax的發(fā)展主要趨勢。Ajax框架為開發(fā)者提供了多種豐富的UI組件，統(tǒng)一規(guī)范并封裝了javascript代碼，可以使開發(fā)者在極少的編寫復雜javascript代碼的情況下順利的使用ajax技術(shù)優(yōu)化客戶端。</p><p>

23、;　　1. jQuery框架</p><p>　　jQuery是一個javascript函數(shù)庫，是目前流行的主流的Javascrīpt框架。它的輕量級js庫特性，兼容CSS3，兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）的特性使它更加備受歡迎。jQuery的官方網(wǎng)站上寫著，“write less，do more”可以體現(xiàn)它的最大意義就是，寫的少，做的多。j

24、Query能使用戶更加方便地處理HTML documents等，實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery使其與html代碼和html內(nèi)容分離，更好利于開發(fā)人員分工進行。強大的Selector可操作選擇幾乎所有的DOM元素，應(yīng)用的廣泛，包括google也使用了jQuery。23%的開發(fā)者在使用該框架，并且在不斷增加。</p><p>　　jQuery包括一個jQuery.js的庫文件和其他UI插

25、件。使用時直接引入頁面頂端。jQuery的語法為$(selector).action()。即使用“$”符號代替JS中的的document.getElementById()操作，這樣即可簡化過多的使用document.getElementById()造成冗余和多于的錯誤，使代碼更簡潔，其中的selector可以選擇html標簽、class和id等。Action執(zhí)行對元素的操作。事件處理方法是jQuery中的核心函數(shù)。事件處理程序指的是當

26、HTML中發(fā)生某些事件時所調(diào)用的方法。觸發(fā)多由用戶操作產(chǎn)生，用來執(zhí)行界面中的交互變化。</p><p>　　jQuery 為AJAX提供了豐富函數(shù)方法庫。通過 jQuery AJAX，使用HTTP Get和HTTP Post，可以從遠程服務(wù)器請求包括TXT、HTML、XML和JSON的各種方式的文件。jQuery AJAX的請求主要有：</p><p>　　表 1-1 jQuery Aj

27、ax主要請求方法</p><p>　　這些請求方法所實現(xiàn)的功能大同小異，其中$(selector).load(url,data,callback)可以針對各種html元素進行操作。比如把一塊HTML代碼加載到頁面的某個區(qū)域中去。只需簡單地選擇所需的元素，然后使用load()函數(shù)加載到相應(yīng)的頁面即可。如果需把簡單的一些參數(shù)傳給服務(wù)器中的某個頁面中那就要使用$.post()或$.get()來完成。編寫復雜的ajax腳

28、本時，需要用到$.ajax。$.ajax可以指定xml、script、html和json，jQuery會自動為回調(diào)函數(shù)準備合適的結(jié)果，這樣便可以立即使用該結(jié)果。</p><p><b>　　2.DWZ框架</b></p><p>　　DWZ富客戶端框架(jQuery RIA framework),是國內(nèi)開發(fā)的一款在jQuery基礎(chǔ)上實現(xiàn)的Ajax RIA開源框架。DW

29、Z富客戶端框架提供了完整的Demo實現(xiàn)了多種可能出現(xiàn)的用戶操作模塊，為二次開發(fā)擴展、多人協(xié)作開發(fā)提供了便利。DWZ框架支持用html擴展的方式來代替js代碼,使開發(fā)更加平易近人。DWZ庫中已經(jīng)將多樣的js方法事件融入其中，包括CSS樣式。開發(fā)者可以直接調(diào)用html參數(shù)來完成ajax請求。另外，還提供了可視化的UI組件，可以直接使用。</p><p>　　DWZ框架的主要庫文件有：基本的jQuery.js、dwz.

30、min.js、以及dwz.regional.zh.js。</p><p>　　(1)jQuery.js庫</p><p>　　jQuery.js庫包括jquery-1.x.x.js的當前最新基本jQ庫，它負責最底層的js操作。包括ajax傳輸，標簽的選取操作等。同級的還有jquery.cookie.js插件，對頁面的cookies進行了很好的擴充，代碼如下：</p><

31、p>　　其他的同級的插件還有jquery.validate.js，用于驗證表單。以及解決IE6遮擋問題的jquery.bgiframe.js插件。</p><p>　　DWZ中最核心的部分要屬dwz.min.js庫了，dwz.min.js其實是一個壓縮版的庫文件，他集合了以下庫文件：</p><p>　　表 1-2 DWZ庫文件一覽表</p><p>　　其

32、中包括核心的core庫，主要功能是初始化框架，并且為javascript string增加了一些擴展方法，比如對HTML標記的過濾等。其他的庫文件從其文件命名中即可大概的了解它所負責的功能模塊，比如Tab標簽模塊、主題更換模塊、工具日期模塊、樹形結(jié)構(gòu)模塊、提示信息模塊等等，而這一切的模塊都是服務(wù)于ajax處理前和處理后的相關(guān)變化。為用戶提供平易近人的操作方式。</p><p>　　dwz.regional.zh.

33、js插接解決了框架中的本地化問題，在開發(fā)者開發(fā)非中文的應(yīng)用時，可以刪除此插件。該插件中定義了框架中所能出現(xiàn)的所有提示信息。比如表單中的輸入是否合法、設(shè)置日期中的中文數(shù)字、以及ajax交互時的成功失敗提示信息。</p><p>　　DWZ中很好的集成了ajax提交技術(shù)，開發(fā)者只需定義其中的輸入輸出環(huán)節(jié)，即可完成整個無刷新操作，DWZ框架Ajax無刷新表單提交處理流程是：</p><p>　　

34、（1）ajax表單提交給服務(wù)器</p><p>　?。?）服務(wù)器返回一個固定格式j(luò)son結(jié)構(gòu)</p><p>　?。?）js回調(diào)函數(shù)根據(jù)這個json數(shù)據(jù)做相應(yīng)的處理</p><p>　　DWZ框架Ajax表單提交的流程是，首先用戶提交表單，根據(jù)action中的url將信息將發(fā)送到struts中的action中處理。服務(wù)器端業(yè)務(wù)處理完畢，必須返回json格式的代碼。&

35、lt;/p><p>　　json是類似于xml的純文本文件，用于存儲信息，在js中使用。其中"statusCode":"200"為操作成功的狀態(tài)碼，300為操作失敗，301是會話超時，"message"可以傳遞簡單的提示信息到客戶端。"navTabId"當存在時為設(shè)置新標簽頁打開的ID，當"callbackType"為

36、closeCurrent時，提交表單后將關(guān)閉當前；為forward時，將檢測 "forwardUrl"中的url并在服務(wù)器返回時跳轉(zhuǎn)。提交時，F(xiàn)orm標簽上增加的onsubmit="return validateCallback(this, navTabAjaxDone)"或onsubmit="return validateCallback(this, dialogAjaxDone)&q

37、uot;方法會觸發(fā)。兩個方法是用于服務(wù)器返回信息時重新加載某個標簽頁面或關(guān)閉dialog窗口，此方法定義在dwz.ajax.js中。為了檢測從服務(wù)器端發(fā)回來的json文件。由于操作區(qū)基本上都是在標簽頁中，所以navTab中定義了reload方法。此方法可以重載url定義的頁面，并返回到標簽頁中。整個ajax表單提交處理就得</p><p>　　二、電子商務(wù)分銷平臺的分析</p><p>　

38、　（一）電子商務(wù)分銷平臺的需求分析</p><p>　　從有形市場中的產(chǎn)品銷售模式分析中得出，品牌商品的最初形成源頭是生產(chǎn)廠商，即第一供貨商。這種源頭供貨商不會考慮與普通消費個體的買賣關(guān)系，對于一些中小型企業(yè)來說，生產(chǎn)廠商只是品牌商品的代加工者，只在分銷商的上游操作業(yè)務(wù)。生產(chǎn)商將承諾制造商品供應(yīng)給大型品牌銷售商，這些大型的銷售商就是所謂的“一級供應(yīng)商”。一級供應(yīng)商通過營銷策劃，品牌包裝，廣告宣傳將商品分銷給“二級

39、代理商”、“三級代理商”等等。這樣就完成了整個分銷過程。</p><p>　　隨著信息化進程和電子商務(wù)的發(fā)展。虛擬世界也產(chǎn)生了類似的分銷需求。網(wǎng)絡(luò)分銷平臺成為了新興的分銷模式。它在一定程度上也是由終端零售平臺即C2C網(wǎng)站的火爆所致。對于想開網(wǎng)店的個體商戶來說，其機動性強，希望迅速得到貨源信息，迅速在網(wǎng)店發(fā)布商品，迅速得到營銷方案展開銷售。條件有限的個體分銷商還希望可以通過供應(yīng)商代發(fā)貨的形式完成交易。對于個人消費者

40、來說，也希望有一個提供著豐富充足商品的廠家，可以直接購買到商品。電子商務(wù)分銷平臺既是在這種以客戶為中心的背景下而產(chǎn)生的。</p><p>　　電子商務(wù)分銷平臺系統(tǒng)的使用者即供應(yīng)商，擁有自己的獨立品牌，不但希望通過分銷渠道展開業(yè)務(wù)，還希望可以和買家直接交易。對分銷途徑來說，抓住更多的分銷商可以帶來更大的利潤。一方面，為了迎合一部分個體商戶急于開網(wǎng)店的需求，另一方面，為了讓更多的個體商戶成為自己的分銷商。電子商務(wù)分銷

41、平臺將提供友好化得操作界面，快速注冊登記，為分銷商提供各大C2C網(wǎng)站的數(shù)據(jù)包下載，以帶來更多平臺的商家。在本平臺系統(tǒng)中，供應(yīng)商也希望會通過發(fā)展會員制來提供更有誘惑的優(yōu)惠給分銷商和買家。比如會員即分銷商，在注冊成為其品牌的代理商后，進貨量大，銷售業(yè)績好，供應(yīng)商會制定積分等機制。這樣不同的分銷商就有不同的等級，在進貨查詢時也會出現(xiàn)不同的價格。</p><p>　　由此分析，平臺涉及到的角色有三個層次。即買家、分銷商、

42、供應(yīng)商。</p><p>　　供應(yīng)商角色，也是系統(tǒng)的管理員。他可以視為B2B2C中的B角色。在整個分銷環(huán)節(jié)中是最上層的。他的主要需求有：商品管理（包括商品的發(fā)布和刪除、商品類別的設(shè)置）、會員管理（包括會員的賬戶的禁用以及設(shè)置分銷商）、訂單管理（查看訂單狀態(tài)、執(zhí)行訂單）、評論管理（對平臺中商品的評論管理）、信息管理（對平臺中新聞等文字內(nèi)容的管理）。</p><p>　　會員角色，是在普通游客

43、之上的等級角色。他分為2種。一種是普通會員、一種是分銷商。他們除了有游客所有的功能外還共同擁有的需求功能有：在線購買商品/進貨（在購物車中添加商品后，登錄下單）、在線下單（可以修改發(fā)貨地址等收件人信息）、付款（在線支付）等。其中當普通會員升級為分銷商后，可以對全站的商品進行分銷價的查看。并可以以分銷價購進貨物。</p><p>　　普通游客角色，是平臺中最低等級角色，但是卻是電子商務(wù)分銷平臺的客戶中最重要的角色，

44、為他們提供全新的網(wǎng)站體驗和親和的功能，才能贏得更多的會員角色。在需求功能上主要有：查看全站商品信息（會員價的查看以及商品細節(jié)內(nèi)容的瀏覽查閱）、添加購物車（不用登陸即可將商品拖拽到購物車中保存）、搜索商品（支持自動提示用戶平臺中的商品）、評論商品（快速評論給商品進行評價打分）、注冊會員、分類檢索等等。</p><p>　?。ǘ〢JAX技術(shù)在平臺中的應(yīng)用需求分析</p><p>　　各個品牌

45、商之間無形的競爭是在平臺中展開的。一個品牌的分銷平臺，不僅提供著分銷功能，還代表著企業(yè)的形象。明快簡潔的頁面布局設(shè)計，能使客戶留戀往返。Ajax技術(shù)可以實現(xiàn)如桌面般操作，包括氣泡提示、遮罩層提示、元素拖拽、預讀、自動輸入提示等等人性化技術(shù)。這讓習慣了視窗系統(tǒng)操作的普通用戶可以在B/S結(jié)構(gòu)的系統(tǒng)應(yīng)用中迅速掌握操作方式。為接受PC較晚的用戶可以很容易掌握其界面。所以使用Ajax來提升電子商務(wù)分銷平臺的競爭力是勢在必行的。Ajax的應(yīng)用條件分

46、析有以下幾個方面：</p><p><b>　　1.表單的異步交互</b></p><p>　　使用Ajax技術(shù)進行表單提交后可以立刻進行異步處理，并在頁面上快速顯示出更新后的結(jié)果。減少屏閃帶來數(shù)據(jù)丟失以及網(wǎng)絡(luò)緩慢導致的空白頁面等待。用戶體驗感增強，等待時間簡短，厭倦度降低。</p><p>　　2.深層次的樹的導航和級聯(lián)</p>

47、<p>　　深層次的級聯(lián)菜單樹形控件的遍歷和多級聯(lián)動，多用在商品分類中，控制顯示邏輯是依靠JavaScript完成的，使用Ajax延遲加載更深層次的數(shù)據(jù)能夠有效的降低開發(fā)難度，減輕服務(wù)器的負擔，只下載當前所需要的數(shù)據(jù)。</p><p>　　3.快速的與用戶交流響應(yīng)</p><p>　　Ajax的可以實時更新供應(yīng)商的公告新聞等信息，也可以為其提供一個與分銷商對話的平臺。自動反復更

48、新頁面，及時查看是否有新的消息出現(xiàn)。新的反饋應(yīng)該以最快的速度自動顯示出來的，從而用戶不必不斷的刷新頁面。</p><p>　　4.評論、問與答，表示肯定或否定態(tài)度等類似的場景</p><p>　　在類似的場景中，當AJAX可以把時間控制在1秒之內(nèi)，就會有更多的用戶加入進來，而不是直接忽略過去或不會參與。</p><p>　　5.普通的文本輸入提示和自動完成的場景&l

49、t;/p><p>　　可文本框等輸入表單中給予輸入提示，或者自動完成，能有效的改善用戶體驗，AJAX是很好的選擇，那些自動完成的數(shù)據(jù)可能來自于服務(wù)器端的場合。</p><p>　　通過Ajax應(yīng)用條件的分析，電子商務(wù)分銷平臺的具體場景需求體現(xiàn)在以下幾方面：</p><p><b>　　1.登錄功能</b></p><p>　

50、　普通游客、會員以及分銷商用戶主動在頁面上進行登錄時，需要保持用戶當前瀏覽狀態(tài)不變，進行輸入表單提交登錄的操作。這樣才能保證客戶在平臺的瀏覽中不會丟失剛剛所在的頁面。分銷商在分銷平臺中挑選需要購買的商品，已加入購物車選擇付款時或在其他操作需登錄的場景下，浮現(xiàn)出登錄輸入窗口于原本瀏覽頁中央，而不是跳轉(zhuǎn)單獨的登錄頁面。在密碼等條件錯誤時，避免使用JS直白的警告框，而是使用紅字輸出與登陸框下部。</p><p>　　圖

51、2-1 傳統(tǒng)登錄與異步登錄方式的比較</p><p><b>　　2.驗證用戶名功能</b></p><p>　　普通游客在注冊時，由于平臺系統(tǒng)要求會員名的唯一性便于對今后的會員進行管理，需驗證用戶輸入名。但是驗證用戶名唯一性往往使游客厭煩，當用戶輸入一個中意的用戶名和其他個人信息提交后，卻被服務(wù)器告知用戶名已被使用，用戶不得不重新填寫拉雜的個人資料以便再次驗證。平臺

52、的改進為將用戶光標離開用戶名輸入框后開始交互處理，從數(shù)據(jù)庫中返回驗證信息，提示用戶。這樣用戶在填寫其他信息時就會看到最新填寫用戶名在服務(wù)器驗證后的結(jié)果，在不重新提交的情況下就可以修改了新的用戶名。</p><p><b>　　3.購物車功能</b></p><p>　　顧客在瀏覽平臺時發(fā)現(xiàn)中意的商品后，可以使用點擊購買加入在不登陸的情況下購物車中。購買商品時點擊加入購

53、物車，購物車內(nèi)立即生成該選擇商品。另外加入拖拽技術(shù)，用戶可以拖拽商品到購物車，生動的操作方式會更加滿足用戶的操作感受。在進入購物車詳細列表頁面后。顧客在需要修改想要購買的商品數(shù)量時，可以直接輸入新的數(shù)量，購物車自動更改保存中的數(shù)量信息，使用戶不用再重新提交新的購車內(nèi)容。</p><p>　　圖 2-2 傳統(tǒng)購物車與異步購物車的比較</p><p>　　4.商品搜索提示輸入及自動完成<

54、/p><p>　　普通瀏覽者在頁面中搜索商品時，當用戶輸入相關(guān)詞匯后，系統(tǒng)自動列出數(shù)據(jù)庫中存在的已有商品，當用戶按下向下向上的按鍵后，文字內(nèi)容將直接填入搜索框。用戶就可以減少打字次數(shù)，同時又對客戶提供了一定的推薦作用。對搜索提示結(jié)果進行排名優(yōu)化，可以達到營銷某商品的目的。同樣，用戶用鼠標選擇也是可以實現(xiàn)同樣的效果。后期的平臺升級也可以為管理者加入新聞發(fā)布和商品發(fā)布時的標題自己提示完成，便于管理員發(fā)布相似的文章和商品時

55、可以快速完成。</p><p><b>　　5.評論功能</b></p><p>　　普通游客或會員在瀏覽或購買商品后，可以在相應(yīng)的頁面提交自己的評論和分數(shù)。便于后來的買家參考。以往的評論提交時，用戶在寫完內(nèi)容后點擊提交按鈕，頁面閃爍，在遇到網(wǎng)速慢的情況是，會直接出現(xiàn)錯誤頁面或無法顯示，令用戶對評論失去信息。新的優(yōu)化要求用戶在提交后，提示進度信息，在成功后發(fā)布的內(nèi)容直

56、接彈出在商品下端?？焖俚脑u論方式會使用戶對評論功能產(chǎn)生留戀，對提倡用戶評論產(chǎn)生了積極性。</p><p><b>　　6.其他</b></p><p>　　平臺對商品進行了大類和小類的劃分。每個大類下有不同的小類。在選擇類別時，常用下拉菜單組件。動態(tài)的顯示大類信息。在大類選擇后動態(tài)顯示聯(lián)動的小類信息。在上傳文件，包括圖片時，不刷新頁面直接上傳。</p>

57、<p>　　三、AJAX技術(shù)在電子商務(wù)分銷平臺中的應(yīng)用設(shè)計</p><p>　　（一）系統(tǒng)軟件設(shè)計及開發(fā)原則</p><p><b>　　1.系統(tǒng)軟件設(shè)計</b></p><p>　　操作系統(tǒng):Windows 2000/XP SP2</p><p>　　軟件平臺:MyEclipse 7.0，Adobe Drea

58、mweaver CS3</p><p>　　框架集:Struts1.2，jQuery，DWZ</p><p>　　開發(fā)語言:java，HTML,JavaScript</p><p>　　數(shù)據(jù)庫服務(wù)器:MS SQL Server 2000目標Web服務(wù)器:Tomcat 5</p><p>　　目標瀏覽器:Firefox，Microsoft In

59、ternet Explore 7.0及其以上版本</p><p>　　測試工具: Firebug</p><p><b>　　2.系統(tǒng)的開發(fā)原則</b></p><p>　?。?）為供應(yīng)商和分銷之間提供橋梁，為分銷商提供友好的用戶界面，實現(xiàn)信息共享</p><p>　?。?）包容性和可擴展性</p><

60、;p>　?。?）規(guī)范分銷平臺管理</p><p>　?。?）系統(tǒng)簡潔、易使用、易維護、適用非計算機人員使用</p><p>　　（5）加深品牌認知度。為平臺留住更多客戶，使轉(zhuǎn)化率增高。</p><p>　　（6）可靠運行，安全保密</p><p>　?。ǘ┫到y(tǒng)的數(shù)據(jù)庫設(shè)計</p><p>　　本系統(tǒng)所采用MS

61、SQL Server 2000數(shù)據(jù)庫。數(shù)據(jù)庫名為db_shop，設(shè)計采用10張表。</p><p>　　根據(jù)平臺系統(tǒng)的需求分析，設(shè)計數(shù)據(jù)模型。對數(shù)據(jù)庫進行詳細的設(shè)計之前先對每個模型進行分析。最常用的分析模型有實體-聯(lián)系模型，也就是E-R（Entity-Relationship）模型。分析可得有以下實體關(guān)系：</p><p>　　商品（商品編號，小類編號，商品名稱，商品描述，價格，現(xiàn)價，圖片

62、，加入時間，是否新品，是否特價，是否推薦，成交數(shù)）</p><p>　　商品大類（大類編號，大類名稱）</p><p>　　商品小類（小類編號，大類編號，小類名稱）</p><p>　　評論（評論編號，商品編號，姓名，標題，內(nèi)容，分數(shù)，發(fā)表時間）</p><p>　　會員（會員編號，用戶名，真實姓名，密碼，地址，郵編，身份證號，身份證類別，等

63、級，消費額，電話，郵箱）</p><p>　　折扣（等級，消費額，折扣點）</p><p>　　訂單（訂單編號，訂貨數(shù)量，用戶名，真是姓名，地址，郵編，電話，付款方式，運送方式，折扣，訂單日期，是否執(zhí)行）</p><p>　　訂單詳細（訂單詳細編號，訂單編號，商品編號，應(yīng)付價，數(shù)量）</p><p>　　公告信息（公告編號，標題，內(nèi)容，發(fā)布時

64、間）</p><p>　　管理員（管理員編號，用戶名，密碼）</p><p>　　數(shù)據(jù)庫E-R關(guān)系圖如下所示：</p><p>　　圖 3-1 數(shù)據(jù)庫E-R關(guān)系圖</p><p><b>　?。ㄈ┫到y(tǒng)結(jié)構(gòu)層次</b></p><p>　　平臺將采用java web技術(shù)進行開發(fā)。整體分為兩個大部分

65、，底層使用struts1.2框架技術(shù)。前端使用jsp+ajax框架技術(shù)。底層Struts的工作原理圖：</p><p>　　圖 3-2 Struts工作原理圖</p><p>　　根據(jù)工作原理圖和電子商務(wù)分銷平臺的功能需求對功能隔離，達到降低層與層之間的耦合性，采用縱向分層將系統(tǒng)分為以下幾層：業(yè)務(wù)層com.mywhom.action、com.mywhom.from ，持久層com.mywh

66、om.DAO、com.mywhom.DB、工具com.mywhom.filter。以及備用類com.mywhom.shop。</p><p>　　業(yè)務(wù)層中的com.mywhom.action用于與表現(xiàn)層打交道。即與ajax進行的交互。</p><p>　　表現(xiàn)層中主要有jsp頁面和js庫文件。</p><p>　　將平臺系統(tǒng)按照功能分為前臺和后臺。設(shè)計中后臺將采用D

67、WZ框架來實現(xiàn)。包括一個javascript文件包、壓縮庫的bin文件包、以及css等樣式的themes文件包。</p><p>　?。ㄋ模┫到y(tǒng)的功能模塊劃分及異步模塊設(shè)計</p><p>　　分銷平臺的整體分為前臺系統(tǒng)和后臺系統(tǒng)。其中前臺系統(tǒng)主要為普通游客、會員和分銷商提供服務(wù)。后臺為供應(yīng)商及管理員提供服務(wù)。通過詳細的需求分析和實體關(guān)系分析后，對整站的功能模塊劃分如下圖所示：</p

68、><p>　　圖 3-3 電子商務(wù)分銷平臺功能模塊劃分</p><p>　　1.會員登陸模塊：普通游客在主動點擊登錄或者在購物車環(huán)節(jié)進入收銀臺時彈出的登錄窗口。登錄窗口計劃使用層彈出，在不改變原來頁面的技術(shù)上出現(xiàn)新的登錄層并使用深色遮罩層屏蔽登錄操作前的頁面，便于用戶將焦點集中在登錄功能上，防止在登錄時誤操作其他頁面元素。</p><p>　　2.注冊模塊：普通游客的注

69、冊功能，主要包括注冊的條約協(xié)議閱讀并同意，注冊內(nèi)容包括用戶的賬號和密碼相關(guān)以及用戶的詳細資料相關(guān)。用戶名唯一性檢測功能，設(shè)計為在文本框右側(cè)給出提示信息，并結(jié)合全頁面格式檢測來完成。</p><p>　　3.商品搜索模塊：普通游客在鍵入關(guān)鍵字后出發(fā)檢測，彈出下拉提示框。提示框列出所有平臺中涉及到的有相關(guān)關(guān)鍵字的記錄。用戶可以使用鍵盤的上下鍵選擇或者使用鼠標點擊選擇相關(guān)記錄并執(zhí)行搜索。</p><

70、p>　　4.購物車模塊：普通游客在進入類別列表后，可以使用兩種方式將商品加入購物車。一種是直接點擊購買即可。另一種就是使用拖拽方式。用戶在將鼠標放在商品圖片上時，出現(xiàn)移動圖標。點擊鼠標左鍵不放將物品抬起，移動到購物車區(qū)域內(nèi)松下，物品即加入購物車內(nèi)。設(shè)計構(gòu)圖界面如下：</p><p>　　圖 3-4 購物車拖拽設(shè)計圖</p><p>　　評論模塊：普通游客可以在商品詳細頁下端直接寫入姓

71、名、標題、內(nèi)容和分數(shù)并提交。評論內(nèi)容將直接在上端的頁面中彈出顯示。</p><p>　　后臺系統(tǒng)：后臺將采用全異步通信的框架式結(jié)構(gòu)。主要有商品管理、會員管理、訂單管理、評論管理、信息管理等異步模塊。</p><p>　　四、AJAX技術(shù)在電子商務(wù)分銷平臺中的應(yīng)用及實現(xiàn)</p><p>　　主流的Ajax實現(xiàn)都采用了框架技術(shù)，在本系統(tǒng)中的前端客戶界面中將采用jQuer

72、y框架來實現(xiàn)交互。其中每一個功能模塊的交互動作基本都具備以下參數(shù)：</p><p>　　1.URL：即將要被加載的數(shù)據(jù)的URL地址，也就是觸發(fā)action動作的地址。</p><p>　　2.DATA：發(fā)送到服務(wù)器時的數(shù)據(jù)鍵/值對象，也就是通常提交時post所封裝的數(shù)據(jù)，get所獲取的數(shù)據(jù)。在提交時jQuery會自動組裝，根據(jù)提交類型將URL拼接。</p><p>

73、　　3.CALLBACK:回調(diào)函數(shù)，在通訊成功后所設(shè)置要執(zhí)行的函數(shù)，通常這些函數(shù)的方法為彈出提示信息、追加頁面元素、改變頁面元素等。</p><p>　　為了更全面的分析研究jQuery的異步通訊方式，下文將對不同模塊的實現(xiàn)使用不同請求方法來講解jQuery的傳輸方式。</p><p>　?。ㄒ唬〢JAX技術(shù)在用戶名驗證中的應(yīng)用</p><p>　　用戶驗證功能是在

74、注冊頁面(reg.jsp)中實現(xiàn)的。在頁面注冊時，用戶在每個表單控件中輸入信息焦點離開后觸發(fā)onBlur事件用于檢測輸入內(nèi)容。將ajax檢測加入到j(luò)s表單的檢測中即可。js檢測用戶名的函數(shù)如下：</p><p>　　方法體中，首先在觸發(fā)事件后，使用$("#username")選取到控件ID為username的對象，使用.val()直接獲取到文本框的值。使用checkspace()方法檢測是否為

75、文本框為空。在判斷不為空的情況下，執(zhí)行$.ajax方法。此方法為jquery中最基礎(chǔ)的ajax方法。它比$.get,$.post等方式要復雜，但是和$.get,$.post等方法的不同在于，它定義了整個交互的所有過程。在發(fā)送請求前，成功后，完成時，錯誤時，都可以設(shè)置相應(yīng)的執(zhí)行方法。這是其他ajax方法所做不到的。比如，beforeSend參數(shù)可以設(shè)置請求前所要顯示的狀態(tài)信息為“正在查詢”，這使用戶可以很明確的得知其所輸入的用戶名正在接受

76、服務(wù)器端的響應(yīng)。Complete參數(shù)可設(shè)置請求完成后所使用的動作，在判斷是否請求完成時可以使用。交互中最終的兩個結(jié)果參數(shù)success和error，分別設(shè)置請求成功和請求錯誤時所推送的消息。</p><p>　　在用戶檢測應(yīng)用中，無論用戶名是否被占用，它的服務(wù)器消息都要來自success，只有在通訊超時或者服務(wù)器端根本沒有響應(yīng)時，才會出發(fā)error參數(shù)。所有的驗證提交消息都要有一個固定的載體用于顯示給客戶。這個載

77、體在界面端實現(xiàn)。界面端的實代碼現(xiàn)如下：</p><p>　　在表單控件后部加入一個<span>標簽預設(shè)，這個標簽在提交之前用于為用戶顯示輸入格式要求，而在執(zhí)行檢測后可作為一個從服務(wù)器發(fā)回結(jié)果的顯示載體。其中<input>中加入的return checkusername();即為出發(fā)檢測用戶名得js函數(shù)。</p><p>　　服務(wù)器端的處理文件為reg_chkuser

78、name.jsp。接收來自$.ajax方法所封裝的數(shù)據(jù)username。其實現(xiàn)代碼如下：</p><p>　　處理方式同普通的JSP請求相同，不同在于jQuery的默認編碼采用UTF-8，所以頁面端發(fā)送來消息為UTF-8編碼形式的。在返回頁面時，DATA數(shù)據(jù)必須為UTF-8形式。所以有response.setCharacterEncoding("utf-8");</p><

79、p>　　當驗證用戶名的整個過程成功，就會在success參數(shù)中調(diào)用回調(diào)函數(shù)，執(zhí)行向<span>標簽中發(fā)送的結(jié)果內(nèi)容。運行結(jié)果如下：</p><p>　　圖 4-1 用戶名驗證運行結(jié)果</p><p>　　（二）AJAX技術(shù)在登錄中的應(yīng)用</p><p>　　在登錄中，與驗證用戶名的相同之處在于，都是在文本框等表單控件的場景下進行的。當用戶輸入完用戶

80、名和密碼后，點擊登錄觸發(fā)函數(shù)，進行處理。為了對用戶的密碼等資料進行安全保密，請求將采用$.post方法：</p><p>　　$.post的語法結(jié)構(gòu)為jQuery.post(url,[data],[callback],[type])相對$.ajax來說要更加簡便。其中[callback]中可以編寫用于返回值所使用的函數(shù)方法，[type]為設(shè)置返回的內(nèi)容如：xml, html, script, json, text

81、, _default。本例中將從界面端獲取到的值命名為username和PWD。在交互時，將username和PWD參數(shù)發(fā)到check_login.jsp中進行檢測登錄。</p><p>　　登錄實現(xiàn)的實質(zhì)在于在數(shù)據(jù)庫中檢測到相應(yīng)的用戶名和密碼后，為用戶保存一個會話，即session對象。但是jQuery等客戶端腳本是無法對session對象進行操作的。這就不可避免要對頁面進行刷新才能使登錄后的每個頁面中都保存有

82、用戶信息。使用cookies和session結(jié)合的方式，即可實現(xiàn)登錄后無刷新保存用戶信息的功能。其原理如圖所示：</p><p>　　圖4-2 登錄模塊原理圖</p><p>　　服務(wù)器端登錄成功后將session保存在服務(wù)器端等待用戶下次頁面刷新操作時獲取。而cookies數(shù)據(jù)則直接可以返回客戶端被jQuery獲取并作出相應(yīng)的操作動作。</p><p>　　在服務(wù)

83、器將cookies通過response發(fā)給客戶端后，登錄完成。保存頁面端的登錄狀態(tài)需要對頁面加入對cookies的檢測函數(shù)。</p><p>　　對瀏覽器中的所有cookie進行遍歷，當遍歷到cookiename為mywhom_logon時，說明為登錄狀態(tài)。運行結(jié)果如下：</p><p>　　圖 4-3 登錄模塊運行結(jié)果</p><p>　?。ㄈ〢JAX技術(shù)在購物

84、車中的應(yīng)用</p><p>　　在購物車應(yīng)用中，將研究服務(wù)器端采用Struts1.2框架的ajax交互方式。</p><p>　　與普通JSP交互方式不同的是，基于MVC的Struts框架將request和response分離出來進行處理。建立購物車form類，每個商品有三個屬性：編號，數(shù)量，總價。命名及類型如下：</p><p>　　表 4-1 CartGoods

85、Form類參數(shù)一覽</p><p>　　當用戶將商品放入購物車時，實際上是將一個代表商品的CartGoodsForm類實例添加到用戶的會話中，為了方便對會話中的商品進行管理，使用了一個容器對象ArrayList< CartGoodsForm >，該列表可以方便地保存、刪除和查找CartGoodsForm類實例。也就是說，用戶在會話中保存了一個容器對象ArrayList<CartGoodsForm

86、>，當用戶添加商品時，只需要在容器對象ArrayList<CartGoodsForm>中添加一個實例。</p><p>　　Action端需要接收來自頁面的參數(shù)包括：商品編號，數(shù)量，商品總價，當前購物車總數(shù)和購物車總花費。其中前三個參數(shù)封裝為CartGoodsForm類發(fā)送，后兩個參數(shù)作為散裝數(shù)據(jù)隨url發(fā)送到服務(wù)器端。購物車主要的功能是在用戶在不登陸的情況下點擊購買商品后，使用ajax處理請求

87、，將商品的ID和數(shù)量、總價信息加入會話中，同時在購物車中生成相應(yīng)的包括總價和數(shù)量在內(nèi)的清單信息。當再次購物相同商品時，數(shù)量和總價相應(yīng)變化。</p><p>　　先準備處理前的數(shù)據(jù)，用于后面購物車操作：</p><p>　　其中將session中獲取的對象強轉(zhuǎn)為ArrayList類型的oldcartlst對象，并新建新的cartlist用于接收新商品數(shù)據(jù)。新建oldCart用于封裝原本有商品

88、的購物車。獲取url中的購物車商品總數(shù)和總花費參數(shù)。</p><p>　　控制器Action類首先獲取服務(wù)器中的購物車session，將其強轉(zhuǎn)為oldcartlst的ArrayList對象。并對oldcartlst進行檢測是否為空。當為空時，執(zhí)行新商品加入語句：</p><p>　　將Cartgdsform中的數(shù)據(jù)直接封裝在新建的cartlist中并存到session中即完成了購物的最初新

89、商品加入。</p><p>　　如果檢測到oldcartlst中已存在數(shù)據(jù)時，就要對oldcartlst中的商品ID進行遍歷，遍歷過程既是將form中的ID數(shù)據(jù)與oldcartlst中的每一個ID進行比對。語句如下：</p><p>　　當匹配到相同ID商品時，相同ID的flag標記為true，記錄其索引位置i，并執(zhí)行更新購物車語句：</p><p>　　更新語句中

90、，將在購物車中已有的商品數(shù)據(jù)取出并進行累加處理。將計算后的新商品數(shù)量，價格同ID一起再封裝回oldCart中。將oldCart對象在ArrayList相應(yīng)的索引位置i上進行更新。就完成了原商品數(shù)量和價錢的更新操作。將更新后的oldcartlst存回session中即可。</p><p>　　如果不用與上述情況，在遍歷后發(fā)現(xiàn)沒有同樣ID的商品后，執(zhí)行以下語句：</p><p>　　其原理和加

91、入新商品相同，只是將封裝的Cartgdsform數(shù)據(jù)追加到原有的oldcartlst購物車中，并更新session即可。</p><p>　　與Ajax交互的Action 類和普通的Action類不同在于，Ajax控制器的ForwardAction組件是不能被激活的，因為在ajax交互中不需要頁面跳轉(zhuǎn)，取而代之的是response。所以，在Action類的最后return一個空值即可。</p>&l

92、t;p>　　在客戶端中，拖拽的實現(xiàn)是使用draggable和droppable方法，當鼠標拖起相應(yīng)的元素時，先克隆被選擇器選取的HTML元素，并設(shè)置被選取HTML元素的CSS屬性z-index為10。這樣，被選取的元素就可以顯示在上層。當放置在特定區(qū)域后，執(zhí)行添加商品的函數(shù)，就完成了拖拽動作。實現(xiàn)語句如下：</p><p>　　保存商品同樣使用了cookies和session結(jié)合的方式，即除了購物車的列表保

93、存在session中外，商品總數(shù)量和總花費在添加商品時同時保存在session中和cookies中。</p><p>　　在處理完生成和保存cookies后，最新加入的商品進行總商品數(shù)和總花費的累加計算。并把計算結(jié)果連同單個商品的單價、數(shù)量、總價數(shù)據(jù)一同通過$.get發(fā)送到控制器端交互，并進行相應(yīng)的數(shù)據(jù)返回，購物車的功能就實現(xiàn)了。運行結(jié)果如下：</p><p>　　圖 4-4 購物車模塊運

94、行結(jié)果</p><p>　?。ㄋ模〢JAX技術(shù)在搜索自動完成中的應(yīng)用</p><p>　　搜索自動完成的實質(zhì)是當用戶在文本框中鍵入關(guān)鍵字抬起按鍵后，激活函數(shù)體，進行交互。但是，搜索提示的彈出，在實現(xiàn)中要返回大量來自數(shù)據(jù)庫的數(shù)據(jù)。單用response發(fā)配HTML的交互是不可取的。因此，要使用XML作為載體來返回提示數(shù)據(jù)?？蓴U展標記語言XML，不同于HTML的是，HTML用來顯示而XML是傳輸

95、數(shù)據(jù)的載體。最大的不同點是，它的標簽全部都由開發(fā)者自定義。當數(shù)據(jù)返回時，jQuery會對其進行解析，讀取數(shù)據(jù)。</p><p>　　首先，先編寫生成XML的JSP頁面search_word_xml.jsp。此頁面用于服務(wù)器端處理搜索結(jié)果并同時顯示出“<words><word>text</word></words>”的xml文檔。代碼如下：</p>&l

96、t;p>　　當獲取到關(guān)鍵字以后，將所有在商品名稱中有該關(guān)鍵字的記錄全部循環(huán)輸出，并組裝成以下形式：</p><p>　　在客戶端采用$.post方式交互，格式如下：</p><p>　　其中，參數(shù)key為要搜索的關(guān)鍵字，type為要在哪個大類中進行搜索，默認為全部分類中搜索。此交互方法與上文中的其他應(yīng)用不同在于，交互類型參數(shù)要設(shè)置為“XML”，即采用XML形式交互。</p>

97、;<p>　　在返回數(shù)據(jù)data的處理中，將DOM對象先轉(zhuǎn)換為jQuery對象后，采用遍歷方式對每個節(jié)點進行遍歷，并拼裝HTML，生成下拉的DIV彈出層。語句如下：</p><p>　　對鼠標經(jīng)過和點擊事件、鍵盤上下按鍵，回車鍵等的事件進行檢測判斷，執(zhí)行相應(yīng)的函數(shù)，商品搜索的自動完成功能就實現(xiàn)了。運行結(jié)果：</p><p>　　圖 4-5 搜索自動完成模塊運行結(jié)果</p

98、><p>　?。ㄎ澹〢JAX技術(shù)在供應(yīng)商后臺管理系統(tǒng)中的應(yīng)用</p><p>　　供應(yīng)商后臺管理系統(tǒng)采用國內(nèi)開源的DWZ異步框架，它更好的繼承并詮釋了jQuery的傳統(tǒng)，“寫的少，做的多”。開發(fā)者只需關(guān)心數(shù)據(jù)的發(fā)送和返回，并使用封裝好的功能插件來實現(xiàn)數(shù)據(jù)的增加、刪除、修改、查看等等操作。在上文的應(yīng)用實例中，介紹了XML為載體的ajax交互方式，而后臺管理系統(tǒng)中，將全部采用JSON形式的數(shù)組返回

99、數(shù)據(jù)，并使用特定的方法來解析。</p><p>　　在系統(tǒng)中，涉及到的最典型的實例為表單的提交功能。在表單中加入如下方法：</p><p>　　在表單提交時，觸發(fā)validateCallback函數(shù)，函數(shù)中有兩個參數(shù)，分別是當前form和回調(diào)函數(shù)。其中validateCallback函數(shù)包含一個類型為json的ajax交互函數(shù)，語句如下：</p><p>　　在函數(shù)

100、中，首先驗證表單中的數(shù)據(jù)格式是否有效，在有效的情況下，使用$.ajax函數(shù)進行交互。函數(shù)通過$form.attr("action")方法選取到form表單中action的url地址。并通過serializeArray()方法遍歷表單中的各個控件的值，并組裝通過post方式發(fā)送至服務(wù)器。服務(wù)器處理時，框架預定義了三種json格式的結(jié)果。即statusCode：200為操作成功，statusCode：300為操作失敗，s

101、tatusCode：301為會話超時。對于刪除，插入，修改等執(zhí)行類動作，只用返回失敗或成功值即可。但是對于查詢等要返回記錄集的動作中，就要使用forwardUrl來定義發(fā)配數(shù)據(jù)的載體頁面。json格式的文檔如下：</p><p>　　在$.ajax方法中交互成功時即success參數(shù)中的內(nèi)容激活，根據(jù)自定義的設(shè)置，如果存在callback函數(shù)，則使用：</p><p>　　其中，服務(wù)器返回

102、的json格式數(shù)據(jù)先于DWZ庫數(shù)據(jù)預定義的狀態(tài)成功碼進行比對，在相同時則執(zhí)行相關(guān)動作，包括重新載入標簽頁和新載入標簽頁的操作。另外檢測json中的callbackType是否為forwardUrl，并執(zhí)行相關(guān)跳轉(zhuǎn)操作。</p><p>　　普通的struts框架跳轉(zhuǎn)語句會配置在struts-config.xml中，而采用了DWZ框架的ajax交互方式后，在struts-config.xml中定義統(tǒng)一的ajaxDo

103、ne.jsp路徑，每個從服務(wù)器返回動態(tài)數(shù)據(jù)只需要在ajaxDone.jsp中組裝成json格式的數(shù)據(jù)并被DWZ解析做相應(yīng)的處理就可完成交互，而跳轉(zhuǎn)頁面具體url也相應(yīng)的調(diào)整到了action中。原理圖如下：</p><p>　　圖 4-6 Struts與json類型的ajax交互原理</p><p>　　五、AJAX技術(shù)在應(yīng)用中的問題及解決</p><p>　　（一）

104、AJAX在客戶端的緩存問題</p><p>　　眾所周知，Ajax不僅能實現(xiàn)完美的用戶體驗，還能提高頁面載入的速度。其主要原理是通過Ajax減少重復數(shù)據(jù)的載入，在交互的第一次進行后，客戶端載入數(shù)據(jù)的同時將數(shù)據(jù)緩存在瀏覽器內(nèi)存中，一旦數(shù)據(jù)被載入，只要頁面未刷新，該數(shù)據(jù)就永遠的緩存在內(nèi)存中。當用戶再次提交相同的數(shù)據(jù)時，Ajax則會默認的不從服務(wù)器上去獲取數(shù)據(jù)，而是返回客戶端中緩存數(shù)據(jù)，極大的降低了服務(wù)器的負載和提高了

105、用戶的體驗。</p><p>　　例如在用戶名檢測中，如果用戶在第一次輸入檢測信息為“AAA”時，服務(wù)器返回“失敗”的信息。而用戶在不刷新注冊頁面的條件下，再次輸入“AAA”進行檢測時，Ajax不會將“AAA”信息與服務(wù)器進行交互而是直接從客戶端緩存中提取“AAA”的結(jié)果——“失敗”直接顯示在客戶端上。</p><p>　　但是這種優(yōu)點有時會帶來一些BUG，比如，如果甲用戶在第一次驗證“B

106、BB”用戶名時是成功的，隨后改為了用戶名“CCC”，在填寫完其他資料后，又將用戶名改為之前的“BBB”，這時客戶端會直接使用緩存中的結(jié)果。但是在甲用戶第一次驗證成功“BBB”并開始填寫其他資料時，另一個用戶乙可能已經(jīng)注冊了“BBB”用戶名。而甲在改回“BBB”并成功時，是沒有通過服務(wù)器進行再次驗證的，提交后就導致了數(shù)據(jù)重復，違反了用戶名的唯一性。產(chǎn)生BUG。這種問題在其他異步交互中也是常存在的。</p><p>

107、　　在電子商務(wù)分銷平臺中所采用的解決辦法是為提交的url加入時間截。時間截是一組精確到毫秒的數(shù)據(jù)串，這組數(shù)據(jù)串在每毫秒中都是唯一的。將這組數(shù)據(jù)串以“t=時間截”的形式組裝在url的后面，這樣在每次交互時，客戶端都會認定為是一次新的請求，避免了讀取緩存數(shù)據(jù)，其函數(shù)如下：</p><p>　?。ǘ〢JAX技術(shù)潛在的安全問題</p><p>　　由google帶領(lǐng)的ajax浪潮已經(jīng)顯然淹沒了它