基于AJAX的高级Web应用程序开发技术研究

1、基于AJAX的高级Web应用程序开发技术研究-1AJAX简介 1.1AJAX定义 异步java script和XML(Asynchronousjava scriptand,XML,AJAX)是多种技术的综合,包括 java script,XHTML 和 CSS,DOM,XML 和 XSTL,XMLHttpRequest 。其特点是:使用 XHTML 和 CSS标准化呈现;使用DOM 实现动态显示和交互;使用 XML 和 XSTL 进行数据交换与处理;使用 XMLHttpRequest 进行异步数据读取;最后用java script 绑定和处理所有数据。 1.2AJAX的工作原理 与传统的 We

2、b 应用不同,AJAX 采用异步交互过程。AJAX 在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理等待处理等待的缺点。用户的浏览器在执行任务时即装载了 AJAX 引擎。AJAX引擎主要用java script 语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用java script 调用AJAX引擎来代替产生一个直接的 HTTP请求的用户动作,内存中的数据编辑、数据校验这些不需要重新载入整个页面的需求可以交给AJAX执行。AJAX最核心的理念是,传统应

3、用中的浏览器直接与服务器交互,现在中间夹了一层 Script。也就是说,原来的BrowserServer 架构,现在是BrowserAjax 引擎Server。假如是纯粹的AJAX应用,浏览器只向 AJAX 引擎发送消息,AJAX 引擎使用 XmlHttpRequest 向服务器发送请求,然后服务器在 XmlHttpRequest 的回复中带上相关消息,最后 AJAX 引擎分析这些消息,用 HTMLDOM 模型处理界面。如此,理论上可以完全消除按页刷新的需要。由于存在这样一个在后台的通信机制,原有开发 Web 程序时碰到的问题自然内部迎刃而解。最重要的是,使用了 AJAX框架不会与原有开发模型

4、相冲突,如果处理得当AJAX的优势将显而易见,加上兼容性,一定会使它有机会在 Web 领域中占一席之地 。 1.3 AJAX的优点 与传统的 Web 服务相比,AJAX具有明显的优势:减轻了服务器的负担。因为AJAX的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和响应对服务器造成的负担;非整页地刷新、更新页面,减少用户实际和心理等待时间;更好的用户体验;也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本;可以异步调用外部数据;其是基于标准化的并被广泛支持的技术,并且不需要插件或下载小程序;AJAX使Web中的

5、界面与应用分离，也可以说是数据与呈现分离;对于用户和 ISP来说是双赢的。 2AJAX技术的高级应用研究 2.1 AJAX语言对象面向的java script 由定义来看，java script是典型的AJAX语言。不同于Java，java script并不强调OO风格的编码。然而，java script居然全面支持所有OO语言的主要属性，即封装、继承和多态性。 数据类型：在Java中，一个类定义了一个数据及与它相关行为的组合。尽管java script保留了class关键字，但是它不支持与常规OOP语言一样的语义。在java script中，对象是用函数来定义的。事实上，通过在下面的示例中定

6、义一个函数，就定义了一个简单的空类Calculator： function Calculator() 一个新实例的创建与在Java中相同使用new操作符： var myCalculator = new Calculator(); 上面函数不仅定义一个类，而且还担当一个构造器。在此，操作符new实现了实例化一个类Calculator的对象，并且返回一个对象参考而不是只调用该函数。 创建这样的空类在实际中并没有多大用处。下面，使用一个Java脚本原型结构填充类定义。java script使用原型当作创建对象的模板。所有的原型属性和方法都被参考引用复制到一个类的每个对象中，所以它们都具有相同的值。使

7、用者可以改变一个对象中原型属性的值，并且该新值会覆盖从原型中复制过来的缺省值，但是这仅对于在一个实例中。下列语句将把一个新属性添加到Calculator对象的原型上： Ctotype._prop = 0; 既然java script并没有提供一个方法来从句法上表示一个类定义，故将使用with语句来标记该类的定义边界。这也将使得示例代码更为短小，因为该with语句被允许在一个指定对象上执行一系列的语句而不需要限制属性。 function Calculator() ; with (Calculator) prototype._prop = 0; prototype.set

8、Prop = function(p) _prop = p; prototype.getProp = function() return _prop; 到目前为止，定义并初始化了公共变量_prop，并且为它提供了getter和setter方法。 是否需要定义一个静态变量。其中可以把静态变量当作是为类所拥有的一个变量。因为在java script中的类用函数对象来描述，所以只需要把一个新属性添加到该函数上： Calculator.iCount=0; 现在，既然iCount变量是一个Calculator对象的属性，那么它将会被类Calculator的所有实例所共享。 function Calcula

9、tor() Calculator.iCount+; 用上面的代码可计算类Calculator的所有实例的个数。 封装：通过使用上面所定义的“Calculator”，可以存取所有的“class”数据；然而，它增加了派生类中命名冲突的危险性。明显地需要封装来把对象看作自包含的实体。 数据封装的一种标准语言机制是使用私有变量，并且一个常用的、仿效一个私有变量的java script技术是在构造器中定义一个局部变量；这样，该局部变量的存取只能经由getter和setter来实现，它们是该构造器中的内部函数。在下列实例中，_prop变量在Calculator函数中定义，并且在函数范围外不可见。其中有两个

10、匿名的内部函数（分别被赋予setProp和getProp属性）存取“私有”变量。另外，需要注意，这里this的使用十分相似于它在Java中的用法： function Calculator() var _prop = 0; this.setProp = function (p)_prop = p; this.getProp = function() return _prop; ; 常被忽视的是在java script中作如此封装所付出的代价。须知，这种代价可能是巨大的，因为内部函数对象对于该“class”的每一个实例被不断地重复创建。 既然基于原型构建对象速度更快，并且消费更少些的内存，则在最强

11、调性能的场所特别支持使用公共的变量。请注意，可以使用命名惯例来避免名称冲突，例如在公共的变量前面加上该类名。继承在表面看来，java script缺乏对类层次的支持，这很相似于面向对象语言的程序员对于现代语言的期盼。然而，尽管java script句法没有象Java一样支持类继承，但是仍然能够在java script中实现继承，通过把已定义类的一个实例拷贝到其派生类的原型当中。 在提供例子之前，需要介绍一个constructor属性。java script保证每一个原型中都包含constructor，它拥有到该构造器函数的一个参考。换句话说，Ctotype.const

12、ructor包含一个到Calculator()的参考。 下面的代码显示了怎样从基类Calculator派生类ArithmeticCalculator。其中，“第一行”取得类Calculator的所有属性，而“第二行”把原型constructor的值恢复成ArithmeticCalculator： function ArithmeticCalculator() ; with (ArithmeticCalculator) ArithmeticCtotype = new Calculator();/第一行 prototype.constructor = Arithmetic

13、Calculator;/第二行 上面的实例看起来像一个合成体而不是继承，但是java script引擎还是清楚这个原型链的。特别是，instanceof操作符会正确地适用于基类和派生类。假定创建类ArithmeticCalculator的一个新实例为： var c = new ArithmeticCalculator; 则表达式c instanceof Calculator和c instanceof ArithmeticCalculator都会成立。 注意：在上面示例中基类的constructor是在初始化ArithmeticCalculator原型时被调用的，而在创建派生类的实例时并不被调用

14、。这可能会带来不想要的负面影响，而且为了实现初始化应该考虑创建一个独立的函数。由于该构造器并不是一个成员函数，所以它无法通过this参考引用调用。因此需要一个能调用超类的“Calculator”成员函数： function Calculator(ops) ; with (Calculator) prototype.Calculator=Calculator; 现在，可以写一个继承类，它显示地调用基类的构造器： function ArithmeticCalculator(ops) this.Calculator(ops); with (ArithmeticCalculator) Arithmet

15、icCtotype = new Calculator; prototype.constructor = ArithmeticCalculator; prototype.ArithmeticCalculator = ArithmeticCalculator; 多态性：java script是一种非类型化的语言。在此，一切都是对象。因此，如果有2个类A和B，它们都定义一个foo()，则java script将允许在A和B的实例上多态地调用foo()，即使不存在层次关系(虽然是可实现的)。从这一角度来看，java script提供一个比Java更宽的多态性。这种灵活性，也要

16、付出代价。在这种情况中，代价是把类型检查工作代理到应用程序代码。具体地说，如果需要检查一个参考确实指向一个所希望的基类，则可以通过instanceof操作符来实现。 另一方面，java script并不检查函数调用中的参数：这可以防止用一样的命名和不同的参数来定义多态函数（并且让编译器选择正确的签名）。代之的是，java script提供了一个Java 5风格的函数范围内的argument对象；它允许你根据参数的类型和数量的不同实现一个不同的行为。 2.2AJAX组件授权 所有的AJAX组件授权方案在现在被逻辑地分成两组。具体地说，第一组用于与基于HTML的UI定义的无缝集成。第二组把HTML当作一个UI定义语言以支持某种XML。在此，从第一组中来展示一种方法；虽然它存在于浏览器之中却是类似于JSP标签。这些浏览器特定的组件授权扩展在IE情形下称作元素行为，而在最近版本的Firefox，Mozilla和Netscape 8情形下称作可扩展的绑定。 2.3定制标签 Internet Explorer，从版本5.5开始，支持定制的客户端HTML元素的java sc