基于Ajax的由傳統B/S到RIA的演變

山西農業大學 左卓君

?

基于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-），女，山西渾源人，現就讀于山西農業大學軟件工程專業。