WEB2.0时代的企业级应用

随着Web2.0时代的到来，人们在互联网上的工作和生活的方式都在发生着重大的变化，Web应用已经从用户被动地从互联网获取信息变为用户主动参与的模式。得益于各种新的技术以及新的理念的提出，各种丰富多样的新型用户体验方式开始出现在我们的面前。以IT行业公司为首，各行各业的大中型企业开始将Web2.0的理念应用于他们的自动化办公、管理软件中。

1、改善的用户体验

1.1、 新的操作方式

最近几年中，精心的用户一定会发现，各类大大小小的网站/应用，都在不断的更新他们的UI操作方式，其中有成功的，也有失败的。但这都表明了这些web应用的开发团队都在设法为他们的用户提供更直接，更快捷，或者更新奇的操作过程，根据改善用户体验/交互方式的基本原则充分的挖掘想象力来满足用户的需求。在这里，以下几个名次或许可以让我们更直观地认识到在过往的几年中Web应用的操作方式在发生怎样的变化，他们是：google搜索建议; google地图; Gmail; 级联的菜单; 动态的数据列表。所有的这些效果，都源自一个推动Web2.0进程的关键概念：Ajax。他使用浏览器的脚本宿主环境提供的XMLHttpRequest对象来实现，同时，它也是当前RIA（富互联网应用）的两个主流的实现技术之一。

1.２、 无刷新的页面提交

Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户出发操作时，使用JavaScript立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用 JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。

２、富客户端系统结构

２.1、使用ＡＪＡＸ的Ｂ／Ｓ平面客户端结构

上图所展示的是一个典型的使用Ajax请求的B/S结构。在这个模型中，用户UI层次相对简单，调用关系很直接。客户端相应用户动作之后，创建相应的Ajax请求至服务器，服务器进行相应的处理之后返回至客户端的js过程函数进行页面局部的重新渲染，此种模型适用于简单的客户端应用。

２.２、基于Javascript/ajax的富客户端立体结构

随着越来越多的客户端需求，上述模型便会逐渐显得力不从心了。原因在于，在同一个页面中，可能会包括来自不同控件，不同目标的调用, 根据上面的模型，则要创建不同的函数去分别处理。又或者，客户端设计师设计一些本不属于html的空间，比如日期选择器，然而在每个页面中，都要分别来写一个日期选择器显然也是不合理的（通常，这直接表现为在页面或者脚本文件中堆叠着大量的function)，针对每个操作都要调用不同的function，这样的模型显然不合理，为了满足更多客户的更多需求，我们使用OOP的思想来编写JavaScript代码，对上述系统进行重构，将必要的对象封装，以便重用。于是，就有了下面的一个理论模型：

该模型最大的特性在于将各类的客户端操作组件化，相对于简单的模型具有更强的可扩展性，同时也保证了代码的健壮性（很明显，重构使得代码的可重用性大大加强，这直接提升了健壮性）。“这里为什么会有连接池？有什么必要？”其实很简单，原因有两个：1、在HTTP 1.1 规范中，建议浏览器同一时刻建立链接的最大数不超过2，如果异步请求的数量超过这一值，在IE6中会导致浏览器崩溃的问题。2、对于一个信息聚合的应用，从一个浏览器同时发出20-30甚至更多的请求到服务器端，这就变成了对服务器的轰炸，因此需要有一个缓冲区域来管理链接的资源。

---

３、ＲＳ１０系统中的新式体验方式及实现技术初探

３.１、基于extJs的友好用户界面

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。主要是企业信息化软件，网站后台等。ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个主要用于创建前端用户界面，与后台技术无关的前端Ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于YUI技术，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端框架。

在我们的客户端系统设计中，我们使用了ExtJS的UI部分组件来加强界面可操作性，其中包括Ext.Window，Ext.EditorGridPanel等等，同时，我们实现了客户端系统的分级。在系统模型中，Ext框架只作为UI的组件而出现，客户端内核，数据模型，以及客户端的指令系统则并未依赖Ext，其主要目的也在于将我们的客户端系统与UI的组件相隔离。

３.２、丰富的交互功能

上面所展示的是我们系统未来界面规划的demo列表应用，在我们的系统中，用户可以像操作CS系统的客户端一样进行很多客户端的复杂操作。比如，对列表头的缩放，拖拽，隐藏，像使用Excel表格一样来进行数据的操作等等，这些都是在传统的Web应用中难以想象的。借助Ext的框架，我们实现了用户友好的客户端，所有的操作都会变得更加的见解和直观。更要说明的是，在我们的客户端系统中，构建了完整的指令模式，相信在未来的持续改进中，可以加入用户操作的撤销以及重做功能，提供历史纪录来记下这些操作信息，并能够实现各种不同操作的混合。这在当今的B/S系统中是不常见的。

３.３、与传统系统的体验比较

很多失败的用户体验案例告诉我们，好的交互式设计方案并不一定是新颖的，眩目的。其重点在于以用户的认知为导向，关注于如何让用户用一种自己最熟知的方式来操作软件，让用户发现，所有自己想使用的功能按钮，功能导航，都出现在自己所期待的位置，从而能够大大地减少用户学习软件的时间。我们的用户界面借助ExtJS，将Web界面以一种最接近于传统操作方式的方式呈现给用户（对于大多用户来说，window的使用方式当然是最传统的），最大程度的减小了用户的认知障碍，将软件操作的学习过程变得更加简单。

通过使用Ajax技术以及Ext框架的有力支持，在我们的系统中可以实现在完全不刷新页面的情况下完成各种数据的处理/传输过程，大大减少了传统模式中用户等待的心理效应。并且数据的网络传输载体也随着这类技术的引入而从传统的传输格式化的HTML文档变为格式化的原数据，并由客户端的UI组件对数据进行渲染和展现，大大减小了从前HTML文档所造成的数据冗余。

——北京机械工业自动化研究所研发部 郭宇