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

?

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

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

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

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

一、緒論

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

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

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

RIA是將桌面APP的交互用戶(hù)體驗(yàn)與傳統(tǒng)的Web應(yīng)用的靈活部署和低成本結(jié)合起來(lái)的網(wǎng)絡(luò)應(yīng)用。這種模式相對(duì)于傳統(tǒng)頁(yè)面的優(yōu)點(diǎn)是部分程序運(yùn)行于瀏覽器端并且能實(shí)現(xiàn)頁(yè)面無(wú)刷新提交。所謂“富”的含義：1.豐富的數(shù)據(jù)模型。（即用戶(hù)界面可以操作顯示復(fù)雜的進(jìn)行異步傳輸?shù)那度朐诳蛻?hù)端中的數(shù)據(jù)模型。）2.豐富的用戶(hù)界面。（RIA提供了靈活多樣的用戶(hù)界面控制元素，這些控制元素可以很好的與數(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)稱(chēng)RIA）。RIA以富客戶(hù)端為核心，通過(guò)提供與后臺(tái)應(yīng)用服務(wù)器的異步通信方式和豐富的用戶(hù)界面、數(shù)據(jù)模型，來(lái)解決B/S架構(gòu)的弊端，提高Web應(yīng)用的用戶(hù)體驗(yàn)。

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

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

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

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

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

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

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

Flash和Flex的最大缺點(diǎn)是不能很好的支持Web和XML等服務(wù)標(biāo)準(zhǔn)，而且作為App開(kāi)發(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來(lái)顯示處理結(jié)果。DOM負(fù)責(zé)對(duì)已載入頁(yè)面進(jìn)行無(wú)刷新動(dòng)態(tài)更新，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)顯示和交互。Css用來(lái)調(diào)整樣式與XSLT一起顯示。

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

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

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

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

3.基于Ajax的RIA

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

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

（用戶(hù)名無(wú)刷新驗(yàn)證）

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

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

通過(guò)Ajax實(shí)現(xiàn)用戶(hù)名無(wú)刷新驗(yàn)證等其他一些網(wǎng)站的“富”化。（下面是用戶(hù)名無(wú)刷新驗(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)站用戶(hù)體驗(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="用戶(hù)名可用"；

List＜User＞ ulist=ubiz.getAll（）；

for（User u:ulist）｛

if（ uname .equals（u.getAdminname（）））｛

uservalidation="用戶(hù)名不可用"；

｝｝out.println（uservalidation）；

｝%＞

四、意義

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

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

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

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

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