使用 Microsoft Ajax Library 创建自定义客户端脚本

简介:

MSDN地址:http://msdn.microsoft.com/zh-CN/library/bb386453.aspx

Microsoft Ajax Library是微软提供的一套基于客户端的Ajax js库,通过在页面中添加ScriptManager控件可以管理这些脚本和任何自定义的脚本。

本节所介绍的所有内容均依赖于该JS库,与服务器开发无关!

MS Ajax Library有一些功能:

  • 向js中添加了面向对象的功能,可以使用类、命名空间、继承等组织js代码。
  • 反射功能,在运行时检查客户脚本的结构和组件。
  • 枚举
  • 扩展了JS的基类型,缩短开发时间
  • 更好的调试和跟踪功能。

JS面向对象的用法

Type 类为 JavaScript 编程添加了命名空间、类和继承等面向对象的功能。任何使用 Type 类注册的 JavaScript 对象都会自动获得访问此功能的权限。

复制代码
//注册命名空间
Type.registerNamespace("Demo");

//为命名空间添加Person类,后面的方法为Person的构造函数
Demo.Person = function (firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

//Person类的方法
Demo.Person.prototype = {
    getFirstName: function () {
        return this._firstName;
    },

    getLastName: function () {
        return this._lastName;
    },

    getEmailAddress: function () {
        return this._emailAddress;
    },
    setEmailAddress: function (emailAddress) {
        this._emailAddress = emailAddress;
    },

    getName: function () {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function () {
        alert('bye ' + this.getName());
    },

    sendMail: function () {
        var emailAddress = this.getEmailAddress();

        if (emailAddress.indexOf('@') < 0) {
            emailAddress = emailAddress + '@example.com';
        }
        alert('Sending mail to ' + emailAddress + ' ...');
    },

    toString: function () {
        return this.getName() + ' (' + this.getEmailAddress() + ')';
    }
}
//注册类Demo.Person
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

//定义Employee类
Demo.Employee = function (firstName, lastName, emailAddress, team, title) {
    Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]);

    this._team = team;
    this._title = title;
}
//Employee类的方法
Demo.Employee.prototype = {

    getTeam: function () {
        return this._team;
    },
    setTeam: function (team) {
        this._team = team;
    },

    getTitle: function () {
        return this._title;
    },
    setTitle: function (title) {
        this._title = title;
    },
    toString: function () {
        return Demo.Employee.callBaseMethod(this, 'toString') + '\r\n' + this.getTitle() + '\r\n' + this.getTeam();
    }
}
//注册Demo.Employee类,并指定其继承自Demo.Person类
Demo.Employee.registerClass('Demo.Employee', Demo.Person);
复制代码

调用的代码:

var person = new Demo.Person('Jack', 'Smith', 'jack@hotmail.com');
alert(person.getEmailAddress());

var employee = new Demo.Employee('Jack', 'Smith', 'jack@hotmail.com', 'Web Dev', '');
alert(employee.getTeam());

使用接口

//注册接口
Demo.Trees.IFruitTree.registerInterface('Demo.Trees.IFruitTree');
//使用接口
//类Demo.Trees.FruitTree继承了Demo.Trees.Tree,并实现了接口Demo.Trees.IFruitTree
Demo.Trees.FruitTree.registerClass('Demo.Trees.FruitTree', Demo.Trees.Tree, Demo.Trees.IFruitTree);

使用枚举

复制代码
//注册命名空间
Type.registerNamespace("Demo");
//定义枚举类型
Demo.Color = function () { };
Demo.Color.prototype =
{
    Red: 0xFF0000,
    Blue: 0x0000FF,
    Green: 0x00FF00,
    White: 0xFFFFFF
}
//注册枚举类型
Demo.Color.registerEnum("Demo.Color");

//用法
var color = Demo.Color.Red;
复制代码

反射的用法

反射是指在运行时检查程序的结构和组件的能力。实现反射的 API 是对 Type 类的扩展。通过这些方法,可以收集有关对象的信息,例如该对象继承自谁,它是否实现特定的接口,以及它是否是特定类的实例等。

复制代码
var g = new Demo.Trees.GreenApple();
var gt = Demo.Trees.GreenApple;
var a = new Array(
    Demo.Trees.Apple,
    Demo.Trees.Tree,
    Demo.Trees.Pine,
    Demo.Trees.IFruitTree,
    Sys.IContainer);

function OnButton1Click() {
    for (var i = 0; i < a.length; i++) {
        //是否为某一类型的实例
        if (a[i].isInstanceOfType(g)) { 
            alert(gt.getName() + " is a " + a[i].getName() + ".");
        }
        else alert(gt.getName() + " is not a " + a[i].getName() + ".");
    }
}

function OnButton2Click() {
    for (var i = 0; i < a.length; i++) {
        //是否继承自某一类型
        if (gt.inheritsFrom(a[i])) {
            alert(gt.getName() + " inherits from " + a[i].getName() + ".");
        }
        else alert(gt.getName() + " does not inherit from " + a[i].getName() + ".");
    }
}

function OnButton3Click() {
    for (var i = 0; i < a.length; i++) {
        //判断类型是否为接口
        if (Type.isInterface(a[i])) {
            //判断对象是否实现了接口
            if (gt.implementsInterface(a[i])) {
                alert(gt.getName() + " implements the " + a[i].getName() + " interface.");
            }
            else alert(gt.getName() + " does not implement the " + a[i].getName() + " interface.");
        }
        else alert(a[i].getName() + " is not an interface.");
    }
}


本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2013/01/06/2847681.html,如需转载请自行联系原作者
相关文章
|
7月前
|
XML 前端开发 JavaScript
CSR(客户端渲染)和AJAX在Web开发中各自扮演不同的角色
【5月更文挑战第8天】CSR(客户端渲染)与AJAX在Web开发中各司其职。CSR提供初始HTML框架,通过JavaScript在浏览器端获取并渲染数据,提升交互性和响应速度。AJAX则实现页面局部更新,如实时搜索,不刷新页面即可获取数据。CSR可能因DOM操作多而引发性能问题,但可优化解决;AJAX适合频繁交互场景,提高响应性。两者在不同需求下各有优势,需按项目选择适用技术。
67 4
|
7月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
60 0
|
XML 前端开发 JavaScript
Ajax --- 客户端与服务器端之间传递数据
Ajax --- 客户端与服务器端之间传递数据
122 0
|
Web App开发 JavaScript 应用服务中间件
第105天:Ajax 客户端与服务器基本知识
一、服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1、服务器类型 - 按服务类型可分为:文件服务器、数据库服务器、邮件服务器、Web服务器等 - 按操作系统可分为:Linux服务器、Windows服务器等 - 按应用软件可分为:Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、 weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等 2、 服务器软件     使计算机具备提供某种服务能力的应用软件,称为服务器软件, 通过安装相应的服务软件,然后进行配置后就可以使计算具备了提供某种服务的能力。
1255 0
|
前端开发 关系型数据库
ADF_ADF Faces系列2_使用JSF开发基于Ajax的用户界面:ADF Faces富客户端组件简介(Part2)
2013-05-01 Created By BaoXinjian 一、摘要 待整理 待整理 待整理 待整理 待整理 待整理 Thanks and Regards ERP技术讨论群: 288307890 技术交流,技术讨论,欢迎加入 Technology Blog Create...
751 0
|
前端开发 .NET 开发框架
ReportViewer控件无法显示(ASP.NET Ajax 客户端框架未能加载,"Sys"未定义)
由于换了服务器 所以网站要重新发布。 结果发布到新的服务器上的时候reportviewer却无法显示控件 一开始是用IE游览器游览的 找不都错误所在,以为是reportviewer 的问题 于是在网上搜索发现了很多关于这方面的内容 但是发现出现相关的情况 都是“reportviewer在IIS7无法显示”为主题的。
1350 0
|
前端开发 C++ JavaScript
[前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化
在前端优化中,js、css等文件的优化一般都是压缩的优化,进行合并、减小体积以达到减小请求的目的。 今天发现了一个集成在VS中的压缩插件,使得压缩变得比较快捷。 配置方法 首先需要去下载Microsoft Ajax Minifier,一路安装就可以,如果VS正在使用,需要重启。
1019 0