基于ＡＪＡＸ的高級(jí)Ｗｅｂ應(yīng)用程序開(kāi)發(fā)技術(shù)研究

趙　勇　劉智濃　劉超華

摘 要：AJAX是近來(lái)興起的一種 Web 編程技術(shù)。事實(shí)上,AJAX不是一種技術(shù),而是幾種技術(shù)的集合。首先簡(jiǎn)要介紹了AJAX的技術(shù),接著討論應(yīng)用AJAX技術(shù)開(kāi)發(fā)高級(jí)Web應(yīng)用程序的方法和技術(shù)要點(diǎn)。實(shí)際中，建立了一個(gè)教學(xué)管理系統(tǒng)，目前已投入使用，效果反映良好。

關(guān)鍵詞：AJAX;封裝；多態(tài)性；Web編程技術(shù)

中圖分類(lèi)號(hào)：TP311文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1004 373X(2009)02 114 03

Senior Web Application Development Technology Based on AJAX

ZHAO Yong,LIU Zhinong,LIU Chaohua

(Naval Flying Academic,Huludao,Liaoning,125001,China)

Abstract：AJAX is a new Web programming technology.In fact,AJAX is not a technology,but rather a collection of several technologies.AJAX technology,and the application of advanced technology development AJAX Web application methods are discussed and technical issues involved.A teaching management information system is built up and it has good effect in actual usage.

Keywords：AJAX;package;polymorphism;Web programming technology

1AJAX簡(jiǎn)介

1.1AJAX定義

異步JavaScript和XML(AsynchronousJavaScriptand,XML,AJAX)是多種技術(shù)的綜合,包括 JavaScript,XHTML 和 CSS,DOM,XML 和 XSTL,XMLHttpRequest 。其特點(diǎn)是:使用 XHTML 和 CSS標(biāo)準(zhǔn)化呈現(xiàn);使用DOM 實(shí)現(xiàn)動(dòng)態(tài)顯示和交互;使用 XML 和 XSTL 進(jìn)行數(shù)據(jù)交換與處理;使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)讀取;最后用JavaScript 綁定和處理所有數(shù)據(jù)。

1.2AJAX的工作原理

與傳統(tǒng)的 Web 應(yīng)用不同,AJAX 采用異步交互過(guò)程。AJAX 在用戶與服務(wù)器之間引入一個(gè)中間媒介,從而消除了網(wǎng)絡(luò)交互過(guò)程中的處理－等待－處理－等待的缺點(diǎn)。用戶的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了 AJAX 引擎。AJAX引擎主要用JavaScript 語(yǔ)言編寫(xiě),通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。AJAX引擎允許用戶與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行,獨(dú)立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流?，F(xiàn)在,可以用JavaScript 調(diào)用AJAX引擎來(lái)代替產(chǎn)生一個(gè)直接的 HTTP請(qǐng)求的用戶動(dòng)作,內(nèi)存中的數(shù)據(jù)編輯、數(shù)據(jù)校驗(yàn)這些不需要重新載入整個(gè)頁(yè)面的需求可以交給AJAX執(zhí)行。AJAX最核心的理念是,傳統(tǒng)應(yīng)用中的瀏覽器直接與服務(wù)器交互,現(xiàn)在中間夾了一層 Script。也就是說(shuō),原來(lái)的Browser－Server 架構(gòu),現(xiàn)在是Browser－Ajax 引擎Server。假如是純粹的AJAX應(yīng)用,瀏覽器只向 AJAX 引擎發(fā)送消息,AJAX 引擎使用 XmlHttpRequest 向服務(wù)器發(fā)送請(qǐng)求,然后服務(wù)器在 XmlHttpRequest 的回復(fù)中帶上相關(guān)消息,最后 AJAX 引擎分析這些消息,用 HTMLDOM 模型處理界面。如此,理論上可以完全消除按頁(yè)刷新的需要。由于存在這樣一個(gè)在后臺(tái)的通信機(jī)制,原有開(kāi)發(fā) Web 程序時(shí)碰到的問(wèn)題自然內(nèi)部迎刃而解。最重要的是,使用了 AJAX框架不會(huì)與原有開(kāi)發(fā)模型相沖突,如果處理得當(dāng)AJAX的優(yōu)勢(shì)將顯而易見(jiàn),加上兼容性,一定會(huì)使它有機(jī)會(huì)在 Web 領(lǐng)域中占一席之地 。

1.3 AJAX的優(yōu)點(diǎn)

與傳統(tǒng)的 Web 服務(wù)相比,AJAX具有明顯的優(yōu)勢(shì):減輕了服務(wù)器的負(fù)擔(dān)。因?yàn)锳JAX的根本理念是“按需取數(shù)據(jù)”,所以最大可能在減少了冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān);非整頁(yè)地刷新、更新頁(yè)面,減少用戶實(shí)際和心理等待時(shí)間;更好的用戶體驗(yàn);也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端,利于客戶端閑置的處理能力來(lái)處理,減輕服務(wù)器和帶寬的負(fù)擔(dān),節(jié)約空間和帶寬租用成本;可以異步調(diào)用外部數(shù)據(jù);其是基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù),并且不需要插件或下載小程序;AJAX使Web中的界面與應(yīng)用分離，也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離;對(duì)于用戶和 ISP來(lái)說(shuō)是雙贏的。

2AJAX技術(shù)的高級(jí)應(yīng)用研究

2.1 AJAX語(yǔ)言對(duì)象面向的JavaScript

由定義來(lái)看，JavaScript是典型的AJAX語(yǔ)言。不同于Java，JavaScript并不強(qiáng)調(diào)OO風(fēng)格的編碼。然而，JavaScript居然全面支持所有OO語(yǔ)言的主要屬性，即封裝、繼承和多態(tài)性。

數(shù)據(jù)類(lèi)型：在Java中，一個(gè)類(lèi)定義了一個(gè)數(shù)據(jù)及與它相關(guān)行為的組合。盡管JavaScript保留了class關(guān)鍵字，但是它不支持與常規(guī)OOP語(yǔ)言一樣的語(yǔ)義。在JavaScript中，對(duì)象是用函數(shù)來(lái)定義的。事實(shí)上，通過(guò)在下面的示例中定義一個(gè)函數(shù)，就定義了一個(gè)簡(jiǎn)單的空類(lèi)Calculator：

function Calculator() {}

一個(gè)新實(shí)例的創(chuàng)建與在Java中相同使用new操作符：

var myCalculator = new Calculator();

上面函數(shù)不僅定義一個(gè)類(lèi)，而且還擔(dān)當(dāng)一個(gè)構(gòu)造器。在此，操作符new實(shí)現(xiàn)了實(shí)例化一個(gè)類(lèi)Calculator的對(duì)象，并且返回一個(gè)對(duì)象參考而不是只調(diào)用該函數(shù)。

創(chuàng)建這樣的空類(lèi)在實(shí)際中并沒(méi)有多大用處。下面，使用一個(gè)Java－腳本原型結(jié)構(gòu)填充類(lèi)定義。JavaScript使用原型當(dāng)作創(chuàng)建對(duì)象的模板。所有的原型屬性和方法都被參考引用復(fù)制到一個(gè)類(lèi)的每個(gè)對(duì)象中，所以它們都具有相同的值。使用者可以改變一個(gè)對(duì)象中原型屬性的值，并且該新值會(huì)覆蓋從原型中復(fù)制過(guò)來(lái)的缺省值，但是這僅對(duì)于在一個(gè)實(shí)例中。下列語(yǔ)句將把一個(gè)新屬性添加到Calculator對(duì)象的原型上：

Calculator.prototype._prop = 0;

既然JavaScript并沒(méi)有提供一個(gè)方法來(lái)從句法上表示一個(gè)類(lèi)定義，故將使用with語(yǔ)句來(lái)標(biāo)記該類(lèi)的定義邊界。這也將使得示例代碼更為短小，因?yàn)樵搘ith語(yǔ)句被允許在一個(gè)指定對(duì)象上執(zhí)行一系列的語(yǔ)句而不需要限制屬性。

function Calculator() {};

with (Calculator) {

prototype._prop = 0;

prototype.setProp = function(p) {_prop = p};

prototype.getProp = function() {return _prop};

}

到目前為止，定義并初始化了公共變量_prop，并且為它提供了getter和setter方法。

是否需要定義一個(gè)靜態(tài)變量。其中可以把靜態(tài)變量當(dāng)作是為類(lèi)所擁有的一個(gè)變量。因?yàn)樵贘avaScript中的類(lèi)用函數(shù)對(duì)象來(lái)描述，所以只需要把一個(gè)新屬性添加到該函數(shù)上：

Calculator.iCount=0;

現(xiàn)在，既然iCount變量是一個(gè)Calculator對(duì)象的屬性，那么它將會(huì)被類(lèi)Calculator的所有實(shí)例所共享。

function Calculator() {Calculator.iCount++;};

用上面的代碼可計(jì)算類(lèi)Calculator的所有實(shí)例的個(gè)數(shù)。

封裝：通過(guò)使用上面所定義的“Calculator”，可以存取所有的“class”數(shù)據(jù)；然而，它增加了派生類(lèi)中命名沖突的危險(xiǎn)性。明顯地需要封裝來(lái)把對(duì)象看作自包含的實(shí)體。

數(shù)據(jù)封裝的一種標(biāo)準(zhǔn)語(yǔ)言機(jī)制是使用私有變量，并且一個(gè)常用的、仿效一個(gè)私有變量的JavaScript技術(shù)是在構(gòu)造器中定義一個(gè)局部變量；這樣，該局部變量的存取只能經(jīng)由getter和setter來(lái)實(shí)現(xiàn)，它們是該構(gòu)造器中的內(nèi)部函數(shù)。在下列實(shí)例中，_prop變量在Calculator函數(shù)中定義，并且在函數(shù)范圍外不可見(jiàn)。其中有兩個(gè)匿名的內(nèi)部函數(shù)（分別被賦予setProp和getProp屬性）存取“私有”變量。另外，需要注意，這里this的使用十分相似于它在Java中的用法：

function Calculator() {

var _prop = 0;

this.setProp = function (p){_prop = p};

this.getProp = function() {return _prop};

};

常被忽視的是在JavaScript中作如此封裝所付出的代價(jià)。須知，這種代價(jià)可能是巨大的，因?yàn)閮?nèi)部函數(shù)對(duì)象對(duì)于該“class”的每一個(gè)實(shí)例被不斷地重復(fù)創(chuàng)建。

既然基于原型構(gòu)建對(duì)象速度更快，并且消費(fèi)更少些的內(nèi)存，則在最強(qiáng)調(diào)性能的場(chǎng)所特別支持使用公共的變量。請(qǐng)注意，可以使用命名慣例來(lái)避免名稱(chēng)沖突，例如在公共的變量前面加上該類(lèi)名。繼承在表面看來(lái)，JavaScript缺乏對(duì)類(lèi)層次的支持，這很相似于面向?qū)ο笳Z(yǔ)言的程序員對(duì)于現(xiàn)代語(yǔ)言的期盼。然而，盡管JavaScript句法沒(méi)有象Java一樣支持類(lèi)繼承，但是仍然能夠在JavaScript中實(shí)現(xiàn)繼承，通過(guò)把已定義類(lèi)的一個(gè)實(shí)例拷貝到其派生類(lèi)的原型當(dāng)中。

在提供例子之前，需要介紹一個(gè)constructor屬性。JavaScript保證每一個(gè)原型中都包含constructor，它擁有到該構(gòu)造器函數(shù)的一個(gè)參考。換句話說(shuō)，Calculator.prototype.constructor包含一個(gè)到Calculator()的參考。

下面的代碼顯示了怎樣從基類(lèi)Calculator派生類(lèi)ArithmeticCalculator。其中，“第一行”取得類(lèi)Calculator的所有屬性，而“第二行”把原型constructor的值恢復(fù)成ArithmeticCalculator：

function ArithmeticCalculator() { };

with (ArithmeticCalculator) {

ArithmeticCalculator.prototype = new Calculator();//第一行

prototype.constructor = ArithmeticCalculator;//第二行

}

上面的實(shí)例看起來(lái)像一個(gè)合成體而不是繼承，但是JavaScript引擎還是清楚這個(gè)原型鏈的。特別是，instanceof操作符會(huì)正確地適用于基類(lèi)和派生類(lèi)。假定創(chuàng)建類(lèi)ArithmeticCalculator的一個(gè)新實(shí)例為：

var c = new ArithmeticCalculator;

則表達(dá)式c instanceof Calculator和c instanceof ArithmeticCalculator都會(huì)成立。

注意：在上面示例中基類(lèi)的constructor是在初始化ArithmeticCalculator原型時(shí)被調(diào)用的，而在創(chuàng)建派生類(lèi)的實(shí)例時(shí)并不被調(diào)用。這可能會(huì)帶來(lái)不想要的負(fù)面影響，而且為了實(shí)現(xiàn)初始化應(yīng)該考慮創(chuàng)建一個(gè)獨(dú)立的函數(shù)。由于該構(gòu)造器并不是一個(gè)成員函數(shù)，所以它無(wú)法通過(guò)this參考引用調(diào)用。因此需要一個(gè)能調(diào)用超類(lèi)的“Calculator”成員函數(shù)：

function Calculator(ops) {…};

with (Calculator) { prototype.Calculator=Calculator;}

現(xiàn)在，可以寫(xiě)一個(gè)繼承類(lèi)，它顯示地調(diào)用基類(lèi)的構(gòu)造器：

function ArithmeticCalculator(ops) { this.Calculator(ops);};

with (ArithmeticCalculator) {

ArithmeticCalculator.prototype = new Calculator;

prototype.constructor = ArithmeticCalculator;

prototype.ArithmeticCalculator = ArithmeticCalculator;

}

多態(tài)性：JavaScript是一種非類(lèi)型化的語(yǔ)言。在此，一切都是對(duì)象。因此，如果有2個(gè)類(lèi)A和B，它們都定義一個(gè)foo()，則JavaScript將允許在A和B的實(shí)例上多態(tài)地調(diào)用foo()，即使不存在層次關(guān)系(雖然是可實(shí)現(xiàn)的)。從這一角度來(lái)看，JavaScript提供一個(gè)比Java更寬的多態(tài)性。這種靈活性，也要付出代價(jià)。在這種情況中，代價(jià)是把類(lèi)型檢查工作代理到應(yīng)用程序代碼。具體地說(shuō)，如果需要檢查一個(gè)參考確實(shí)指向一個(gè)所希望的基類(lèi)，則可以通過(guò)instanceof操作符來(lái)實(shí)現(xiàn)。

另一方面，JavaScript并不檢查函數(shù)調(diào)用中的參數(shù)：這可以防止用一樣的命名和不同的參數(shù)來(lái)定義多態(tài)函數(shù)（并且讓編譯器選擇正確的簽名）。代之的是，JavaScript提供了一個(gè)Java 5風(fēng)格的函數(shù)范圍內(nèi)的argument對(duì)象；它允許你根據(jù)參數(shù)的類(lèi)型和數(shù)量的不同實(shí)現(xiàn)一個(gè)不同的行為。

2.2AJAX組件授權(quán)

所有的AJAX組件授權(quán)方案在現(xiàn)在被邏輯地分成兩組。具體地說(shuō)，第一組用于與基于HTML的UI定義的無(wú)縫集成。第二組把HTML當(dāng)作一個(gè)UI定義語(yǔ)言以支持某種XML。在此，從第一組中來(lái)展示一種方法；雖然它存在于瀏覽器之中卻是類(lèi)似于JSP標(biāo)簽。這些瀏覽器特定的組件授權(quán)擴(kuò)展在IE情形下稱(chēng)作元素行為，而在最近版本的Firefox，Mozilla和Netscape 8情形下稱(chēng)作可擴(kuò)展的綁定。

2.3定制標(biāo)簽

Internet Explorer，從版本5.5開(kāi)始，支持定制的客戶端HTML元素的JavaScript授權(quán)。不象JSP標(biāo)簽，這些對(duì)象并沒(méi)有在服務(wù)器端被預(yù)處理到HTML中。而是，它們成為一標(biāo)準(zhǔn)HTML對(duì)象模型的合法擴(kuò)展，并且包括構(gòu)造控件在內(nèi)的一切事情，都是動(dòng)態(tài)地發(fā)生在客戶端的。同樣，基于Gecko－引擎的瀏覽器能夠用一個(gè)可重用功能動(dòng)態(tài)地裝飾任何現(xiàn)有的HTML元素。

因此，有可能用具有HTML語(yǔ)法的方法、事件和屬性來(lái)構(gòu)建一個(gè)具有豐富UI組件的庫(kù)。這樣的組件可以被自由地混合于標(biāo)準(zhǔn)HTML中。在內(nèi)部，這些組件將會(huì)與應(yīng)用程序服務(wù)器進(jìn)行通信，即AJAX風(fēng)格。換句話說(shuō)，使用者有可能（并且相對(duì)簡(jiǎn)單地）構(gòu)建自己的AJAX對(duì)象模型。

3 結(jié) 語(yǔ)

本單位應(yīng)用以上技術(shù)建立了教學(xué)管理信息系統(tǒng)，目前已經(jīng)投入使用，效果反映良好。

參考文獻(xiàn)

［1］陳瓊.AJAX老技術(shù),新外衣［J］.互聯(lián)網(wǎng)周刊,2005,8(27):52－53.

［2］夏桅.AJAX with ASP.NETJ.MSDN開(kāi)發(fā)精選,2005（4）:230－231.

［3］王沛,馮曼菲.征服AjaxWeb 2.0開(kāi)發(fā)技術(shù)詳解［M］.北京：人民郵電出版社,2006.

［4］楊華.AJAX及在ASP.NET中的實(shí)現(xiàn)［J］.現(xiàn)代電子技術(shù),2006,29(12):79－83.

［5］朱德利.Web2.0的技術(shù)特點(diǎn)和信息傳播思想［J］.現(xiàn)代情報(bào),2005,25（12）：74－77.

［6］田原.基于AJAX的教學(xué)Web應(yīng)用.遼寧工程技術(shù)大學(xué)：自然科學(xué)版，2007（5）:737－739.

［7］游麗貞,郭宇春,李純喜.Ajax引擎的原理和應(yīng)用［J］.微計(jì)算機(jī)信息,2006,22（6）：250－208.

［8］田園,唐鑄文.MXL與VisualBasic.NET編程技術(shù)［M］.北京：科學(xué)出版社，2006.

作者簡(jiǎn)介 趙 勇 教員。研究方向?yàn)樾畔⑾到y(tǒng)，模擬仿真。

劉智濃 副教授。研究方向?yàn)榫W(wǎng)絡(luò)安全。

劉超華 講師。主要從事計(jì)算機(jī)教學(xué)科研工作。