基于模型类的B/S交互的研究与实现

摘 要：通过对模型和数据提供器的研究，提出了一种新的模型类，用以提高交互的效率和灵活性。采用该模型类可以在提交服务器端时避免刷新页面，抛弃了传统页面交互时值回传给服务器端的机制，处理交互灵活快捷，但仍沿用传统的服务器端传值到客户端的机制。

关键词：B/S交互；模型类；交互方式

中国分类号：TN919.5 文献标识码 ：A

文章编号：10053824（2013）01008202

0 引 言

目前对于数据的处理一般采用2种模式，即C/S模式和B/S模式，前者比较稳定快速，但依赖于应用环境并受其限制，同时需要不定时的更新与维护；后者较为灵活，可以处理集散型的数据群组，对于相对集中的数据处理起来也相当便捷[1]，并且用户在操作时只需要安装浏览器，简化了操作。随着浏览器的不断发展以及HTML5技术的逐渐成熟，浏览器的功能势必越来越丰富[2]，未来的客户端应用程序或许将会被B/S模式的应用所取代[3]，比如现在的WebQQ就已经相当成熟。

由于网络环境的不断改善和信息传输技术的提高，建立在线的处理方式已成为一种新的高效的数据处理方式。也就是说，通过网络实现数据的录入、采集、传输和数据共享以及一些处理有了可靠的保证[4]，因此B/S模式显得尤为重要。

传统的B/S交互模式需要刷新界面，而且在底层处理数据时方法和属性参杂在一起[5]，数据处理起来很不方便。于是采用新建一种模型类的方式将数据的传递与数据的处理分离，并且完成了从B/S、S/B的过程，结构清晰、操作简便，另外可以将不同模型的属性和方法进行组合，本文对这种模型类进行了研究与实现。

1 模型类和数据提供器

模型是一个集数据与操作于一体的独立体，作用于一个界面元素上，负责维护模型的入口界面元素和该元素所有子集元素的状态和动作。

数据提供器是相关于模型的数据的集合，为模型提供所需要处理的数据。

1.1 数据提供器和模型类的实例

新建一个数据提供器，如下所示。

新建一个模型类：

1.2 对数据提供器provider及模型类model的

说明 getter和setter的说明：接口生命数据提供器中字段的数据方向，如果该字段具有getter，则表示该字段可以从浏览器端获取浏览器端对应的数据，如果是setter，则表示此字段可以在服务器端赋值，并可以将值传递给客户端[6]。

注册机制：provider和model的注册可以在浏览器端产生对应的JS类，最终达到浏览器和服务器端的provider类一一对应，在交互的过程中可以自动得到对应方向的数据[7]；对于model则是控制类，在前台model可以写一些前台逻辑业务，在后台可以通过获取provider的值来进行数据存取，可以操作provider的值并依靠前台的代码来进行前台控制。

注册之后在访问某功能页面时，框架将自动把注册过的与该页面有关的model和provider生成JS脚本注册，并放置于response中。

2 数据提供器与模型的交互

首先在后台建立模型类与数据提供器类。服务器端在接受访问该页面时将该页面用到的provide和模型都生成一段JS脚本，并添加到该界面的response的HTML流中[8]。浏览器接收到response并解析生成客户端数据提供器和模型的JS脚本，并运行该脚本，此时客户端对象中便有了数据提供器类和模型类。页面渲染完之后将启动模型引擎，找到页面上带有模型的标记并生成客户端模型。客户端模型实例化完成之后将用AJAX请求服务器，执行服务器中对应客户端中所有模型的事件做一些初始化的数据操作，可以利用数据提供器进行数据传输，后台的业务和数据变动可以通过后台控制前台的方法来控制客户端的变动。后台执行完之后会返回response到前台，前台模型接受到response之后会对response进行解析，页面初始化完成[9]。之后的模型交互则需要靠前台模型调用后台模型的方法来触发请求，数据依然靠数据提供器进行传输。如图1所示。

3 结束语

本文通过对模型和数据提供器的研究与分析，实现了其在B/S交互的应用，主要体现在模型类和数据提供器类的结构和说明以及交互过程。模型类避免了在向服务器端提交数据的过程中刷新页面的问题，虽然沿用了传统的服务器端传值到客户端的方法，但是摒弃了以前页面交互的数据回传给服务器端的机制，从而达到了更加灵活快捷的处理交互。

参考文献：

[1] PIGORA M A， SEAN W. The 3D world in your browser： a server rendering approach [J]. The Interservice/Industry Training， 2010（3）：152237.

[2] 福斯特，厄齐尔.写给Web开发人员看的HTML5教程[M].北京：人民邮电出版社，2012.

[3] ANDREA P. Pro IOS web design and development [M]. Apress，2011.

[4] Axeda Extends Remote Access to Clientserver.Web browser and terminalbased device interfaces[J]. Business Wire，2003，13（3）：260274.

[5] JONATHAN C， KARL S. JQuery reference guide [M]. Phoenix Lieb press， 2009.

[6] 瑞奇特.CLR via C#[M].北京：清华大学出版社，2010.

[7] David Flanagan. JavaScript权威指南[M]. 北京：机械工业出版社，2003.

[8] 单东林，张晓菲，魏然锋利的jQuery[M]. 北京：人民邮电出版社，2009.

[9] AndrewTroelsen ，C#与.NET 4高级程序设计[M].5版.北京：人民邮电出版社，2011.