基于Ajax的客户端MVC模型.pdf

基于Ajax 的客户端MVC 模型 黄史 北京邮电大学电子工程学院，北京 （100876 ） E-mail ：hs8210@ 摘 要：随着Ajax 的盛行，Web 客户端的代码也日益复杂。本文首先分析Ajax 与MVC 三 层模型各自的优势，然后提出在Ajax 的客户端采用MVC 三层模型来优化代码结构的思想， 最后通过一个例子“BookInfo”给出具体的实现。 关键词：Ajax 、JavaScript 、MVC 模型 1. Ajax Ajax(Asynchronous JavaScript and XML)并不是一种新的技术，而是将Web 开发的几种 技术结合在一起，从而使得这些技术一起完成以前不能完成的功能：Web 的异步交互功能。 Ajax 涉及到的技术包括： 1. 使用XHTML 和CSS 进行标准化的数据呈现 2. 使用DOM 实现动态的显示和交互 3. 使用XML，XSLT ，JSON，Text 等方式进行数据交换与处理 4. 使用XMLHttpRequest 进行异步数据的读取 5. 使用JavaScript 绑定和处理所有数据，实现业务逻辑 以下是传统Web 交互与Ajax 交互方式的比较[1] ： 图1 传统Web 交互图 -1- 图2 Ajax Web 交互图 从图 1 可以看出，传统Web 采用的是同步的消息交互方式，用户触发一个HTTP 请求 到服务器，服务器对其进行处理后再返回一个新的HTML 页面到客户端，客户端重新显示 从服务器得到的结果。当服务器处理客户端请求时，客户端只能空闲等待，哪怕是一次很小 的交互，服务器都要返回一个完整的HTML 页面，极大地浪费了用户等待时间和网络带宽。 这种交互方式效率低，用户体验度差，极大消耗了网络带宽。 图2 中，Ajax 采用的是异步调用的方式，用户向AjaxEngine 发起请求，AjaxEngine 判 断请求是否需要向服务器请求数据，若需要则以后台方式发起数据请求，此时在网络中仅传 输交互的数据，而非整个页面，大大节省了网络带宽，同时客户端仍可进行其他操作。服务 器响应后 AjaxEngine 会自动调用客户端定义好的回调函数，执行相应的操作。一方面，减 小了客户端与服务器之间的数据传输；另一方面，操作之间没有阻塞，大大提高了用户体验 度，实现了页面无刷新，提高响应速度，在操作方式上更接近桌面应用程序。Google 所建 立的GMail 和Google Maps 就是Ajax 应用最好的例子。 2. MVC(Model-View-Controller)模型 [2] MVC （M ：模型，V ：视图，C ：控制器）模型 描述的是将程序与用户交互的部分和 完成其他繁重工作、科学计算或业务逻辑等部分很好的一种分离的方式。 1. 模型是指从现实世界中挖掘出来的对象模型，是应用逻辑的反映。模型封装了 数据和对数据的操作，是实际进行数据处理和计算的地方。 2. 视图是应用和用户之间的接口，它负责将应用显现给用户和显示模型的状态。 3. 控制器负责视图和模型之间的交互，控制对用户输入进行反应。它主要负责两 方面的动作：把用户的请求发送到相应的模型；将模型的改变及时的反映到视图上。 -2-