基于AJAX技术的MVC模式WEB应用

维普资讯

第３３卷第３期　西南民族大学学报・自然科学版　

Ｊｏｕｒｎａｌ　ｏｆ　Ｓｏｕｔｈｗｅｓｔ　Ｕｎｉｖｅｒｓｉｔｙ　ｆｏｒ　Ｎａｔｉｏｎａｌｉｔｉｅｓ・Ｎａｔｕｒａｌ　Ｓｃｉｅｎｃｅ　Ｅｄｉｔｉｏｎ　

文章编号：１　００３．２８４３（２００７）０３—０６８５．０４　

基于ＡＪＡＸ技术的ＭＶＣ模式ＷＥＢ应用　

张阳　

（四川大学计算机学院，成都６１００６４）　

摘要：ＭＶＣ模式很好的解决了当前ＷＥＢ应用开发的种种弊端，ＡＪＡＸ技术则大大改善了ＷＥＢ应用的用户体验．研　

究了ＭＶＣ设计模式后，本文在ＭＶＣ模式基础上，加入ＡＪＡＸ技术，构建一种新的ＷＥＢ应用模型，并在具体应用中实　

现．　

关键词：ＭＶＣ模式：ＡＪＡＸ；ＷＥＢ应用　

中图分类号：ＴＰ３９３　文献标识码：Ａ　

１　引言　

随着信息技术和网络技术的迅速发展，ＭＶＣ（Ｍｏｄｅｌ。Ｖｉｅｗ。Ｃｏｎｔｒｏｌｌｅｒ）模式对于Ｗｅｂ应用的开发无疑是一种　

非常先进的设计思想，无论编程人员选择哪种语言，无论应用多复杂，它都能提供最基本的应用模型分析方法，　

帮助企业架构清晰的网络应用设计框架ｌ３】．随着Ｊ２ＥＥ的快速发展及成熟，它已经成为在Ｊ２ＥＥ平台上推荐的一种　

设计模型．但在Ｂ／Ｓ结构的网站应用中，用户界面提交ＨＴＭＬ请求，都必须返回—个完整的ＨＴＭＬ页面，用户　

需要花费带宽去下载整个ＨＴＭＬ页面，使得用户在使用浏览器刷新速度较慢．利用ＡＪＡＸ技术可以很好的解决　

此问题，他可以快速地在浏览器显示无穷的信息而无需重新加载页面，减轻了服务器的负担，把以前服务器的部　

分工作转到客户端，提高了Ｗｅｂ应用程序的交互性．　

２　ＭＶＣ模式介绍　

ＭＶＣ￣ｌＪＭｏｄｅｌ。Ｖｉｅｗ。Ｃｏｎｔｒｏｌｌｅｒ的缩写，最初由Ｓｍａｌｌｔａｌｋ设计，该模型将功能划分为相互关联的３个组件：　

模型（Ｍｏｄｅ１）、视图（Ｖｉｅｗ）和控制器（Ｃｏｎｔｒｏｌｌｅｒ）…．如图１所示，模型表示应用程序的业务逻辑，获取业务数据并　

按照业务处理规则处理业务数据，所有的业务操作都在该层，是应用程序的核心．视图是整个应用程序的外在　

表现，主要功能是模块的显示以及根据业务处理结果生成返回至客户端的页面．控制器主要功能是将模型和视　

图联系在一起，是—个分发器，不做任何数据处理．　

ＭＶＣ模式很好地实现了数据层、显示层、业务层的分离，层次清晰和独立，哪个层需要修改，只需修改该层　

代码，不影响其他层的代码，便于调试和维护．ＭＶＣ模式中把系统分成三层、有利于开发中的分工，提高了开发　

的并发度．独立的分层还有利于组件的复用，提高了代码的可重用性及可扩展性．　

图１　ＭＶＣ模式结构图【４】　

收稿日期：２００６．１０．３１　

作者简介：张Ｉ￣Ｎ（１９８２一），女，四川大学汁算机学院硕士研究生　

维普资讯

６８６　西南民族大学学报・自然科学版　第３３卷　

３　ＡＪＡＸ简介　

ＡＪＡＸ（Ａｓｙｎｃｈｒｏｎｏｕｓ　ＪａｖａＳｃｒｉｐｔ　ａｎｄ　ＸＭＬ）是一个结合了Ｊａｖａ￣术、ＸＭＬ以｝￣．ＪａｖａＳｃｒｉｐｔ的编程技术，使用客户　

端脚本与ｗｅ　艮务器交换数据的Ｗｅｂ应用开发方法．ＡＪＡＸ其实并非一种新的技术，而是网络浏览器里已有的三　

项重要特征的结合：　

１）浏览器可通过ＪａｖａＳｃｒｉｐｔ和Ｗｅｂ　Ｓｅｒｖｅｒ通讯．　

２）ＪａＶａｓｃｒｉｐｔ能在不刷新页面的情况下动态地改变页面的值．　

３）浏览器能解析ＸＭＬ文件．　

ＡＪＡＸ打破了使用页面重载的惯例．如图２所示，纯粹的ＡＪＡＸ应用，浏览器都只向ＪａｖａＳｃｒｉｐｔ发送消息，　

ＪａｖａＳｃｒｉｐｔ使用ｘｍｌＨｔｑｐ向服务器发送请求，然后服务器在ＸｍｌＨｔｔｐ的回复中带上相关消息，最后ＪａｖａＳｃｒｉｐｔ分析这　

些消息，在不刷新整个页面的情况下动态地改变页面的数值．这样，Ｗｅｂ页面不用打断交互流程进行重新加裁，　

就可以动态地更新．ＡＪＡＸ在互联网服务器和个人电脑之问充当缓冲器，巧妙地令服务非常顺畅，让人以为没有　

中断，并且减轻了服务器的负担．　

图２两种应用模式的对比【　１　

４架构实现　

虽然ＭＶＣ模式较好的解决了当前ＷＥＢ应用开发中的诸如代码扩展性、维护性、重用性及开发效率低等问　

题，但是传统Ｗｅｂ应用采用同步交互过程，即使很小的请求都要重新刷新页面，大量无用数据重复下载，服务　

器的负担较重，用户也要经过漫长的等待时问．在实际应用中，类似投票等一些无关痛痒的场景，如果提交过程　

等待时间过长，很多的用户就会直接忽略而不参与，但是如果使用了Ａｊａ）（则可以大大缩短等待时问，从而使更多　

的用户会加入进来．为减轻服务器负担以及提高网站模式性能，在ＭＶＣ模式中加入ＡＪＡＸ技术．如图３所示：　

图３基于ＡＪＡＸ技术的ＭＶＣ设计模式　

维普资讯

第３期　张阳：基于ＡＪＡＸ技术的ＭＶＣ模式ＷＥＢ应用　６８７　

（１）视图（Ｖｉｅｗ）：用户界面，本模型中为ＪＳＰ页面．视图的处理不包括在视图上的业务流程的处理，仅限于　

视图上数据的显示、采集，以及用户的请求，所以一个应用可能有很多不同的视图．业务流程的处理交予模型　

（Ｍｏｄｅ１）处理．　

（２）模型（Ｍｏｄｅ１）：应用程序的核心，本模型中为业务类．制订了某一个业务的流程，状态的处理，以及规则．　

通过控制层（Ｃｏｎｔｒｏｌｌｅｒ）的调配之后，模型接受视图请求的数据，根据业务规则调用相应的数据处理方法（Ｄａｏ类）　

处理业务，并返回最终的处理结果．为了硬模型（Ｍｏｄｅ１）中业务流程处理和数据处理更加独立和规范，把每个模　

型的数据库处理操作封装在数据处理类（Ｄａｔａ　Ａｃｃｅｓｓ　Ｏｂｊｅｃｔ，ＤＡＯ类），业务类并不做数据库操作．数据处理类实　

体对象的数据持久化，所有有关数据库的操作只限制在该类中．　

（３）控制器（Ｃｏｎｔｒｏｌｌｅｒ）：接受视图请求的用户接口，本模型中为控制类．控制层只是一个分发器，不做任何　

数据处理，将模型与视图联系在一起．控制器根据用户请求，不处理业务信息，而是选择相应的模型，并把用户　

的信息传递给模型，模型处理之后，选择符合要求的视图返回给用户．一个模型可能对应多个视图，一个视图可　

能对应多个模型．　

按照ＭＶＣ设计模式，可以使得系统在更高层次上提高可复用性和可维护性．由于模型返回的数据不带任何　

显示格式，因而这些模型也可直接应用于接口的使用．一个应用被强制分离为三层，业务流程或者业务规则的　

改变只需改动ＭＶＣ的模型层【４ｌ，本模型中业务类；数据库操作的改变只需改动数据处理类，本模型中ＤＡＯ类．　

为了加快页面响应速度，在ＭＶＣ模式中加入ＡＪＡＸ技术，但在实际应用中并非每个页面都需采用ＡＪＡＸ技　

术，本文在ＭＶＣ模式中加入ＡＪＡＸ技术，Ｙｆ￣，－ｉ　ＭＶＣ模式稍做修改，以适用于不同页面．在未使用ＡＪＡＸ引擎　

的页面中，用户通过视图（Ｖｉｅｗ）提出请求，控制器（Ｃｏｎｔｒｏｌｌｅｒ）接受视图请求，但并不处理，他通过读取配置文件　

ａｃｔｉｏｎｍａｐ．ｘｍｌ找到相应的动作处理类（Ａｃｔｉｏｎ类）．配置文件ａｃｔｉｏｎｍａｐ．ｘｍｌ定义了每个Ａｃｔｉｏｎ类的映射，每个动　

作使用一个Ａｃｔｉｏｎ类．Ａｃｔｉｏｎ类处理和响应客户端传来的数据，并调用相应的业务类（Ｍｏｄｅ１）处理业务，业务类再　

调用数据处理类（ＤＡｏ）做数据库操作．在使用ＡＪＡＸ的页面中，用户通过ＪＳＰ页面内置ＡＪＡＸ对象使用异步方式　

向控制器提出请求，控制器再调用模型做业务处理，模型再调用数据处理类做数据库操作，客户端ＡＪＡＸ对象的　

ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ方法监听，受到数据便对页面做出更改．　

５应用实例主要代码　

（１）创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ是一个ＪａｖａＳｃｒｉｐｔ对象，ＡＪＡＸ大量使用了ＪａｖａＳｃｒｉｐｔ和ＡＪＡＸ￣Ｉ擎，而这个取决于浏览器的　

支持．比较新的浏览器，￣［ＩＭｉｃｒｏｓｏｆｔ　ＩＥ　５．０，Ｍｏｚｉｌｌａ　１．０，ＮｅｔＳｃａｐｅ　７．１，Ａｐｐｌｅ　Ｓａｆａｒｉ　１．２，Ｏｐｅｒａ　７．６及以上版本才支　

持，Ｍｏｚｉｌｌａ，Ｓａｆａｒｉ虽然也支持ＡＪＡＸ，但是提供ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ的方式不一样．所以使用ＡＪＡＸ的程序必须进行　

针对各个浏览器的兼容性测试，使程序能够跨浏览器运行．　

主要代码：　

ｆｕｎｃｔｉｏｎ　ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ０　

）　

｛　

／／使能在Ｍｏｚｉｌｌａ，Ｓａｆａｒｉ等运行　

／／使能在ｌＥ浏览器上运行　

ｅｌｓｅ　ｉｆ（ｗｉｎｄｏｗ．ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ）　

ｉｆ（ｗｉｎｄｏｗ．ＡｃｔｉｖｅＸＯｂｊｅｃｔ）　｛　

ｘｍｌＨＲｐ＝ｎｅｗ　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ（）；　｝　

ｘｍｌＨｔｔｐ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ　ＣＭｉｃｒｏｓｏｆｔ．ＸＭＬＨＴＴＰ”）；　）　

（２）发出ＨＴＴＰ请求　

主要代码：　

ｆｕｎｃｔｉｏｎ　ｖｏｔｅｃｈａｎｇｅ（）　

∥异步请求连接　

｛　ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ０；　

ｘｍｌＨＲｐ．ｏｐｅｎ（”ＰＯＳＴ”，ｕｒｌｓｔｒｉｎｇ，ｔｒｕｅ）；　

旨定返回信息处理函数　

ｘｍｌＨｔｔｐ．ｓｅｎｄ（ｎｕｌ１）；　

ｘｍｌＨｔｔｐ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ　ｈａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ；　

）　

ｖａｒ　ｕｒｌｓｔｒｉｎｇ＝”目标ＵＲＬ”；　

维普资讯

６８８　西南民族大学学报－自然科学版　第３３卷　

ｏｐｅｎ方法建立到服务器的新请求，第—个参数为ｈｔｔｐ请求方法，可以为ＧＥＴ和ＰＯＳＴ，本文使用ＰＯＳＴ方法；　

第二个参数是请求的ＵＲＬ地址，可以为绝对地址也可以为相对地址；第三个为指定此请求是否为异步方式，默认　

为ｔｒｕｅ．如果为真，当状态改变时会调用ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ屙陛指定的回调函数．Ｓｅｎｄ方法向服务器发送请求．一　

（３）返回信息处理　

主要代码：　

ｆｕｎｃｔｉｏｎ　ｈａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ（）　ｃａｔｓｔｒｉｎｇ　ｘｍｌＨ￣ｐ．ｒｅｓｐｏｎｓｅＴｅｘｔ；　

．　

｝　｛　

／，定义服务器返回变量　

ｖａｒ　ｃａｔｓｔｒｉｎｇ＝…’；　

｝　

ｉｆ（ｃａｔｓｔｒｉｎｇ！：ＩＩＩＩ＆＆ｃａｔｓｔｒｉｎｇ．１ｅｎｇｔｈ＞０）　

／／信息已返回　

ｉｆ（ｘｍｌＨｔｔｐ．ｒｅａｄｙＳｔａｔｅ＝＝４）　

｛　

｛　

／／处理返回情况　

ｉｆ（ｃａｔｓｔｒｉｎｇ＝＝”……”）　

∥页面正常　

ｉｆｘｍｌＨ￣ｐ．ｓｔａｔｕｓ＝＝２００）　

｛　

……　

｝　

｝　

／／月匣务器返回的请求响应文本　

在本实例应用中，服务器返回信息之后，由ｈａｎｄｌｅｓｔａｔｅｃｈａｎｇｅ（）函数处理返回信息，ｒｅｓｐｏｎｓｅＴｅｘｔ方式表示返　

回信息当字符串处理，使用ｒｅｓｐｏｎｓｅＸＭＬ方式则当返回信息为ＸＭＬ文档．变量ｃａｔｓｔｒｉｎｇ存放返回字符串，可以　

定义多种返回类型．　

６　结束语　

ＡＪＡＸ使用ＸＭＬｈ￣ｐ对象，要依靠用户浏览器的支持．一些低版本的浏览器或者客户端设置教本禁用都将　

页面无法正常使用．　

由于ＡＪＡｘ更新页面内容的时候并没有刷新整个页面，因此数Ｎ￣！ｇ－Ｎ，可能导致一些业务上处理的缺陷，　

并且网页后退功能失效．例如投票页面，在当前用户投票的同一时间，可能还有其他用户投票，因为未刷新页面　

用户投票之后看不到当前最新的票数情况．ＡＪＡＸ技术减少了页面重载次数，减轻了服务器负担，　大大改善了　

ＷＥＢ应用的用户体验，因此现在ＡＪＡＸ的ＷＥＢ应用越来越广泛．本文在ＭＶＣ模式中引入ＡＪＡＸ技术，加强了　

整个ＷＥＢ应用程序的可移植、可扩展以及交互性，提高开发和维护效率，使用户获得更愉快的网络体验．这种　

模式为程序设计　开发、维护人员，终端用户以及服务器都带来了极大的便捷之处．　’　

参考文献：　

【１】ＰＡＵＬＳＯＮ　Ｌ　Ｄ．Ｂｕｉｌｄｉｎｇ　ｒｉｃｈ　ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎｓ　ｗｉｔｈ　Ａｊａｘ［Ｊ１．Ｃｏｍｐｕｔｅｒ，２００５，３８（１０）：１４－１　７．　

ｃｏｍ／ｐｕｂｌｉｃａｔｉｏｎｓ／ｅｓｓａｙｓ／ａｒｃｈｉｖｅｓ／０００３８５．ｐｈｐ．　　‘

、　

【２】ＧＡＲＲＥＴＴ　Ｊ　Ｊ．Ａｊａｘ：Ａ　Ｎｅｗ　Ａｐｐｒｏａｃｈ　ｔｏ　Ｗｅｂ　Ａｐｐｌｉｃａｔｉｏｎｓ．ＡｄａｐｔｉｖｅＰａｔｈ，　Ｆｅｂｒｕａｒｙ　２００５［ＥＢ／ＯＬ］．ｈｔｔｐ：／／ｗｗｗ．ａｄａｐｔｉｖｅｐａｔｈ　

【３】普措才仁．Ｊｓｐ／Ｓｅｒｖｌｅｔ构建三层管理信息系统［Ｊ】．西北民族大学学报：自然科学版，２００４，２５（５５）：２５－２８．　

【４】冉春玉，白炳杉．ＭＶＣ模式及Ｓｔｒｕｔｓ框架应用研究［Ｊ】．武汉理工大学学报，２００４，２６（６）：６６－６９．　

【５】赵小峰．利用ＡＪＡＸ构建动态Ｗｅｂ应用［Ｊ】＿深圳信息技术职业学院学报，２００６，ｌ４（４）：２６．３０．　

ＭＶＣ　Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎ　ｂａｓｅｄ　ｏｎ　ＡＪＡＸ　

ＺＨＡＮＧＹａｎｇ　

（Ｓｃｈｏｏｌ　ｏｆ　Ｃｏｍｐｕｔｅｒ　Ｓｃｉｅｎｃｅ，Ｓｉｃｈｕａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｃｈｅｎｇｄｕ　６　１　００６４，Ｐ‘Ｒ．Ｃ．）　

Ａｂｓｔｒａｃｔ：ＭＶＣ　ｍｏｄｅｌ　ｉｓ　ａ　ｐｅｒｆｅｃｔ　ｓｏｌｕｔｉｏｎ　ｔｏ　ｔｈｅ　ｄｒａｗｂａｃｋｓ　ｏｆ　ｔｈｅ　ｃｕｒｒｅｎｔ　Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎ　ｄｅｖｅｌｏｐｍｅｎｔ．ＡＪＡＸ　ｈａｓ　ｇｒｅａｔｌｙ　

ｉｍｐｒｏｖｅｄ　ｔｈｅ　ｕｓｅｒｓ’ｅｘｐｅｒｉｅｎｃｅ．Ｒｅｓｅａｒｃｈ　ｏｎ　ｔｈｅ　ＭＶＣ　ｐａｔｔｅｒｎ，ｂａｓｅｄ　ｏｎ　ｉｔ，ａｄｄｉｎｇ　ＡＪＡＸ　ｔｅｃｈｎｏｌｏｇｙ，ａ　ｎｅｗ　Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎ　

ｍｏｄｅｌ　ｉｓ　ｃｏｎｓｔｒｕｃｔｅｄ　ｉｎ　ｔｈｉｓ　ｐａｐｅｒ，ａｎｄ　ｉｔ　ｉｓ　ｉｍｐｌｅｍｅｎｔｅｄ．　

Ｋｅｙ　ｗｏｒｄｓ：ＭＶＣ　ｍｏｄｅｌ；ＡＪＡＸ；Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎ