靜態(tài)網(wǎng)頁(yè)技術(shù)廣泛用于早期的信息系統(tǒng)中，系統(tǒng)頁(yè)面中的超文本結(jié)構(gòu)和導(dǎo)航菜單是描述語(yǔ)言的典型方式。超文本與關(guān)系數(shù)據(jù)庫(kù)全面集成,實(shí)現(xiàn)了具有豐富數(shù)據(jù)集成的頁(yè)面，但也對(duì)設(shè)計(jì)模式和描述語(yǔ)言提出了新要求。隨著頁(yè)面交互性的增加、客戶端腳本語(yǔ)言的改進(jìn)以及cookies和會(huì)話框等概念的出現(xiàn),傳統(tǒng)描述語(yǔ)言在這些豐富的頁(yè)面技術(shù)方面顯得非常困難,只可提供可視化的組件,系統(tǒng)的交互性普遍受到傳統(tǒng)網(wǎng)頁(yè)模式的極大限制[1-2]。簡(jiǎn)單的使用頁(yè)面鏈接顯然已不能滿足用戶對(duì)系統(tǒng)頁(yè)面性能方面日益增長(zhǎng)的需求，以及用戶對(duì)系統(tǒng)快速、高效、準(zhǔn)確響應(yīng)的要求。
    被廣泛采用的基于“請(qǐng)求—響應(yīng)”這種傳統(tǒng)MVC交互模式的信息系統(tǒng)，在每次頁(yè)面數(shù)據(jù)和請(qǐng)求響應(yīng)的處理過(guò)程中，首先通過(guò)后臺(tái)函數(shù)獲取用戶填寫的表單字段內(nèi)容，然后將攜帶表單內(nèi)容的函數(shù)被整個(gè)傳送到對(duì)應(yīng)的處理函數(shù)(通常是具體的Action函數(shù)實(shí)現(xiàn)處理過(guò)程)，完成與數(shù)據(jù)庫(kù)的交互，最后服務(wù)器根據(jù)處理結(jié)果，全面更新相應(yīng)的頁(yè)面進(jìn)行響應(yīng)。在數(shù)據(jù)的傳遞、交互，以及服務(wù)器上的腳本和程序處理過(guò)程中，用戶必須被迫等待頁(yè)面響應(yīng)，直到服務(wù)器安全返回?cái)?shù)據(jù)后，再重新繪制整個(gè)系統(tǒng)頁(yè)面。在整個(gè)處理過(guò)程中，用戶得不到實(shí)時(shí)反饋，系統(tǒng)表現(xiàn)出較差的數(shù)據(jù)通信實(shí)時(shí)性，浪費(fèi)了大量的帶寬和服務(wù)器處理空間[3]。而新興的Ajax技術(shù)整合了傳統(tǒng)的Web應(yīng)用程序設(shè)計(jì)技術(shù)，將傳統(tǒng)Web頁(yè)面進(jìn)行改進(jìn)，并轉(zhuǎn)化成具有很強(qiáng)交互性的Web應(yīng)用程序，極大提高了各網(wǎng)站W(wǎng)eb頁(yè)面與用戶的交互能力和響應(yīng)速度[4],并已廣泛應(yīng)用于各信息系統(tǒng)的建設(shè)中。
    針對(duì)MVC模式的信息系統(tǒng)在數(shù)據(jù)響應(yīng)、處理時(shí)的頁(yè)面等待問(wèn)題，結(jié)合Ajax在Web應(yīng)用程序中的應(yīng)用，本文介紹了Ajax技術(shù)的基本原理,分析了Ajax技術(shù)的特點(diǎn),對(duì)于改變MVC 模式的信息系統(tǒng)頁(yè)面中數(shù)據(jù)處理過(guò)程和提高數(shù)據(jù)響應(yīng)速度提出了具體實(shí)現(xiàn)方法。
1 Ajax技術(shù)
　    技術(shù)上來(lái)看，Ajax技術(shù)是多種傳統(tǒng)網(wǎng)頁(yè)技術(shù)的結(jié)合，主要包括：超文本標(biāo)記語(yǔ)言(HTML)、JavaScript、文檔模型DOM(Document Object Model)等；從實(shí)際表現(xiàn)出的作用上來(lái)看，Ajax的主要作用是為各Web頁(yè)面與服務(wù)器之間的數(shù)據(jù)信息交換提供一種便捷、可靠的解決方案。其中，HTML作用并沒(méi)有大的變化，仍是用于描述Web網(wǎng)頁(yè)的表單字段等，并且通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記應(yīng)用程序其他部分要使用的字段,結(jié)合CSS實(shí)現(xiàn)Web頁(yè)面的標(biāo)準(zhǔn)化顯示。JavaScript代碼是Ajax應(yīng)用程序的核心代碼，它用于獲取和處理Web頁(yè)面的所有表單數(shù)據(jù)，幫助改進(jìn)Web頁(yè)面與服務(wù)器上應(yīng)用程序之間的數(shù)據(jù)通信，JavaScript中的XMLHttpRequest對(duì)象是實(shí)現(xiàn)Ajax技術(shù)的核心[5]。文檔對(duì)象模型DOM定義操作文檔對(duì)象的接口，將文檔看成樹(shù)形結(jié)構(gòu)的數(shù)據(jù)對(duì)象，每個(gè)樹(shù)種節(jié)點(diǎn)對(duì)應(yīng)一個(gè)XML標(biāo)記(即對(duì)象)，作為Ajax開(kāi)發(fā)的基礎(chǔ)結(jié)構(gòu)和精髓部分，DOM用于處理HTML文檔中的元素和某些情況下服務(wù)器返回的XML，它將Web頁(yè)面中需要交互的部分元素設(shè)置為對(duì)象，通過(guò)對(duì)對(duì)象的操作改變靜態(tài)Web頁(yè)面的內(nèi)容[6-7]?？梢?jiàn)DOM是實(shí)現(xiàn)在瀏覽器端改變頁(yè)面內(nèi)容，實(shí)現(xiàn)Web頁(yè)面局部刷新和異步請(qǐng)求的基礎(chǔ)。
    Ajax工作原理的主要特點(diǎn)是作為提供給用戶使用的瀏覽器端Web頁(yè)面與處理Web頁(yè)面中各數(shù)據(jù)、對(duì)象的服務(wù)器之間的中間處理層，對(duì)Web頁(yè)面中用戶請(qǐng)求的處理工作由Ajax中間層和服務(wù)器共同處理[8]。通常當(dāng)頁(yè)面數(shù)據(jù)需要變化（更新、重置等情況）時(shí)，Ajax會(huì)通過(guò)XMLHttpRequest對(duì)象向服務(wù)器發(fā)送請(qǐng)求，因此,可以將Ajax中間處理層看作Web頁(yè)面端的一個(gè)后臺(tái)服務(wù)程序，利用Ajax構(gòu)造的中間處理層實(shí)現(xiàn)Web頁(yè)面與服務(wù)器之間的數(shù)據(jù)通信及大數(shù)據(jù)的實(shí)時(shí)更新等[9]。Ajax的整體工作原理以及流程如圖1所示。

2 Ajax技術(shù)的實(shí)現(xiàn)
    Ajax最大的特點(diǎn)是將Web頁(yè)面數(shù)據(jù)與服務(wù)器之間的交互轉(zhuǎn)入后臺(tái)，減少了傳統(tǒng)Web頁(yè)面每次數(shù)據(jù)更新都必須等待后臺(tái)服務(wù)器響應(yīng)所造成的大量時(shí)間浪費(fèi)，以及每次更新頁(yè)面都必須重復(fù)傳輸大量的不必要信息所造成的通信帶寬浪費(fèi)[10]。Ajax中間處理層最主要的作用就是解決以上兩個(gè)問(wèn)題，而其最核心的構(gòu)成部件是XMLHttpRequest對(duì)象，由XMLHttpRequest對(duì)象進(jìn)行數(shù)據(jù)的傳輸和獲取服務(wù)器響應(yīng),其基本組成和創(chuàng)建過(guò)程為：(1)新建XMLHttpRequest對(duì)象,如var request=new XMLHttpRequest()。(2)通過(guò)open()方法新建Web頁(yè)面端到服務(wù)器的請(qǐng)求。語(yǔ)法如request.open(“GET””,url,true)，即使用GET方法請(qǐng)求服務(wù)器，通過(guò)url攜帶請(qǐng)求的具體信息(如向服務(wù)器請(qǐng)求的具體函數(shù)方法)，“true”為默認(rèn)值，表示請(qǐng)求為異步請(qǐng)求，通過(guò)“true”保證程序發(fā)送請(qǐng)求之后可繼續(xù)執(zhí)行，而不必等待服務(wù)器響應(yīng)。(3)通過(guò)readystate屬性提供當(dāng)前HTML的就緒狀態(tài)，設(shè)置服務(wù)器完成請(qǐng)求處理之后如何進(jìn)行響應(yīng)，如要求相應(yīng)之后即更新Web頁(yè)面數(shù)據(jù)，則在send()方法之前定義request.onreadystatechange=updateData，同時(shí)定義function updateData(){}的具體函數(shù)實(shí)現(xiàn)法。(4)通過(guò)send()方法向服務(wù)器發(fā)送請(qǐng)求。send()方法是一個(gè)Ajax事件，語(yǔ)法如request.send(“user=”+username+”&pwd”+password)，通過(guò)send()攜帶需要傳遞的數(shù)據(jù)提交給服務(wù)器處理。(5)通過(guò)responseText屬性攜帶服務(wù)器返回的響應(yīng)文本，通常定義在回調(diào)函數(shù)中，如updateData(){var response=request.responseText;}，最后回調(diào)函數(shù)通過(guò)訪問(wèn)DOM對(duì)象樹(shù)實(shí)現(xiàn)無(wú)頁(yè)面刷新情況下的部分?jǐn)?shù)據(jù)更新。
3 基于Ajax和MVC模式的信息系統(tǒng)設(shè)計(jì)
    普通的MVC模式由JSP組成視圖層，Servlet組成控制層，Javabean組成模型層。為改善MVC模式下信息系統(tǒng)(主要是針對(duì)B/S架構(gòu)的信息系統(tǒng))的交互性，使其具有更強(qiáng)的交互性及更快的響應(yīng)速度，為用戶提供更高效的服務(wù)。在系統(tǒng)的設(shè)計(jì)過(guò)程中引入Ajax技術(shù)是非常好的選擇，同時(shí)Ajax能夠使得系統(tǒng)Web頁(yè)面的設(shè)計(jì)更加便捷，能夠縮短開(kāi)發(fā)周期，降低信息系統(tǒng)各模塊代碼的耦合性、提高代碼可重用性[11]。信息系統(tǒng)(B/S架構(gòu))的設(shè)計(jì)要求提供Web頁(yè)面端用于系統(tǒng)與用戶的交互，主要通過(guò)JSP頁(yè)面實(shí)現(xiàn)。普通信息系統(tǒng)主要功能包括對(duì)用戶信息的基本操作,以及通過(guò)Web頁(yè)面對(duì)數(shù)據(jù)庫(kù)中的信息進(jìn)行增、刪、查、改等操作。信息系統(tǒng)與用戶的交互主要涉及對(duì)頁(yè)面數(shù)據(jù)的獲取、數(shù)據(jù)的傳輸、數(shù)據(jù)與數(shù)據(jù)庫(kù)的交互、頁(yè)面的更新等。
    結(jié)合Ajax的信息系統(tǒng)設(shè)計(jì)并沒(méi)有顛覆MVC設(shè)計(jì)模式的整體框架，而是在MVC系統(tǒng)的體系結(jié)構(gòu)中根據(jù)Web頁(yè)面對(duì)數(shù)據(jù)處理的具體需要融入Ajax技術(shù)。信息系統(tǒng)中的Ajax使用與Web 2.0應(yīng)用中的Ajax技術(shù)稍有不同，它并未完全套用XMLHttpRequest對(duì)象的定義方式，而是應(yīng)用于MVC模式中的XMLHttpRequest對(duì)象被改進(jìn)了。為了更加方便處理來(lái)自系統(tǒng)頁(yè)面中的請(qǐng)求發(fā)送和對(duì)數(shù)據(jù)的調(diào)用、回調(diào)等,在系統(tǒng)設(shè)計(jì)中使用的是jQuery中$.ajax()方法，其結(jié)構(gòu)如$.ajax(option)，它只包含一個(gè)參數(shù)，但在這個(gè)對(duì)象中同時(shí)包含所有的請(qǐng)求設(shè)置、回調(diào)函數(shù)等信息。使用$.get()或$.post()方法進(jìn)行異步請(qǐng)求，獲取輸入數(shù)據(jù)并建立與服務(wù)器連接，實(shí)現(xiàn)XMLHttpRequest對(duì)象在Web應(yīng)用中的作用,其結(jié)構(gòu)為：$.get(url [data] [callback] [type])。使用$.getJSON方法獲取json數(shù)據(jù)(輕量級(jí)的一種數(shù)據(jù)交換格式),通過(guò)json的使用能夠很方便地將來(lái)自頁(yè)面的信息轉(zhuǎn)換為字符串傳遞給服務(wù)器端程序。
    根據(jù)$.ajax()函數(shù)方法的用法特點(diǎn)以及Ajax技術(shù)的整體工作原理，結(jié)合MVC模式的三層結(jié)構(gòu)，融入了Ajax技術(shù)的MVC模式信息系統(tǒng)體系結(jié)構(gòu)[12],如圖2所示。

    由圖2可見(jiàn)，MVC模式被進(jìn)一步細(xì)化了。在視圖層的設(shè)計(jì)中將Web頁(yè)面的表單和數(shù)據(jù)寫為HTML文檔和各獨(dú)立的DOM對(duì)象，與JSP頁(yè)面構(gòu)成新的視圖層，以方便利用Ajax技術(shù)對(duì)頁(yè)面對(duì)象進(jìn)行操作。通過(guò)JavaScript定義頁(yè)面中數(shù)據(jù)請(qǐng)求的傳輸方式，通過(guò)$.ajax()對(duì)象寫入到*.jsp文檔中。分離Servlet控制層的數(shù)據(jù)轉(zhuǎn)換處理過(guò)程和視圖層數(shù)據(jù)顯示的控制過(guò)程，并將對(duì)視圖層的數(shù)據(jù)獲取等過(guò)程提前到Web頁(yè)面中進(jìn)行，簡(jiǎn)化邏輯處理層的操作?？刂破鞯奶幚砉ぷ髦饕?yōu)閭鬟f函數(shù)獲取到的數(shù)據(jù)字符串，并定義通過(guò)請(qǐng)求響應(yīng)成功后的callback函數(shù)作為數(shù)據(jù)處理的中轉(zhuǎn)站,完成與模型層的數(shù)據(jù)通信,為視圖層提供響應(yīng)，callback函數(shù)定義為jQuery.getJSON(url,data,callback)。
    信息系統(tǒng)中廣泛存在對(duì)用戶信息的管理，其中一項(xiàng)就是對(duì)用戶的登錄名和密碼的修改功能。首先，通過(guò)Ajax技術(shù)，設(shè)計(jì)視圖層表單和JSP頁(yè)面。接著，從控制層中分離出數(shù)據(jù)的傳遞功能和具體數(shù)據(jù)獲取功能，通過(guò)JavaScript在*.jsp文檔中的$.ajax()方法定義頁(yè)面中數(shù)據(jù)的傳遞方式、傳輸格式、目標(biāo)地址等，為后續(xù)控制層獲取數(shù)據(jù)提供基礎(chǔ)服務(wù)。Servlet控制器則專注于具體數(shù)據(jù)傳遞功能的實(shí)現(xiàn)(Action)，將輸入數(shù)據(jù)傳遞給具體的功能函數(shù)進(jìn)行處理。之后數(shù)據(jù)通過(guò)Javabean模型與數(shù)據(jù)庫(kù)實(shí)現(xiàn)數(shù)據(jù)交互，完成用戶數(shù)據(jù)的刪除，最后回調(diào)函數(shù)通過(guò)DOM對(duì)象樹(shù)實(shí)現(xiàn)無(wú)頁(yè)面刷新情況下的部分?jǐn)?shù)據(jù)更新。整個(gè)功能設(shè)計(jì)的部分實(shí)現(xiàn)代碼如下：
    (1)定義用戶名、密碼的視圖層設(shè)計(jì)主要代碼為：
    <tr>
    <td class="tdWidth">登錄名:</td>
    <td>
    <input type="text" name="username" id="username"
        class="inputText" disabled="disabled" />
    </td>
    <td class="tdWidth">登錄密碼:</td>
    <td>
    <input type="password" name="userPwd" id="userPwd"
        class="inputText" />
    </td>
    </tr>
    (2)JSP頁(yè)面中的$.ajax( )方法部分腳本代碼實(shí)現(xiàn)如下。
    $.ajax({
        type: "POST",                   //用POST方式傳輸
        datatype:"json",                     //數(shù)據(jù)格式: JSON
　　url:'updateUserAdmin.action',    //目標(biāo)地址
　　data:"userId=<%=userId%>"    
    &username="+username+"&userPwd="+userPwd"
　　success:function(root){
　　var obj = eval(&prime;(&prime;+ root + &prime;)&prime;);
　　}
    (3)控制器中的Action實(shí)現(xiàn)代碼如下：
    publicvoid updateUserAdmin(){
    customer = new SUsers();
    customer.setUserName(username);
    customer.setUserPwd(userPwd);
    int temp=
    adminEmployeeService.updateUserAdmin(customer)
    }
　    整個(gè)過(guò)程中，首先將視圖層中的各元素、表單等設(shè)計(jì)為DOM對(duì)象模式,在JSP頁(yè)面中編寫數(shù)據(jù)獲取Ajax技術(shù)實(shí)現(xiàn)代碼，將數(shù)據(jù)傳遞給控制器Action，控制器將數(shù)據(jù)進(jìn)行轉(zhuǎn)換并傳遞給功能函數(shù)，最后模型層根據(jù)數(shù)據(jù)的變化完成與數(shù)據(jù)庫(kù)信息的交互。數(shù)據(jù)處理功能的實(shí)現(xiàn)只是對(duì)Web頁(yè)面中定義的DOM對(duì)象樹(shù)中需要處理的節(jié)點(diǎn)進(jìn)行操作。按照這種設(shè)計(jì)和實(shí)現(xiàn)方法，將Ajax技術(shù)應(yīng)用于對(duì)整個(gè)信息系統(tǒng)的管理中，從而避免系統(tǒng)JSP頁(yè)面信息的整體傳輸和刷新，縮短用戶的等待時(shí)間，減少服務(wù)器和通信帶寬資源的浪費(fèi)。同時(shí)Web頁(yè)面允許用戶繼續(xù)操作其他表單，提供一種多進(jìn)程并發(fā)處理的模式，使得信息系統(tǒng)表現(xiàn)出較強(qiáng)的實(shí)時(shí)交互性。
    本文根據(jù)Ajax技術(shù)的特點(diǎn),利用其在Web應(yīng)用程序中表現(xiàn)出的優(yōu)異互動(dòng)性,借助XMLHttpRequest對(duì)象的處理思想,將jQuery的Ajax方法融入MVC模式信息系統(tǒng)(B/S架構(gòu))的設(shè)計(jì)中。將系統(tǒng)Web頁(yè)面需要交互的元素設(shè)置為DOM對(duì)象樹(shù),通過(guò)JavaScript編碼操作對(duì)象，使得系統(tǒng)能夠?qū)崿F(xiàn)數(shù)據(jù)的異步、實(shí)時(shí)處理。從而使得信息系統(tǒng)的Web頁(yè)面具有很強(qiáng)的交互性,避免了用戶在使用系統(tǒng)的過(guò)程中，因?yàn)榈却笈_(tái)數(shù)據(jù)的處理而停止其他工作，提高了時(shí)間利用率和系統(tǒng)工作效率。但數(shù)據(jù)的通信和處理過(guò)程還是顯得非常冗雜，后續(xù)主要研究應(yīng)該包括：如何通過(guò)Ajax技術(shù)的$.ajax()方法建立頁(yè)面數(shù)據(jù)到模型層直接通信,及如何實(shí)現(xiàn)將數(shù)據(jù)的獲取和處理函數(shù)嵌入到$.ajax()中。
參考文獻(xiàn)
[1] SINGH A K. Ajax asynchronous database refresh[J]. International Journal of Information and Communication Technology Research, 2012,2(8):669-703.
[2] 黃偉.基于MVC架構(gòu)的Web應(yīng)用系統(tǒng)設(shè)計(jì)[J]. 微型機(jī)與應(yīng)用，2004，23(11)：13-15.
[3] 楊斌，張衛(wèi)東，張利欣,等. 基于Ajax的Observer模式客戶端研究[J].計(jì)算機(jī)工程，2010，36(24)：4-5.
[4] 張宇，王映輝，張翔南. 基于Spring的MVC框架設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)工程，2010，36(4):59-62.
[5] 朱印宏. JavaScript征途[M]. 北京：電子工業(yè)出版社，2009.
[6] 陳莉莉，張麗，劉正龍.搜索引擎中基于狀態(tài)的Ajax動(dòng)態(tài)網(wǎng)頁(yè)提取研究[J].計(jì)算機(jī)應(yīng)用與軟件， 2013，30(7)：217-220.
[7] 郭泉成，劉紅，雷長(zhǎng)海.基于Asp.net Ajax技術(shù)的民主評(píng)議系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用，2013,32(10)：4-6.
[8] DUDA C, FREY G, KOSSMANN D,et al. AJAXSearching: crawing, indexing and searching Web 2.0 application[C]. VLDB, 2008.
[9] SINGH A K. Ajax complexity[J]. International Journal of Engineering Science Paradigms and Researches,2012,1(1):2319-6564.
[10] 林劍熊， 周曉慧. 基于Ajax和MVC架構(gòu)的研究與應(yīng)用[J].機(jī)電工程，2010，27(4)：90-92.
[11] 陽(yáng)鋒 徐建波. AJAX技術(shù)的性能改進(jìn)研究[J]. 計(jì)算機(jī)工程與科學(xué), 2008,30(6):146-148.
[12] 張?jiān)?，張昭，劉? 基于MVC設(shè)計(jì)模式的虛擬實(shí)驗(yàn)平臺(tái)模塊化設(shè)計(jì)[J].計(jì)算機(jī)工程與科學(xué), 2013,35(8):125-129.