基于Ajax与MVC模式的信息系统的研究与设计(2)_H5之家

    由图2可见，MVC模式被进一步细化了。在视图层的设计中将Web页面的表单和数据写为HTML文档和各独立的DOM对象，与JSP页面构成新的视图层，以方便利用Ajax技术对页面对象进行操作。通过JavaScript定义页面中数据请求的传输方式，通过$.ajax()对象写入到*.jsp文档中。分离Servlet控制层的数据转换处理过程和视图层数据显示的控制过程，并将对视图层的数据获取等过程提前到Web页面中进行，简化逻辑处理层的操作。控制器的处理工作主要变为传递函数获取到的数据字符串，并定义通过请求响应成功后的callback函数作为数据处理的中转站,完成与模型层的数据通信,为视图层提供响应，callback函数定义为jQuery.getJSON(url,data,callback)。
    信息系统中广泛存在对用户信息的管理，其中一项就是对用户的登录名和密码的修改功能。首先，通过Ajax技术，设计视图层表单和JSP页面。接着，从控制层中分离出数据的传递功能和具体数据获取功能，通过JavaScript在*.jsp文档中的$.ajax()方法定义页面中数据的传递方式、传输格式、目标地址等，为后续控制层获取数据提供基础服务。Servlet控制器则专注于具体数据传递功能的实现(Action)，将输入数据传递给具体的功能函数进行处理。之后数据通过Javabean模型与数据库实现数据交互，完成用户数据的删除，最后回调函数通过DOM对象树实现无页面刷新情况下的部分数据更新。整个功能设计的部分实现代码如下：
   (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( )方法部分脚本代码实现如下。
   $.ajax({
        type: "POST",                   //用POST方式传输
        datatype:"json",                     //数据格式: JSON
　　url:'updateUserAdmin.action',    //目标地址
　　data:"userId=<%=userId%>"
   &username="+username+"&userPwd="+userPwd"
　　success:function(root){
　　var obj = eval(′(′+ root + ′)′);
　　}
   (3)控制器中的Action实现代码如下：
   publicvoid updateUserAdmin(){
   customer = new SUsers();
   customer.setUserName(username);
   customer.setUserPwd(userPwd);
   int temp=
   adminEmployeeService.updateUserAdmin(customer)
   }
　   整个过程中，首先将视图层中的各元素、表单等设计为DOM对象模式,在JSP页面中编写数据获取Ajax技术实现代码，将数据传递给控制器Action，控制器将数据进行转换并传递给功能函数，最后模型层根据数据的变化完成与数据库信息的交互。数据处理功能的实现只是对Web页面中定义的DOM对象树中需要处理的节点进行操作。按照这种设计和实现方法，将Ajax技术应用于对整个信息系统的管理中，从而避免系统JSP页面信息的整体传输和刷新，缩短用户的等待时间，减少服务器和通信带宽资源的浪费。同时Web页面允许用户继续操作其他表单，提供一种多进程并发处理的模式，使得信息系统表现出较强的实时交互性。
   本文根据Ajax技术的特点,利用其在Web应用程序中表现出的优异互动性,借助XMLHttpRequest对象的处理思想,将jQuery的Ajax方法融入MVC模式信息系统(B/S架构)的设计中。将系统Web页面需要交互的元素设置为DOM对象树,通过JavaScript编码操作对象，使得系统能够实现数据的异步、实时处理。从而使得信息系统的Web页面具有很强的交互性,避免了用户在使用系统的过程中，因为等待后台数据的处理而停止其他工作，提高了时间利用率和系统工作效率。但数据的通信和处理过程还是显得非常冗杂，后续主要研究应该包括：如何通过Ajax技术的$.ajax()方法建立页面数据到模型层直接通信,及如何实现将数据的获取和处理函数嵌入到$.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应用系统设计[J]. 微型机与应用，2004，23(11)：13-15.
[3] 杨斌，张卫东，张利欣,等. 基于Ajax的Observer模式客户端研究[J].计算机工程，2010，36(24)：4-5.
[4] 张宇，王映辉，张翔南. 基于Spring的MVC框架设计与实现[J]. 计算机工程，2010，36(4):59-62.
[5] 朱印宏. JavaScript征途[M]. 北京：电子工业出版社，2009.
[6] 陈莉莉，张丽，刘正龙.搜索引擎中基于状态的Ajax动态网页提取研究[J].计算机应用与软件， 2013，30(7)：217-220.
[7] 郭泉成，刘红，雷长海.基于Asp.net Ajax技术的民主评议系统设计与实现[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.