《電子技術(shù)應(yīng)用》
您所在的位置:首頁 > 通信與網(wǎng)絡(luò) > 設(shè)計應(yīng)用 > 基于Ajax與MVC模式的信息系統(tǒng)的研究與設(shè)計
基于Ajax與MVC模式的信息系統(tǒng)的研究與設(shè)計
來源:電子技術(shù)應(yīng)用2014年第2期
唐永瑞, 張達(dá)敏
(貴州大學(xué) 電子信息學(xué)院, 貴州 貴陽550025)
摘要: 針對MVC模式的B/S架構(gòu)信息系統(tǒng)Web頁面表現(xiàn)出的實(shí)時性較差的問題,嘗試將Ajax融入MVC模式系統(tǒng)的結(jié)構(gòu)設(shè)計之中,利用Ajax技術(shù)的高交互性設(shè)計信息系統(tǒng)的Web頁面,改進(jìn)Web頁面中的表單數(shù)據(jù)處理過程。通過文檔對象模型DOM將各文檔定義為樹形結(jié)構(gòu)的數(shù)據(jù)對象,同時處理HTML文檔中的元素。最后用JavaScript編碼處理頁面中的對象,實(shí)現(xiàn)Ajax技術(shù)在MVC模式中的應(yīng)用,提高信息系統(tǒng)Web頁面的交互性。
中圖分類號: TP315
文獻(xiàn)標(biāo)識碼: A
文章編號: 0258-7998(2014)02-0128-04

The research and design of the information system based on Ajax and MVC pattern
Tang Yongrui, Zhang Damin
College of Electronic Information,Guizhou University, Guiyang 550025,China
Abstract: To solve the problem of the real-time performance that exist in the B/S structure Information System based on MVC pattern, try to integrate Ajax technology into the design of the MVC pattern system,using the high interactivity of the Ajax technology to design Web page of the information system, to improve the data processing in the Web page. Through the DOM(Document Object Model) defines all the documents as a tree structure of data objects,at the same time DOM processing elements in the HTML document,at last deal with the objects in the Web page by Java Script code,thus to release the application of the Ajax technology in the MVC pattern,improve the interactivity of the Web page in the information system.
Key words : Ajax; MVC pattern; interactivity; information system

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

2 Ajax技術(shù)的實(shí)現(xiàn)
    Ajax最大的特點(diǎn)是將Web頁面數(shù)據(jù)與服務(wù)器之間的交互轉(zhuǎn)入后臺,減少了傳統(tǒng)Web頁面每次數(shù)據(jù)更新都必須等待后臺服務(wù)器響應(yīng)所造成的大量時間浪費(fèi),以及每次更新頁面都必須重復(fù)傳輸大量的不必要信息所造成的通信帶寬浪費(fèi)[10]。Ajax中間處理層最主要的作用就是解決以上兩個問題,而其最核心的構(gòu)成部件是XMLHttpRequest對象,由XMLHttpRequest對象進(jìn)行數(shù)據(jù)的傳輸和獲取服務(wù)器響應(yīng),其基本組成和創(chuàng)建過程為:(1)新建XMLHttpRequest對象,如var request=new XMLHttpRequest()。(2)通過open()方法新建Web頁面端到服務(wù)器的請求。語法如request.open(“GET””,url,true),即使用GET方法請求服務(wù)器,通過url攜帶請求的具體信息(如向服務(wù)器請求的具體函數(shù)方法),“true”為默認(rèn)值,表示請求為異步請求,通過“true”保證程序發(fā)送請求之后可繼續(xù)執(zhí)行,而不必等待服務(wù)器響應(yīng)。(3)通過readystate屬性提供當(dāng)前HTML的就緒狀態(tài),設(shè)置服務(wù)器完成請求處理之后如何進(jìn)行響應(yīng),如要求相應(yīng)之后即更新Web頁面數(shù)據(jù),則在send()方法之前定義request.onreadystatechange=updateData,同時定義function updateData(){}的具體函數(shù)實(shí)現(xiàn)法。(4)通過send()方法向服務(wù)器發(fā)送請求。send()方法是一個Ajax事件,語法如request.send(“user=”+username+”&pwd”+password),通過send()攜帶需要傳遞的數(shù)據(jù)提交給服務(wù)器處理。(5)通過responseText屬性攜帶服務(wù)器返回的響應(yīng)文本,通常定義在回調(diào)函數(shù)中,如updateData(){var response=request.responseText;},最后回調(diào)函數(shù)通過訪問DOM對象樹實(shí)現(xiàn)無頁面刷新情況下的部分?jǐn)?shù)據(jù)更新。
3 基于Ajax和MVC模式的信息系統(tǒng)設(shè)計
    普通的MVC模式由JSP組成視圖層,Servlet組成控制層,Javabean組成模型層。為改善MVC模式下信息系統(tǒng)(主要是針對B/S架構(gòu)的信息系統(tǒng))的交互性,使其具有更強(qiáng)的交互性及更快的響應(yīng)速度,為用戶提供更高效的服務(wù)。在系統(tǒng)的設(shè)計過程中引入Ajax技術(shù)是非常好的選擇,同時Ajax能夠使得系統(tǒng)Web頁面的設(shè)計更加便捷,能夠縮短開發(fā)周期,降低信息系統(tǒng)各模塊代碼的耦合性、提高代碼可重用性[11]。信息系統(tǒng)(B/S架構(gòu))的設(shè)計要求提供Web頁面端用于系統(tǒng)與用戶的交互,主要通過JSP頁面實(shí)現(xiàn)。普通信息系統(tǒng)主要功能包括對用戶信息的基本操作,以及通過Web頁面對數(shù)據(jù)庫中的信息進(jìn)行增、刪、查、改等操作。信息系統(tǒng)與用戶的交互主要涉及對頁面數(shù)據(jù)的獲取、數(shù)據(jù)的傳輸、數(shù)據(jù)與數(shù)據(jù)庫的交互、頁面的更新等。
    結(jié)合Ajax的信息系統(tǒng)設(shè)計并沒有顛覆MVC設(shè)計模式的整體框架,而是在MVC系統(tǒng)的體系結(jié)構(gòu)中根據(jù)Web頁面對數(shù)據(jù)處理的具體需要融入Ajax技術(shù)。信息系統(tǒng)中的Ajax使用與Web 2.0應(yīng)用中的Ajax技術(shù)稍有不同,它并未完全套用XMLHttpRequest對象的定義方式,而是應(yīng)用于MVC模式中的XMLHttpRequest對象被改進(jìn)了。為了更加方便處理來自系統(tǒng)頁面中的請求發(fā)送和對數(shù)據(jù)的調(diào)用、回調(diào)等,在系統(tǒng)設(shè)計中使用的是jQuery中$.ajax()方法,其結(jié)構(gòu)如$.ajax(option),它只包含一個參數(shù),但在這個對象中同時包含所有的請求設(shè)置、回調(diào)函數(shù)等信息。使用$.get()或$.post()方法進(jìn)行異步請求,獲取輸入數(shù)據(jù)并建立與服務(wù)器連接,實(shí)現(xiàn)XMLHttpRequest對象在Web應(yīng)用中的作用,其結(jié)構(gòu)為:$.get(url [data] [callback] [type])。使用$.getJSON方法獲取json數(shù)據(jù)(輕量級的一種數(shù)據(jù)交換格式),通過json的使用能夠很方便地將來自頁面的信息轉(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可見,MVC模式被進(jìn)一步細(xì)化了。在視圖層的設(shè)計中將Web頁面的表單和數(shù)據(jù)寫為HTML文檔和各獨(dú)立的DOM對象,與JSP頁面構(gòu)成新的視圖層,以方便利用Ajax技術(shù)對頁面對象進(jìn)行操作。通過JavaScript定義頁面中數(shù)據(jù)請求的傳輸方式,通過$.ajax()對象寫入到*.jsp文檔中。分離Servlet控制層的數(shù)據(jù)轉(zhuǎn)換處理過程和視圖層數(shù)據(jù)顯示的控制過程,并將對視圖層的數(shù)據(jù)獲取等過程提前到Web頁面中進(jìn)行,簡化邏輯處理層的操作??刂破鞯奶幚砉ぷ髦饕?yōu)閭鬟f函數(shù)獲取到的數(shù)據(jù)字符串,并定義通過請求響應(yīng)成功后的callback函數(shù)作為數(shù)據(jù)處理的中轉(zhuǎn)站,完成與模型層的數(shù)據(jù)通信,為視圖層提供響應(yīng),callback函數(shù)定義為jQuery.getJSON(url,data,callback)。
    信息系統(tǒng)中廣泛存在對用戶信息的管理,其中一項(xiàng)就是對用戶的登錄名和密碼的修改功能。首先,通過Ajax技術(shù),設(shè)計視圖層表單和JSP頁面。接著,從控制層中分離出數(shù)據(jù)的傳遞功能和具體數(shù)據(jù)獲取功能,通過JavaScript在*.jsp文檔中的$.ajax()方法定義頁面中數(shù)據(jù)的傳遞方式、傳輸格式、目標(biāo)地址等,為后續(xù)控制層獲取數(shù)據(jù)提供基礎(chǔ)服務(wù)。Servlet控制器則專注于具體數(shù)據(jù)傳遞功能的實(shí)現(xiàn)(Action),將輸入數(shù)據(jù)傳遞給具體的功能函數(shù)進(jìn)行處理。之后數(shù)據(jù)通過Javabean模型與數(shù)據(jù)庫實(shí)現(xiàn)數(shù)據(jù)交互,完成用戶數(shù)據(jù)的刪除,最后回調(diào)函數(shù)通過DOM對象樹實(shí)現(xiàn)無頁面刷新情況下的部分?jǐn)?shù)據(jù)更新。整個功能設(shè)計的部分實(shí)現(xiàn)代碼如下:
    (1)定義用戶名、密碼的視圖層設(shè)計主要代碼為:
    <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( )方法部分腳本代碼實(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)
    }
     整個過程中,首先將視圖層中的各元素、表單等設(shè)計為DOM對象模式,在JSP頁面中編寫數(shù)據(jù)獲取Ajax技術(shù)實(shí)現(xiàn)代碼,將數(shù)據(jù)傳遞給控制器Action,控制器將數(shù)據(jù)進(jìn)行轉(zhuǎn)換并傳遞給功能函數(shù),最后模型層根據(jù)數(shù)據(jù)的變化完成與數(shù)據(jù)庫信息的交互。數(shù)據(jù)處理功能的實(shí)現(xiàn)只是對Web頁面中定義的DOM對象樹中需要處理的節(jié)點(diǎn)進(jìn)行操作。按照這種設(shè)計和實(shí)現(xiàn)方法,將Ajax技術(shù)應(yīng)用于對整個信息系統(tǒng)的管理中,從而避免系統(tǒng)JSP頁面信息的整體傳輸和刷新,縮短用戶的等待時間,減少服務(wù)器和通信帶寬資源的浪費(fèi)。同時Web頁面允許用戶繼續(xù)操作其他表單,提供一種多進(jìn)程并發(fā)處理的模式,使得信息系統(tǒng)表現(xiàn)出較強(qiáng)的實(shí)時交互性。
    本文根據(jù)Ajax技術(shù)的特點(diǎn),利用其在Web應(yīng)用程序中表現(xiàn)出的優(yōu)異互動性,借助XMLHttpRequest對象的處理思想,將jQuery的Ajax方法融入MVC模式信息系統(tǒng)(B/S架構(gòu))的設(shè)計中。將系統(tǒng)Web頁面需要交互的元素設(shè)置為DOM對象樹,通過JavaScript編碼操作對象,使得系統(tǒng)能夠?qū)崿F(xiàn)數(shù)據(jù)的異步、實(shí)時處理。從而使得信息系統(tǒng)的Web頁面具有很強(qiáng)的交互性,避免了用戶在使用系統(tǒng)的過程中,因?yàn)榈却笈_數(shù)據(jù)的處理而停止其他工作,提高了時間利用率和系統(tǒng)工作效率。但數(shù)據(jù)的通信和處理過程還是顯得非常冗雜,后續(xù)主要研究應(yīng)該包括:如何通過Ajax技術(shù)的$.ajax()方法建立頁面數(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ī)與應(yīng)用,2004,23(11):13-15.
[3] 楊斌,張衛(wèi)東,張利欣,等. 基于Ajax的Observer模式客戶端研究[J].計算機(jī)工程,2010,36(24):4-5.
[4] 張宇,王映輝,張翔南. 基于Spring的MVC框架設(shè)計與實(shí)現(xiàn)[J]. 計算機(jī)工程,2010,36(4):59-62.
[5] 朱印宏. JavaScript征途[M]. 北京:電子工業(yè)出版社,2009.
[6] 陳莉莉,張麗,劉正龍.搜索引擎中基于狀態(tài)的Ajax動態(tài)網(wǎng)頁提取研究[J].計算機(jī)應(yīng)用與軟件, 2013,30(7):217-220.
[7] 郭泉成,劉紅,雷長海.基于Asp.net Ajax技術(shù)的民主評議系統(tǒng)設(shè)計與實(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] 陽鋒 徐建波. AJAX技術(shù)的性能改進(jìn)研究[J]. 計算機(jī)工程與科學(xué), 2008,30(6):146-148.
[12] 張原,張昭,劉蕊. 基于MVC設(shè)計模式的虛擬實(shí)驗(yàn)平臺模塊化設(shè)計[J].計算機(jī)工程與科學(xué), 2013,35(8):125-129.

此內(nèi)容為AET網(wǎng)站原創(chuàng),未經(jīng)授權(quán)禁止轉(zhuǎn)載。