山西農(nóng)業(yè)大學(xué) 左卓君

?

基于Ajax的由傳統(tǒng)B/S到RIA的演變

山西農(nóng)業(yè)大學(xué) 左卓君

通過對(duì)現(xiàn)有的傳統(tǒng)B/S架構(gòu)數(shù)據(jù)傳輸模式的分析，找出其中不適應(yīng)用戶便捷的缺陷，并針對(duì)該缺陷提出解決方案，該解決方案就是在B/S架構(gòu)中引入基于Ajax來實(shí)現(xiàn)實(shí)時(shí)異步傳輸。

RIA；B/S架構(gòu)；Ajax

一、緒論

1.傳統(tǒng)B/S架構(gòu)：

基于Html的網(wǎng)絡(luò)程序開發(fā)通過在服務(wù)器端同步消息傳送，將MVC的View建立在適合與文本的Html頁(yè)面之上的傳統(tǒng)的基于頁(yè)面的系統(tǒng)。這種應(yīng)用程序部署成本低，訪問速度快。但是對(duì)于通過多次提交網(wǎng)頁(yè)來處理的事物的領(lǐng)域中，重復(fù)多次提交相同的網(wǎng)頁(yè)，會(huì)使交互速度變得慢，而用戶也對(duì)這種重復(fù)提交的冗雜方式心生厭煩。

2.富互聯(lián)網(wǎng)（Rich Internet Application，RIA）

RIA是將桌面APP的交互用戶體驗(yàn)與傳統(tǒng)的Web應(yīng)用的靈活部署和低成本結(jié)合起來的網(wǎng)絡(luò)應(yīng)用。這種模式相對(duì)于傳統(tǒng)頁(yè)面的優(yōu)點(diǎn)是部分程序運(yùn)行于瀏覽器端并且能實(shí)現(xiàn)頁(yè)面無刷新提交。所謂“富”的含義：1.豐富的數(shù)據(jù)模型。（即用戶界面可以操作顯示復(fù)雜的進(jìn)行異步傳輸?shù)那度朐诳蛻舳酥械臄?shù)據(jù)模型。）2.豐富的用戶界面。（RIA提供了靈活多樣的用戶界面控制元素，這些控制元素可以很好的與數(shù)據(jù)模型相結(jié)合。）易知RIA是B/S與C/S的完美結(jié)合和互補(bǔ)。瀏覽器端分擔(dān)了部分服務(wù)器端負(fù)載，使得部署和使用更加方便。

3.背景

由于傳統(tǒng)B/S架構(gòu)的先天不足與計(jì)算機(jī)應(yīng)用技術(shù)的發(fā)展，出現(xiàn)了一種富互聯(lián)網(wǎng)應(yīng)用（簡(jiǎn)稱RIA）。RIA以富客戶端為核心，通過提供與后臺(tái)應(yīng)用服務(wù)器的異步通信方式和豐富的用戶界面、數(shù)據(jù)模型，來解決B/S架構(gòu)的弊端，提高Web應(yīng)用的用戶體驗(yàn)。

二、基于Ajax技術(shù)的RIA研究

1.幾種常用的RIA客戶端開發(fā)技術(shù)

Flash：任何瀏覽器都支持的展示形式，從而輕松解決瀏覽器之間的移植問題。

Laszlo：本質(zhì)與Flex一樣。

Avalon：基于Avalon的應(yīng)用程序必須運(yùn)行在Windows環(huán)境中。

XUL:是一種非常具有表達(dá)力和簡(jiǎn)潔的語(yǔ)言，但是目前還沒獲得主要商業(yè)實(shí)體的支持。

Bindows：一個(gè)主要缺點(diǎn)是采用一次全部載入的方式實(shí)現(xiàn)腳本庫(kù)，在窗口的加載期，需要一個(gè)漫長(zhǎng)的等待過程，而不是用多少取多少，甚至瀏覽器會(huì)出現(xiàn)無響應(yīng)的情況。

Flash和Flex的最大缺點(diǎn)是不能很好的支持Web和XML等服務(wù)標(biāo)準(zhǔn)，而且作為App開發(fā)工具的環(huán)境也不成熟。而這個(gè)正是Ajax技術(shù)的優(yōu)點(diǎn)。

2.Ajax技術(shù)

Ajax不是新的編程語(yǔ)言，而是由XML、XHTML、JavaScript、XMLHttpRequest、DOM、XSLT、CSS以新的方式組合而成。其中：JavaScript在Ajax中綁定一切，利用它創(chuàng)建和操作XMLHttpRequest對(duì)象，與后臺(tái)交互，處理返回?cái)?shù)據(jù)，操作DOM來顯示處理結(jié)果。DOM負(fù)責(zé)對(duì)已載入頁(yè)面進(jìn)行無刷新動(dòng)態(tài)更新，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)顯示和交互。Css用來調(diào)整樣式與XSLT一起顯示。

JavaScript：一種基于對(duì)象和事件驅(qū)動(dòng)并具有跨平臺(tái)性和較好安全性能，基于瀏覽器本身，與操作系統(tǒng)無關(guān)，的腳本語(yǔ)言（也是解釋性語(yǔ)言）。

DOM提供給Html和XML一組API，讓開發(fā)者通過DOM樹建立頁(yè)面與JavaScript腳本之間的溝通橋梁。

XML使用者可以在已有的通用標(biāo)簽的基礎(chǔ)上增加自定義標(biāo)簽，實(shí)現(xiàn)語(yǔ)言的可擴(kuò)展性。XML可用來Expression/Store數(shù)據(jù)，XML可以很容易的被其他應(yīng)用程序解析共享。

Ajax向服務(wù)器利用XmlHttpRequest對(duì)象發(fā)送異步請(qǐng)求，再?gòu)姆?wù)器獲取數(shù)據(jù)，然后用JavaScript通過操作DOM來進(jìn)行頁(yè)面的更新。其中最關(guān)鍵的是服務(wù)器如何獲得請(qǐng)求數(shù)據(jù)。ajax的核心機(jī)制是XMLHttpRequest：一種支持消息異步傳輸?shù)募夹g(shù)。簡(jiǎn)單的說，就是JavaScript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶。達(dá)到無刷新的效果。

3.基于Ajax的RIA

利用Ajax在JavaScript中編寫的“富瀏覽器端”較普通Html頁(yè)面更加健壯、反應(yīng)更加靈敏、而異步刷新具有良好的可視化特性。JavaScript用XMLHttpRequest充當(dāng)數(shù)據(jù)傳輸?shù)膱?zhí)行者，在瀏覽器與服務(wù)器之間，形成了異步數(shù)據(jù)通信。而JavaScript可使AJAX應(yīng)用程序具有豐富的用戶界面，響應(yīng)速度快，并且無刷新更新數(shù)據(jù)。因?yàn)锳jax利用的JavaScript格式和其它標(biāo)準(zhǔn)的Web 開發(fā)技術(shù)對(duì)瀏覽器全兼容，意味著它擁有基于標(biāo)準(zhǔn)的瀏覽器應(yīng)用程序的可達(dá)性特點(diǎn)。而在實(shí)際中，Ajax不需要用戶安裝，也不需要瀏覽器提供插件，容易被用戶接受和使用。

三、由J2EE向RIA過渡的一個(gè)典型的實(shí)例

（用戶名無刷新驗(yàn)證）

1.現(xiàn)有系統(tǒng)分析：在村務(wù)信息管理系統(tǒng)中當(dāng)注冊(cè)用戶逐漸增多時(shí)，用戶名就很容易重復(fù)，雖然加了校驗(yàn)機(jī)制，但是卻是消息同步傳輸，界面刷新，當(dāng)用戶名不可用時(shí)，刷新后的界面會(huì)將之前游客注冊(cè)時(shí)填寫的用戶名等信息沖刷掉，這給用戶帶來了很大的不方便，在現(xiàn)在這種競(jìng)爭(zhēng)激烈的互聯(lián)網(wǎng)環(huán)境中，這個(gè)將會(huì)帶來致命的不可估量的損失。

2.系統(tǒng)改進(jìn)：

通過Ajax實(shí)現(xiàn)用戶名無刷新驗(yàn)證等其他一些網(wǎng)站的“富”化。（下面是用戶名無刷新驗(yàn)證實(shí)現(xiàn)方式的核心代碼）

3.創(chuàng)建XMLHttpRequest對(duì)象（Ajax引擎）。不同瀏覽器創(chuàng)建XMLHttpRequest 對(duì)象的方法不同。這里在JavaScript中Function內(nèi)使用try...catch。

function getXmlHttp（）

｛var MyxmlHttp；

try｛ // Firefox， Opera 8.0+， Safari等幾種主流瀏覽器的創(chuàng)建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.發(fā)送請(qǐng)求至服務(wù)器：（也可以用Post的方法發(fā)送請(qǐng)求）

var http_request；

function sendHttpRequest（）｛

if（window.ActiveXObject）｛http_request=new ActiveXObject（“Microsoft.XMLHTTP”）； ｝

else｛ httpRequest=new XMLHttpRequest（）；｝

if（ httpRequest）｛var url=“發(fā)送請(qǐng)求給服務(wù)器”；

httpRequest.open（“GET”，url，true）； //如果設(shè)為false表示同步，這樣就與傳統(tǒng)的B/S架構(gòu)的Html頁(yè)面的網(wǎng)站用戶體驗(yàn)一樣了。

httpRequest.onreadystatechange=chuli；//調(diào)用chuli函數(shù)。

httpRequest.send（）；//發(fā)送請(qǐng)求｝｝

3.處理函數(shù)：

function chuli（）｛if（ httpRequest.readyState==4）｛

if（ httpRequest.status==200）｛var res= httpRequest.responseText；//返回的是文本

處理的具體函數(shù)體（根據(jù)服務(wù)器返回結(jié)果作相應(yīng)處理。）｝

｝｝

4.服務(wù)器端處理：

＜%@ 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）；

｝%＞

四、意義

傳統(tǒng)的B/S架構(gòu)一般采用：請(qǐng)求--刷新--顯示的模式。即當(dāng)用戶單擊按鈕/鏈接發(fā)送請(qǐng)求至服務(wù)器，服務(wù)器即時(shí)接收并處理請(qǐng)求，處理完畢后服務(wù)器發(fā)送結(jié)果至前臺(tái)頁(yè)面。在服務(wù)器DO的Time，瀏覽器必須等待，顯示為空白/無響應(yīng)狀態(tài)，而用戶也只有等待。實(shí)際上，用戶想得到的可能只是一個(gè)數(shù)據(jù)，卻要刷新整個(gè)頁(yè)面，重新在服務(wù)器上計(jì)算和下載到瀏覽器的整個(gè)頁(yè)面加大了網(wǎng)絡(luò)流量和服務(wù)器的處理負(fù)荷，造成用戶體驗(yàn)差，改進(jìn)后的RIA操作簡(jiǎn)捷，響應(yīng)速度快，無刷新，用戶體驗(yàn)較好。

［1］Rogers.Pressman.軟件工程一實(shí)踐者的研究方法［M］.梅宏譯，機(jī)械工業(yè)出版社，2002.

［2］柯自聰.AJAX開發(fā)精要——概念、案例與框架［M］.電子工業(yè)出版社，2006.

［3］張友生.軟件體系結(jié)構(gòu)原理、方法與實(shí)踐［M］.清華大學(xué)出版，2014.

左卓君（1994-），女，山西渾源人，現(xiàn)就讀于山西農(nóng)業(yè)大學(xué)軟件工程專業(yè)。