侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

Ajax系列之二——面向对象

2024-05-12 星期日 / 0 评论 / 0 点赞 / 87 阅读 / 6651 字

在上一篇博客中,对Ajax的机理以及应用做了简要的概述,这篇博客开始从代码中学习Ajax语法,并逐渐体会Ajax的精妙之处。 简单地说Ajax是javascript和xml两大核心技术的综合运用,

     在上一篇博客中,对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方法,调用自定义的函数,动态添加函数的参数,从而达到动态显示相关的信息的效果。

广告 广告

评论区