admin 管理员组文章数量: 887031
2024年1月12日发(作者：十转二计算器)
2019.12网络与信息工程在基于Ajax的Web应用中的使用MVC模式蔡晓庆，陈燕平(武汉交通职业学院电子与信息工程学院，湖北武汉，430065)摘要：本文在对传统的MVC模式研究的基础上，针对Ajax应用的具体情况提出了在客户端引入MVC模式的观点，讨论了MVC模式如何应用于Web客户端的开发。关键词：Ajax；MVC模式；富客户端Using MVC Mode in Ajax-based Web ApplicationsCai Xiaoqing，Chen Yanping(School of Electronic and Information Engineering,Wuhan Hubei,430065)Abstract:This paper puts forward the idea of introducing MVC mode into the client side according
to the specific situation of Ajax application, and discusses how MVC mode can be applied to the
development of Web word:Ajax；MVC mode；Rich client0 引言MVC模式是在开发大规模的Web应用中普遍使用的一种设计模式，它使得应用的开发更为规范，代码的可重用性更高。将MVC模式应用到基于Ajax的大型Web开发中，可以使客户端的编码更加清晰和灵活。响应，减轻了服务器的负担，充分利用了客户端的闲置时间。究其工作原理，相当于在客户端和服务器之间加了一个中间层—Ajax引擎。这样，并不是所有请求都提交给服务器，Ajax中间层可以独立地处理很多的用户交互，只有当确需从服务器读取新数据时，应用程序才以后台的方式发送请求给服务器，且也不会打断用户的操作流程。图2显示了引入Ajax引擎Web应用模型。1 Ajax核心技术及其工作原理1.1 Ajax的核心技术Ajax即异步JavaScript和XML,Ajax并不是一门新技术，而是几种技术的集合，具体包含四种核心技术。JavaScript：通用的脚本语言，用来嵌入在某种应用之中，Ajax应用程序即是使用JavaScript编写的。XMLHttpRequest对象：XMLHttpRequest对象允许Web程序员以后台活动的方式从Web服务器获取数据，数据格式通常是XML。通过这个对象Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用将数据处理的工作都交给服务器。DOM（Document Object Model）：文档对象模型是提供给HTML 和XML 使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。CSS（层叠样式表）：CSS为Web页面元素提供了一种可重用的样式的定义方法，在Ajax应用中，通过CSS可以独立修改用户界面外观。图1显示了这些技术在Ajax中是如何配合的。图1 Ajax四个主要组件的配合2 在基于Ajax的Web应用中引入MVC设计模式2.1 MVC设计模式MVC（ Model-View-Controller），即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。模型包含应用程序的数据以及访问、更新这些数据的商业逻辑；视图从模型中提取数据并且负责显示这些数据，当1.2 Ajax的工作原理Ajax应用在web开发中，使得用户能够得到更快速的基金项目：校科研创新团队项目“互联网应用开发技术（CX2018A02）”；新时代交通类高职院校实验室管理模式及运行机制研究（交教研1802-27）。73
网络与信息工程模型发生改变时，为了与其保持一致性，视图也应作出相应的变化；控制器是模型和视图的接口，它将用户的动作解释为对指定模型方法的调用，同时还可根据用户的输入和模型执行的结果选择合适的视图并作出响应。图2 基于Ajax的Web应用模型2.2 Ajax中引入MVC通过前面对MVC模式的了解，可以看到该模式主要应用于开发大规模的应用程序，即以粗粒度的规模描述完整的应用。Ajax与传统的Web架构的不同在于它是一个富客户端的架构，丰富了客户端的功能，且由前面的介绍可知相应功能的实现是通过大量的JavaScript 代码来完成的。大家都知道JavaScript是一种非常灵活的弱类型语言，也正是它的灵活性所造成的代码混乱让编程人员苦不堪言。创建短小、易读、功能单一的代码块，是Ajax技术具体应用所应追求的目标。本文针对Ajax应用的特点，在客户端引入了MVC模式，即以较细粒度的规模应用MVC模式以此来管理客户端代码。在基于Ajax的Web应用中，采用的显示模式不是传统的一系列页面队列的显示方式，而是基于单页面的显示，即整个应用只由一个主页面组成，这个主页面包含丰富的UI组件，而这些组件可以在不改变页面其它部分的情况下局部更新，这样就构成了动态灵敏的Ajax应用程序。管理客户端的代码也就是管理这些UI组件。以按钮这种简单的组件为例，看如何区分模型、视图、控制器这三种角色。状态的内部表示（例如压下、放开、不活动）是模型。在Ajax UI组件开发过程中通常实现为JavaScript对象。显示在屏幕上的，由DOM节点组成的UI组件，在Ajax用户界面中是视图。将两者关联起来的内部代码是控制器，用来接受用户输入。如：事件处理函数代码onclick()。孤立的按钮只有很少的行为、状态或者可视的变化，所以这样看来可能使用MVC模式的意义不大。如果考察一个复杂的组件，例如一棵树或一张表格，则MVC模式的使用会有更大的意义。将MVC模式引入树形结构的情况，模型由树的节点组成，每个节点都有子节点列表、一个打开/关闭状态及一个742019.12到业务对象的引用；视图由显示在页面上的这些图标及相应的连线组成；控制器用来处理用户请求，如打开/关闭节点、为特定的节点触发图形更新调用等等。其中，控制器的实现和模型的建立都写在专门的.js文件里，部分关键代码如下：//node（为节点建模）function Node(id,pid,name,url,title,target,
icon,iconOpen,open){=id;=pid;=name;=url;…};// Tree object（模型：树模型）function dTree(objName) {={//一些配置}=objName;=new Node(-1);//设置根节点edNode=null;};//Adds a new node to the node array(增加一个node)=function(id,pid,name,url,
title, target,icon,iconOpen,open){[]=new Node(id,
pid,name,url,title,target,icon,iconOpen, open);};通过这样的划分就很清楚的组织了客户端代码，让页面设计师和程序员各司其职，也能提高模型的重用度。此时视图就是整个可编程处理的页面，控制器是UI和领域对象(模型)相连接的代码中所有事件处理函数的组合。3 小结及展望本文分析了基于Ajax的异步交互Web模型，它采用异步交互方式及按需取数据的方式使得Ajax富客户端应用模型突破了传统Web模型的局限，不仅能为用户提供更快速的响应，而且大大减轻了服务器负担。在此基础上我们进一步介绍了MVC这一广泛应用于各种大型应用程序开发的设计模式，根据此模式的精髓，把它引入Ajax的客户端开发，让客户端混乱的代码更清晰、灵活和可维护。参考文献[1]王志娟,班娅萌.基于AJAX技术和JAVAEE的分页查询优化[J].信息通信,2019（01）.[2]吉华斌,尚颖,李征.Web应用程序异步请求时序问题检测[J].计算机科学与探索，2018（1）.
版权声明：本文标题：在基于Ajax的Web应用中的使用MVC模式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1705036043h470657.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论