RIA原理以及示例(ZZ)

RIA是Rich Internet Application的首字母缩写，中文意思是富互联网应用程序。

要理解这个概念，需要先了解一下什么是互联网应用程序。通俗一点讲，通过浏览器来访问的程序就可以认为是互联网应用程序，当然在这里，使用浏览器进行访问，那么必须要有网络，这个网络可以是局域网也可以是广域网。互联网应用程序还有一个简单的讲法就是WEB程序。互联网应用程序一般都是运行在一个WEB服务器上，用户向这个服务器请求信息，服务器把相关信息返回给用户，用户请求的实际上就是一个互联网应用程序，返回给用户的是该程序处理完以后的显示结果。

而富互联网应用程序是什么？

“富”：个人认为有两种层面的意思。

第一：丰富。有许多美观的UI，界面漂亮，操作模拟桌面程序，简单方便，使用起来给用户带来比较舒服的感觉，专业说法就是大大增强了用户体验。

第二：大，因为有丰富的UI，自然下载到用户机器的代码也会增加。

因此富互联网应用程序是指将桌面应用程序的用户体验以及操作上的方便快速性

传统的Web程序结合起来的新型的WEB程序。

2.目前有哪些常见的RIA？

从定义上看来，与WEB2.0和Ajax类似，富互联网应用程序的做法也只是观念上的改变，由这个观念上的改变而长生了一系列促进或者实现这种观念的技术。其中以Ajax框架和以Flex为代表的网页控件。

• Ajax框架

Ajax通过特殊的javascript对象，使数据的请求和传输从以前的整个HTML页面，转换成部分数据，从而大大提高了WEB程序的响应速度。

最初的Ajax只是使用javascript来实现操作上的方便性，但是再往下发展，在js的基础上，结合了HTML和CSS，有了各种各样美观并且操作方便的WEB组件。并且几个出名的互联网企业以及许多Ajax和WEB UI的爱好者纷纷开发了自己的Ajax框架。而这些Ajax框架就是一种典型的RIA。

比如Yahoo的YUI，Dojo基金会的Dojo，Ext等，这些框架都有一个共同的特点，有功能强大，界面美观，操作方便的UI，同时也合理地封装了Ajax对象及属性，方便用户去调用。

以下是Ext2.0的一些UI的截图。

确认对话框和警告框

页面中的小窗体

 关于更多Ext的例子，大家可以从http://extjs.com/处获得。

这些UI并不是新的浏览器窗口，而是用HTML+CSS+Javascript制作的一些特殊的静态元素。这其中HTML和CSS决定了这些UI的样式，而javascript则决定了如何去调用这些UI，并同时也封装了这些UI的行为（功能）。

• 以Flex为代表的网页控件

Flex是Adobe公司推出的RIA，如下图

   该图是大众汽车的网站，该网站就是采取的Flex技术，图示的网址是

http://www.vw.com/dealerlocator/en/us/

大家可以去体验一下，Flex实际上是一个Flash插件，但是与传统的Flash动画不同的是，Flex更侧重于业务逻辑，而不仅仅是动画展示，并且还可以与数据库，其他高级语言通信，如Java，正是由于这几个特点，使得Flex比较适合做企业级的应用。当然要运行Flex程序，浏览器也必须要安装Flash的插件。

其实这有点类似早期出现的Applet，但是Applet由于界面不美观，安全性以及操作不方便等原因，不适合做业务逻辑，因此Sun公司于2007年5月发布了Java FX,从形式上看，可以简单的认为是美化和增强了功能的Applet。Java Fx写的程序即可以在浏览器中运行，也可以独立于浏览器，当然需要有JVM的支持。

Osum上的图片批量上传就是用的Java FX。

注意看，浏览器中的控件可以读取本地的文件了。

同样微软也推出了自己的RIA，即silverlight，在这里不做太多的介绍，原理和上述两个差不多，也需要安装插件才能运行，Silverlight的例子大家可以上微软的网站去看。

其实我们不难发现，以Flex为代表的RIA，有一个共同特点，它们的运行需要有一个运行环境来支持，Flex需要有flash插件，Java Fx也需要有一个运行环境。事实上这种做法一直存在，最早有Applet，有ActiveX等。是通过安装插件的方式来对浏览器本身的功能进行扩展，只不过近期推出的这些技术更符合互联网发展趋势。

• 两者优缺点比较

很显然Ajax框架，只是结合HTML，CSS,通过编写大量的Javascript来实现特殊的效果，这么做的最大好处是，浏览器不用安装任何插件就可以运行，而且都是静态的代码，这些代码在网页打开的时候就下载到客户端，所以响应快，稳定。

但是正由于Ajax是以javascript为核心的，所以也造成了代码在不同的浏览器之间的表现不同，比如在IE下写的效果，可能在firefox下不能正常运行，为了解决这个问题，程序员几乎要写双倍甚至三倍的代码来解决兼容的问题。这个是令人头疼的问题。

而flex类RIA，这类程序的运行是依赖于浏览器的插件，只要能安装上插件，那么不管是什么浏览器，效果都是一样的，而且这类RIA，都有较成熟的语言，比如Flex有ActionScript，Java Fx有非常简单的类似java语言的脚本。

同时他们也有非常强大和方便的开发工具来支持，比如Flex有Flex Builder，而Java FX有netbeans。正是由于这样，使得他们在开发和调式上变得非常简单。

这类程序的缺点是在安装插件上，需要安装插件才能运行该程序，那么插件能不能顺利的安装成功，笔者经常碰到在firefox下flash插件安装不上的问题，而且每到一个新的环境，插件都需要再重新安装一次才行。

正是由于这两个形式的优缺点的存在，目前为止这两种方式也一直共存着，而且支持者也各自抱着自己的理由不放。

笔者以为，关键还是要看项目的作用，类Flex这种做一些简单的业务逻辑还是比较好的，但是要做大型应用，个人认为还是有待提高，毕竟是一个插件，而这个插件虽然已经做到可以和其他高级语言如Java通信，可以读取数据库的资源，但是要方便地与页面上的静态元素很好的结合起来，还是有点难度。而且项目的用户经常在不固定地方上网，那么每次安装插件将是一件非常麻烦的事情。

而原生的javascript则不同，可以很方便地与页面上的任何静态元素以及部分动态元素结合，而且通过Ajax的xmlhttprequest对象，则又可以方便地和服务器进行交互，这对于编程人员来讲是非常灵活和开放的，唯一的缺点，开发上如果要考虑所有浏览器的兼容性，则开发起来比较复杂，而且不易调式，目前为止还没有一个IDE，可以做到对javascript的完美调式。

不过随着ajax的兴起，各大IT厂商对javascript也越来越重视，firefox就有一个插件（firebug）可以进行javascript的调式，Sun公司发布的netbeans6.1就提供了对javascript丰富的函数支持，另外基于Eclipse的Aptana也同样提供了对javascript的较丰富的函数支持。

3.如何开发RIA

了解了RIA的原理后，要开发自己的RIA，那么也不再是困难的事情。如果你想做Flex，那么可以选择Flex Builder，如果你想开发Java FX，那么可以使用netbeans，同样微软的Silverlight也有对应的开发工具，当然你还需要知道它们的语言才能进行开发。

开发上述的RIA，需要再学习额外的知识，细讲起来，绝对可以写厚厚一本书，鉴于篇幅有限，笔者要给大家重点介绍的是前者，如何使用原生的HTML，CSS和javascript去开发RIA，即Ajax框架，不过重点讲述的是如何去实现一些特殊的WEB UI，不会涉及太多与服务器交互的知识。

关于如何开发AjaxRIA,将在下篇博客中详细描述。