基于Ajax的由传统B/S到RIA的演变
2016-08-29山西农业大学左卓君
山西农业大学 左卓君
基于Ajax的由传统B/S到RIA的演变
山西农业大学 左卓君
通过对现有的传统B/S架构数据传输模式的分析，找出其中不适应用户便捷的缺陷，并针对该缺陷提出解决方案，该解决方案就是在B/S架构中引入基于Ajax来实现实时异步传输。
RIA；B/S架构；Ajax
一、绪论
1.传统B/S架构：
基于Html的网络程序开发通过在服务器端同步消息传送，将MVC的View建立在适合与文本的Html页面之上的传统的基于页面的系统。这种应用程序部署成本低，访问速度快。但是对于通过多次提交网页来处理的事物的领域中，重复多次提交相同的网页，会使交互速度变得慢，而用户也对这种重复提交的冗杂方式心生厌烦。
2.富互联网（Rich Internet Application，RIA）
RIA是将桌面APP的交互用户体验与传统的Web应用的灵活部署和低成本结合起来的网络应用。这种模式相对于传统页面的优点是部分程序运行于浏览器端并且能实现页面无刷新提交。所谓“富”的含义：1.丰富的数据模型。（即用户界面可以操作显示复杂的进行异步传输的嵌入在客户端中的数据模型。）2.丰富的用户界面。（RIA提供了灵活多样的用户界面控制元素，这些控制元素可以很好的与数据模型相结合。）易知RIA是B/S与C/S的完美结合和互补。浏览器端分担了部分服务器端负载，使得部署和使用更加方便。
3.背景
由于传统B/S架构的先天不足与计算机应用技术的发展，出现了一种富互联网应用（简称RIA）。RIA以富客户端为核心，通过提供与后台应用服务器的异步通信方式和丰富的用户界面、数据模型，来解决B/S架构的弊端，提高Web应用的用户体验。
二、基于Ajax技术的RIA研究
1.几种常用的RIA客户端开发技术
Flash：任何浏览器都支持的展示形式，从而轻松解决浏览器之间的移植问题。
Laszlo：本质与Flex一样。
Avalon：基于Avalon的应用程序必须运行在Windows环境中。
XUL:是一种非常具有表达力和简洁的语言，但是目前还没获得主要商业实体的支持。
Bindows：一个主要缺点是采用一次全部载入的方式实现脚本库，在窗口的加载期，需要一个漫长的等待过程，而不是用多少取多少，甚至浏览器会出现无响应的情况。
Flash和Flex的最大缺点是不能很好的支持Web和XML等服务标准，而且作为App开发工具的环境也不成熟。而这个正是Ajax技术的优点。
2.Ajax技术
Ajax不是新的编程语言，而是由XML、XHTML、JavaScript、XMLHttpRequest、DOM、XSLT、CSS以新的方式组合而成。其中：JavaScript在Ajax中绑定一切，利用它创建和操作XMLHttpRequest对象，与后台交互，处理返回数据，操作DOM来显示处理结果。DOM负责对已载入页面进行无刷新动态更新，实现数据的动态显示和交互。Css用来调整样式与XSLT一起显示。
JavaScript：一种基于对象和事件驱动并具有跨平台性和较好安全性能，基于浏览器本身，与操作系统无关，的脚本语言（也是解释性语言）。
DOM提供给Html和XML一组API，让开发者通过DOM树建立页面与JavaScript脚本之间的沟通桥梁。
XML使用者可以在已有的通用标签的基础上增加自定义标签，实现语言的可扩展性。XML可用来Expression/Store数据，XML可以很容易的被其他应用程序解析共享。
Ajax向服务器利用XmlHttpRequest对象发送异步请求，再从服务器获取数据，然后用JavaScript通过操作DOM来进行页面的更新。其中最关键的是服务器如何获得请求数据。ajax的核心机制是XMLHttpRequest：一种支持消息异步传输的技术。简单的说，就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
3.基于Ajax的RIA
利用Ajax在JavaScript中编写的“富浏览器端”较普通Html页面更加健壮、反应更加灵敏、而异步刷新具有良好的可视化特性。JavaScript用XMLHttpRequest充当数据传输的执行者，在浏览器与服务器之间，形成了异步数据通信。而JavaScript可使AJAX应用程序具有丰富的用户界面，响应速度快，并且无刷新更新数据。因为Ajax利用的JavaScript格式和其它标准的Web 开发技术对浏览器全兼容，意味着它拥有基于标准的浏览器应用程序的可达性特点。而在实际中，Ajax不需要用户安装，也不需要浏览器提供插件，容易被用户接受和使用。
三、由J2EE向RIA过渡的一个典型的实例
（用户名无刷新验证）
1.现有系统分析：在村务信息管理系统中当注册用户逐渐增多时，用户名就很容易重复，虽然加了校验机制，但是却是消息同步传输，界面刷新，当用户名不可用时，刷新后的界面会将之前游客注册时填写的用户名等信息冲刷掉，这给用户带来了很大的不方便，在现在这种竞争激烈的互联网环境中，这个将会带来致命的不可估量的损失。
2.系统改进：
通过Ajax实现用户名无刷新验证等其他一些网站的“富”化。（下面是用户名无刷新验证实现方式的核心代码）
3.创建XMLHttpRequest对象（Ajax引擎）。不同浏览器创建XMLHttpRequest 对象的方法不同。这里在JavaScript中Function内使用try...catch。
function getXmlHttp（）
｛var MyxmlHttp；
try｛ // Firefox， Opera 8.0+， Safari等几种主流浏览器的创建Ajax引擎的方法
MyxmlHttp=new XMLHttpRequest（）；｝
catch （e）｛ // IE浏览器
try｛ MyxmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）；｝
catch （e）｛//其他非主流浏览器
try｛ MyxmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）；｝
catch （e）｛Windows.onload（“您的浏览器不支持Ajax”）；
return false；
｝｝
｝｝
2.发送请求至服务器：（也可以用Post的方法发送请求）
var http_request；
function sendHttpRequest（）｛
if（window.ActiveXObject）｛http_request=new ActiveXObject（“Microsoft.XMLHTTP”）； ｝
else｛ httpRequest=new XMLHttpRequest（）；｝
if（ httpRequest）｛var url=“发送请求给服务器”；
httpRequest.open（“GET”，url，true）； //如果设为false表示同步，这样就与传统的B/S架构的Html页面的网站用户体验一样了。
httpRequest.onreadystatechange=chuli；//调用chuli函数。
httpRequest.send（）；//发送请求｝｝
3.处理函数：
function chuli（）｛if（ httpRequest.readyState==4）｛
if（ httpRequest.status==200）｛var res= httpRequest.responseText；//返回的是文本
处理的具体函数体（根据服务器返回结果作相应处理。）｝
｝｝
4.服务器端处理：
＜%@ page contentType="text/html；charset=gb2312"%＞
＜%
String uname = request.getParameter（"uname"）；
uservalidation="用户名可用"；
List＜User＞ ulist=ubiz.getAll（）；
for（User u:ulist）｛
if（ uname .equals（u.getAdminname（）））｛
uservalidation="用户名不可用"；
｝｝out.println（uservalidation）；
｝%＞
四、意义
传统的B/S架构一般采用：请求--刷新--显示的模式。即当用户单击按钮/链接发送请求至服务器，服务器即时接收并处理请求，处理完毕后服务器发送结果至前台页面。在服务器DO的Time，浏览器必须等待，显示为空白/无响应状态，而用户也只有等待。实际上，用户想得到的可能只是一个数据，却要刷新整个页面，重新在服务器上计算和下载到浏览器的整个页面加大了网络流量和服务器的处理负荷，造成用户体验差，改进后的RIA操作简捷，响应速度快，无刷新，用户体验较好。
［1］Rogers.Pressman.软件工程一实践者的研究方法［M］.梅宏译，机械工业出版社，2002.
［2］柯自聪.AJAX开发精要——概念、案例与框架［M］.电子工业出版社，2006.
［3］张友生.软件体系结构原理、方法与实践［M］.清华大学出版，2014.
左卓君（1994-），女，山西浑源人，现就读于山西农业大学软件工程专业。
