Ajax系列之二——面向对象

在上一篇博客中，对Ajax的机理以及应用做了简要的概述，这篇博客开始从代码中学习Ajax语法，并逐渐体会Ajax的精妙之处。

简单地说Ajax是javascript和xml两大核心技术的综合运用，他们都是基于面向对象的开发。所以，面向对象是Ajax的基础，但是每一种语言具体面向对象的语法又不尽相同，那么针对Ajax的语法学习就从面向对象的基础做起吧。

下面的实例通过Ajax在界面端创建一个Person类和Employee类。Person类中封装firstName和lastName两个属性，Employee类继承Person类，并添加title属性；Person类重写toString方法，该方法将firstName和lastName通过alert的方法显示出来，Employee类重写Person的toString方法，将firstName、lastName和title都显示出来。

运行效果见下图：



有了整体的设计目标，就开始实际的代码编写。

1、界面设计

添加一个普通的web页面，然后从工具箱中拖出一个ScriptManager



一个页面中只能有一个ScriptManager，它的作用是统一调配Ajax方法？



2、编写Ajax代码

因为是javascript代码，所以，代码要放到下面的框架中。

<script language="javascript" type="text/javascript"> //注册命名空间，这里的命名空间最好是你的应用程序名，也可不是 Type.registerNamespace("AspNetAjaxOverView"); …… </script>

使用面向对象的思想编写Person类，并为该类封装firstName和lastName两个属性和toString方法。

//声明一个Person类 AspNetAjaxOverView.Person = function (firstName, lastName) { this._firstName = firstName; this._lastName = lastName; } //Person类的属性，并重写toString方法。属性字段以及方法间用逗号隔开 AspNetAjaxOverView.Person.prototype = { get_firstName: function () { return this._firstName; }, get_lastName: function () { return this._lastName; }, //重写toString方法 toString: function () { return String.format("Hello, I'm {0} {1}.", this.get_firstName(), this.get_lastName()); } } //注册Person类到命名空间 AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");

这里需要注意：

1.首先要显示的注册一个命名空间。

因为自定义的Person类缺少默认的命名空间，这里不同于一般的使用C#声明一个类的方法。

2.声明好的Person类，仍需要显示的注册到相应的命名空间AspNetAjaxOverView下。

这里的命名空间可以是你的应用程序名，也可不是。

3.具有和javascript相同的声明属性和方法的语法。

属性和方法之间使用逗号“，”隔开。

编写Employee类，继承Person类：

  //声明Employee类，继承Person类 AspNetAjaxOverView.Employee = function (firstName, lastName, title) { //继承的语法initializeBase（初始化基础），类似C++，只续写新添加的字段 AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]); this._title = title; } //属性的继承，只续写新增属性字段 //Employee类继承了Person类的属性，只续写title属性 AspNetAjaxOverView.Employee.prototype = { get_title: function () { return this._title; }, //方法的继承，callBaseMethod实现 //继承父类Person的toString方法，只续写title字串 toString: function () { return AspNetAjaxOverView.Employee.callBaseMethod(this, "toString") + " My title is '" + this.get_title() + "'."; } } //注册Employee类，并指明该类继承自Person类 AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee", AspNetAjaxOverView.Person);

面向对象的继承总结：

1.属性和方法的继承只续写新增属性字段。类似C++的语法。

2.子类在注册到命名空间的时候还需要指明继承的父类。

3.方法的继承使用callBaseMethod

4.属性的继承使用prototype

通过添加按钮的单击事件调用ajax的方法，显示相应的职位和名称。

<%--通过按钮调用ajax的方法--%>
<input type="button" value="Li Limin"
onclick="alert(new AspNetAjaxOverView.Employee('Li', 'Limin', '董事长'));" />
<input type="button" value="Bill Gates"
onclick="alert(new AspNetAjaxOverView.Employee('Bill', 'Gates', '总经理'));" />

到此为止，所有的代码就都完成了。我们可以总结出，这里的Ajax技术采用javascript的脚本语言，采用面向对象的思想，实现：单击窗体上的按钮，通过alert方法，调用自定义的函数，动态添加函数的参数，从而达到动态显示相关的信息的效果。