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

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

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