RIA原理以及示例

  1.

什么是 RIA

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, 将在下篇博客中详细描述。