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"
		οnclick="alert(new AspNetAjaxOverView.Employee('Li', 'Limin', '董事长'));" />
    <input type="button" value="Bill Gates"
		οnclick="alert(new AspNetAjaxOverView.Employee('Bill', 'Gates', '总经理'));" />

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