基于ＡＪＡＸ的高级Ｗｅｂ应用程序开发技术研究

2009-05-12赵勇刘智浓刘超华

现代电子技术 2009年2期

赵　勇　刘智浓　刘超华

摘要：AJAX是近来兴起的一种 Web 编程技术。事实上,AJAX不是一种技术,而是几种技术的集合。首先简要介绍了AJAX的技术,接着讨论应用AJAX技术开发高级Web应用程序的方法和技术要点。实际中，建立了一个教学管理系统，目前已投入使用，效果反映良好。

关键词：AJAX;封装；多态性；Web编程技术

中图分类号：TP311文献标识码：A

文章编号：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简介

1.1AJAX定义

异步JavaScript和XML(AsynchronousJavaScriptand,XML,AJAX)是多种技术的综合,包括 JavaScript,XHTML 和 CSS,DOM,XML 和 XSTL,XMLHttpRequest 。其特点是:使用 XHTML 和 CSS标准化呈现;使用DOM 实现动态显示和交互;使用 XML 和 XSTL 进行数据交换与处理;使用 XMLHttpRequest 进行异步数据读取;最后用JavaScript 绑定和处理所有数据。

1.2AJAX的工作原理

与传统的 Web 应用不同,AJAX 采用异步交互过程。AJAX 在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理－等待－处理－等待的缺点。用户的浏览器在执行任务时即装载了 AJAX 引擎。AJAX引擎主要用JavaScript 语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用JavaScript 调用AJAX引擎来代替产生一个直接的 HTTP请求的用户动作,内存中的数据编辑、数据校验这些不需要重新载入整个页面的需求可以交给AJAX执行。AJAX最核心的理念是,传统应用中的浏览器直接与服务器交互,现在中间夹了一层 Script。也就是说,原来的Browser－Server 架构,现在是Browser－Ajax 引擎Server。假如是纯粹的AJAX应用,浏览器只向 AJAX 引擎发送消息,AJAX 引擎使用 XmlHttpRequest 向服务器发送请求,然后服务器在 XmlHttpRequest 的回复中带上相关消息,最后 AJAX 引擎分析这些消息,用 HTMLDOM 模型处理界面。如此,理论上可以完全消除按页刷新的需要。由于存在这样一个在后台的通信机制,原有开发 Web 程序时碰到的问题自然内部迎刃而解。最重要的是,使用了 AJAX框架不会与原有开发模型相冲突,如果处理得当AJAX的优势将显而易见,加上兼容性,一定会使它有机会在 Web 领域中占一席之地。

1.3 AJAX的优点

与传统的 Web 服务相比,AJAX具有明显的优势:减轻了服务器的负担。因为AJAX的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和响应对服务器造成的负担;非整页地刷新、更新页面,减少用户实际和心理等待时间;更好的用户体验;也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本;可以异步调用外部数据;其是基于标准化的并被广泛支持的技术,并且不需要插件或下载小程序;AJAX使Web中的界面与应用分离，也可以说是数据与呈现分离;对于用户和 ISP来说是双赢的。

2AJAX技术的高级应用研究

2.1 AJAX语言对象面向的JavaScript

由定义来看，JavaScript是典型的AJAX语言。不同于Java，JavaScript并不强调OO风格的编码。然而，JavaScript居然全面支持所有OO语言的主要属性，即封装、继承和多态性。

数据类型：在Java中，一个类定义了一个数据及与它相关行为的组合。尽管JavaScript保留了class关键字，但是它不支持与常规OOP语言一样的语义。在JavaScript中，对象是用函数来定义的。事实上，通过在下面的示例中定义一个函数，就定义了一个简单的空类Calculator：

function Calculator() {}

一个新实例的创建与在Java中相同使用new操作符：

var myCalculator = new Calculator();

上面函数不仅定义一个类，而且还担当一个构造器。在此，操作符new实现了实例化一个类Calculator的对象，并且返回一个对象参考而不是只调用该函数。

创建这样的空类在实际中并没有多大用处。下面，使用一个Java－脚本原型结构填充类定义。JavaScript使用原型当作创建对象的模板。所有的原型属性和方法都被参考引用复制到一个类的每个对象中，所以它们都具有相同的值。使用者可以改变一个对象中原型属性的值，并且该新值会覆盖从原型中复制过来的缺省值，但是这仅对于在一个实例中。下列语句将把一个新属性添加到Calculator对象的原型上：

Calculator.prototype._prop = 0;

既然JavaScript并没有提供一个方法来从句法上表示一个类定义，故将使用with语句来标记该类的定义边界。这也将使得示例代码更为短小，因为该with语句被允许在一个指定对象上执行一系列的语句而不需要限制属性。

function Calculator() {};

with (Calculator) {

prototype._prop = 0;

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

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

}

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

是否需要定义一个静态变量。其中可以把静态变量当作是为类所拥有的一个变量。因为在JavaScript中的类用函数对象来描述，所以只需要把一个新属性添加到该函数上：

Calculator.iCount=0;

现在，既然iCount变量是一个Calculator对象的属性，那么它将会被类Calculator的所有实例所共享。

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

用上面的代码可计算类Calculator的所有实例的个数。

封装：通过使用上面所定义的“Calculator”，可以存取所有的“class”数据；然而，它增加了派生类中命名冲突的危险性。明显地需要封装来把对象看作自包含的实体。

数据封装的一种标准语言机制是使用私有变量，并且一个常用的、仿效一个私有变量的JavaScript技术是在构造器中定义一个局部变量；这样，该局部变量的存取只能经由getter和setter来实现，它们是该构造器中的内部函数。在下列实例中，_prop变量在Calculator函数中定义，并且在函数范围外不可见。其中有两个匿名的内部函数（分别被赋予setProp和getProp属性）存取“私有”变量。另外，需要注意，这里this的使用十分相似于它在Java中的用法：

function Calculator() {

var _prop = 0;

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

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

};

常被忽视的是在JavaScript中作如此封装所付出的代价。须知，这种代价可能是巨大的，因为内部函数对象对于该“class”的每一个实例被不断地重复创建。

既然基于原型构建对象速度更快，并且消费更少些的内存，则在最强调性能的场所特别支持使用公共的变量。请注意，可以使用命名惯例来避免名称冲突，例如在公共的变量前面加上该类名。继承在表面看来，JavaScript缺乏对类层次的支持，这很相似于面向对象语言的程序员对于现代语言的期盼。然而，尽管JavaScript句法没有象Java一样支持类继承，但是仍然能够在JavaScript中实现继承，通过把已定义类的一个实例拷贝到其派生类的原型当中。

在提供例子之前，需要介绍一个constructor属性。JavaScript保证每一个原型中都包含constructor，它拥有到该构造器函数的一个参考。换句话说，Calculator.prototype.constructor包含一个到Calculator()的参考。

下面的代码显示了怎样从基类Calculator派生类ArithmeticCalculator。其中，“第一行”取得类Calculator的所有属性，而“第二行”把原型constructor的值恢复成ArithmeticCalculator：

function ArithmeticCalculator() { };

with (ArithmeticCalculator) {

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

prototype.constructor = ArithmeticCalculator;//第二行

}

上面的实例看起来像一个合成体而不是继承，但是JavaScript引擎还是清楚这个原型链的。特别是，instanceof操作符会正确地适用于基类和派生类。假定创建类ArithmeticCalculator的一个新实例为：

var c = new ArithmeticCalculator;

则表达式c instanceof Calculator和c instanceof ArithmeticCalculator都会成立。

注意：在上面示例中基类的constructor是在初始化ArithmeticCalculator原型时被调用的，而在创建派生类的实例时并不被调用。这可能会带来不想要的负面影响，而且为了实现初始化应该考虑创建一个独立的函数。由于该构造器并不是一个成员函数，所以它无法通过this参考引用调用。因此需要一个能调用超类的“Calculator”成员函数：

function Calculator(ops) {…};

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

现在，可以写一个继承类，它显示地调用基类的构造器：

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

with (ArithmeticCalculator) {

ArithmeticCalculator.prototype = new Calculator;

prototype.constructor = ArithmeticCalculator;

prototype.ArithmeticCalculator = ArithmeticCalculator;

}

多态性：JavaScript是一种非类型化的语言。在此，一切都是对象。因此，如果有2个类A和B，它们都定义一个foo()，则JavaScript将允许在A和B的实例上多态地调用foo()，即使不存在层次关系(虽然是可实现的)。从这一角度来看，JavaScript提供一个比Java更宽的多态性。这种灵活性，也要付出代价。在这种情况中，代价是把类型检查工作代理到应用程序代码。具体地说，如果需要检查一个参考确实指向一个所希望的基类，则可以通过instanceof操作符来实现。

另一方面，JavaScript并不检查函数调用中的参数：这可以防止用一样的命名和不同的参数来定义多态函数（并且让编译器选择正确的签名）。代之的是，JavaScript提供了一个Java 5风格的函数范围内的argument对象；它允许你根据参数的类型和数量的不同实现一个不同的行为。

2.2AJAX组件授权

所有的AJAX组件授权方案在现在被逻辑地分成两组。具体地说，第一组用于与基于HTML的UI定义的无缝集成。第二组把HTML当作一个UI定义语言以支持某种XML。在此，从第一组中来展示一种方法；虽然它存在于浏览器之中却是类似于JSP标签。这些浏览器特定的组件授权扩展在IE情形下称作元素行为，而在最近版本的Firefox，Mozilla和Netscape 8情形下称作可扩展的绑定。

2.3定制标签

Internet Explorer，从版本5.5开始，支持定制的客户端HTML元素的JavaScript授权。不象JSP标签，这些对象并没有在服务器端被预处理到HTML中。而是，它们成为一标准HTML对象模型的合法扩展，并且包括构造控件在内的一切事情，都是动态地发生在客户端的。同样，基于Gecko－引擎的浏览器能够用一个可重用功能动态地装饰任何现有的HTML元素。

因此，有可能用具有HTML语法的方法、事件和属性来构建一个具有丰富UI组件的库。这样的组件可以被自由地混合于标准HTML中。在内部，这些组件将会与应用程序服务器进行通信，即AJAX风格。换句话说，使用者有可能（并且相对简单地）构建自己的AJAX对象模型。

3 结语

本单位应用以上技术建立了教学管理信息系统，目前已经投入使用，效果反映良好。

参考文献

［1］陈琼.AJAX老技术,新外衣［J］.互联网周刊,2005,8(27):52－53.

［2］夏桅.AJAX with ASP.NETJ.MSDN开发精选,2005（4）:230－231.

［3］王沛,冯曼菲.征服AjaxWeb 2.0开发技术详解［M］.北京：人民邮电出版社,2006.

［4］杨华.AJAX及在ASP.NET中的实现［J］.现代电子技术,2006,29(12):79－83.

［5］朱德利.Web2.0的技术特点和信息传播思想［J］.现代情报,2005,25（12）：74－77.

［6］田原.基于AJAX的教学Web应用.辽宁工程技术大学：自然科学版，2007（5）:737－739.

［7］游丽贞,郭宇春,李纯喜.Ajax引擎的原理和应用［J］.微计算机信息,2006,22（6）：250－208.

［8］田园,唐铸文.MXL与VisualBasic.NET编程技术［M］.北京：科学出版社，2006.