Ajax实战

1：调用WebService

namespace PatternTest
{
    /**//// <summary>
    /// WebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
    }
}
//以下是页面
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
          <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
        </asp:ScriptManager>
        <div id="divUName"></div>
        <script>
         Sys.Application.add_load(WriteStr);
         function WriteStr()
         {
           PatternTest.WebService.HelloWorld(GetStr);
         }
         function GetStr(r)
         {
           $get("divUName").innerText = r;
         }
        </script>
    </div>
    </form>

2：认识UpdatePanel

//前台代码
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        
        </asp:ScriptManager>
    
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel>
//后台代码
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2000);
            TextBox1.Text = "赫赫";
        }

3：测试页面生命周期

    <script>
        window.onload = function() {
            alert("window loading");
        }
        Sys.Application.add_init(initIt);
        Sys.Application.add_load(loadIt);
        function initIt() {
            alert("init");    
        }
        function loadIt() {
            alert("load");
        }
    </script>

4：认识DomElement与DomEvent

   <script>
    
    //在element节点下按照ID查找页面元素
    //Sys.UI.DomElement.getElementById(id,element);
    //获得页面元素相对于窗体或frame的位置 x,y
    //Sys.UI.DomElement.getLocation(element);
    //设置element的位置，此位置跟parent node有关，如果parent node的position设置为absolute或relative，则此位置为相对于parent node的位置，否则为相对于窗体或frame的位置
    //Sys.UI.DomElement.setLocation(element,X,Y);
    //获取元素的边界信息
    //var b = Sys.UI.DomElement.getBounds($get("txtUserName"));
    //var height = b.height;
    //var width = b.width;
    //var x = b.x;
    //var y = b.y;
    //给element添加css class
    //Sys.UI.DomElement.addCssClass(element,cssname);
    //移出元素的CSS
    //Sys.UI.DomElement.removeCssClass(element,css);
    //如果element已有该css class则移除，否则添加
    //Sys.UI.DomElement.toggleCssClass(element,cssname);
    //判断element是否有该css class
    //Sys.UI.DomElement.containsCssClass(element,cssname);
    
    
    // 订阅事件处理函数，传递一个Sys.UI.DomEvent实例参数evt，通过这个evt参数，可以获得触发该事件的若干信息
    //Sys.UI.DomEvent.addHandler($get("btnCommit"),"mousedown",btnCommitMouseDown)
    //function btnCommitMouseDown(evt)
    //{}
    //移出事件
    //Sys.UI.DomEvent.removeHandler($get("btnCommit"),"mousedown",btnCommitMouseDown);
    //批量订阅事件
    //Sys.UI.DomEvent.addHandlers($get("btnCommit"), {"click":btnCommitClick, "keypress":btnCommitKeyPress});
    //function btnCommitClick(evt) {
    //    alert(evt.type);
    //}
    //function btnCommitKeyPress(evt) {
    //    alert(evt.type);
    //}
    //批量移出事件
    //Sys.UI.DomEvent.clearHandlers(element);
    
    /**//*
    (1) getType 方法
        获得一个对象实例的类型
    (2) getTypeName 方法
        获得一个对象实例的类型名称
            
    UserLogic = function() {
      this._userName = "guo";
    }
    UserLogic.prototype = {
      get_userName : function() {
      return this._userName;
      }
    };
   
    UserLogic.registerClass("UserLogic");
               
    var u = new UserLogic();
                
    alert(Object.getTypeName(u);
    alert(Object.getType(u));
    */
    
    /**//*
    Array类型
    add 方法
        增加一个item 
    addRange 方法 
        增加一个Array到末尾
    clear 方法 
        移除所有元素
    clone 方法 
        将数组克隆
    contains 方法
        是否包含给定的item 
    dequeue 方法 
        从开始处移除第一个item
    enqueue 方法
        与add方法功能相同 
    forEach 方法
        遍历数组并订阅一个数组处理函数
    indexOf 方法
        找到与给定item匹配的元素，并返回它的索引值 
    insert 方法
        在数组中插入一个item 
    parse 方法
         将字符串转换为数组，字符串格式必须为："['item1', 'item2', 'item3']" 
    remove 方法
        移除与给定item匹配的第一个元素 
    removeAt 方法
        移除给定索引位置的元素          
    
    
    
    var arr = ["gzj", "jww"];
    Array.add(arr, "wen");
    alert(arr.join(","));
            
    Array.addRange(arr, ["cc","dd", "cc"]);
    alert(arr.join(","));
            
    Array.remove(arr, "cc");
    alert(arr.join(","));
    
    var arr = ["gzj", "jww"];
    this.prefix = "$";
    Array.forEach(arr, addPrefix, this);
    function addPrefix(element, index, array) {
     alert(element);
     alert(index);
     alert(array.toString());
     alert(this.prefix);
    }
    
    var s = "['item1', 'item2', 'item3']";
    var arr = Array.parse(s);
    alert(arr.join("|"));    
    */
      
    </script>

5：调试

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <textarea id="TraceConsole" cols="50" rows="10"></textarea>
    <script>
     //将一个跟踪文本信息在TraceConsole中显示
     //Sys.Debug.trace("调试信息");
     
     //将一个对象的所有属性信息（包括值）在TraceConsole中显示
     //Sys.Debug.traceDump(Sys.UI.DomElement.getLocation($get("TraceConsole")));
     
     //也就是我们在Unit Test中常见的断言，当condition为false的时候，脚本执行会异常终止，并提示message信息，如果displayCaller为true的话，将显示断言所属的调用者（函数）
     //Sys.Debug.assert(1>2,"傻瓜",false);
     
     //在Error下的几个方法可以帮助我们创建几个常用的内建的异常类型
     //try {
     //  throw Error.argumentNull();
     //    }
     //catch(e) {
     //  Sys.Debug.traceDump(e);
     //}
     
     //可以通过Error的create自定义异常类型
     //var myError = Error.create("myError", {name: " xxx", desc : "my cc"});
     //try {
     //    throw myError;
     //}
     //catch(e) {
     //    Sys.Debug.traceDump(e);
     //}     
    </script>

 6：面向对象

//脚本
Type.registerNamespace("Haixia");

Haixia.Person = function(name) {
    this._name = name;
}
Haixia.Person.prototype = {
    get_name : function() {
        return this._name;
    },
    set_name : function(name) {
        this._name = name;
    },
    sayHello : function() {
        alert('I am a person, my name is ' + this._name);
    }
}
Haixia.Person.registerClass("Haixia.Person");



//两个步骤实现继承：
//    1) 子类构造函数中调用 initializeBase方法，第一个param为关键字this,第二个参数为构造函数参数组成的Array
//    2) 类代码的末尾调用 registerClass方法，标明父类
Haixia.Student = function(name) {
    Haixia.Student.initializeBase(this, [name]);
}
//重写父类方法
Haixia.Student.prototype = {
    sayHello : function() {
        alert('I am a student, my name is ' + this._name);
    }
}
//调用一下父类的sayHello方法，然后再接着子类自己的逻辑
Haixia.Student.prototype = {
      sayHello : function() {
          Haixia.Student.callBaseMethod(this, 'sayHello');
          alert('actually I am a student');
      },
      walk : function() {
          alert('I am walking');
      }
}//实现步骤：调用callBaseMethod方法，第一参数：this关键字, 第二个参数：要调用的父类的方法名，第三个参数：可选，如果父类的这个方法有参数，则为参数列表组成的Array   


//定义接口
Haixia.IWalkable = function() {
    throw Error.notImplemented();
}
Haixia.IWalkable.prototype = {
    walk : function() {
        throw Error.notImplemented();
    }
}
Haixia.IWalkable.registerInterface("Tristan.IWalkable");// 1. 方法中都抛异常，避免接口被实例化  2.调用registerInterface方法

//子类实现接口
Haixia.Student.registerClass("Haixia.Student", Haixia.Person, Haixia.IWalkable);//标明Student类实现Tristan.IWalkable接口，如果要实现多个接口，那么继续往后加参数

//不实现接口
Haixia.Student.registerClass("Haixia.Student", Haixia.Person);

//前台调用
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
         <asp:ScriptReference Path="~/Person.js" />
        </Scripts>
        </asp:ScriptManager>
    <script>
     //调用对象
     //var p = new Haixia.Person("liang");
     //p.sayHello();
     
     var p = new Haixia.Student("liang");
     p.sayHello();
    </script>

7：枚举

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <script>
     Type.registerNamespace("Haixia");
     
     Haixia.Nationality = function() {
         throw Error.notImplemented();
     }
     
     Haixia.Nationality.prototype = {
         China : 1,
         USA : 2,
         UK : 3
     }
     
     Haixia.Nationality.registerEnum("Haixia.Nationality");
     Sys.Application.notifyScriptLoaded();
     
     /**//*
     1) 定义一个名为 Tristan.Nationality的函数
     2) 为避免被实例化，在函数被调用的时候抛出 Error.notImplemented()异常
     3) 枚举项定义在prototype里，枚举的value必须为int型
     4) 通过调用 Tristan.Nationality.registerEnum方法注册枚举  
     */
     
     var nationality = Haixia.Nationality.USA;
     Sys.Debug.trace(nationality);
     //call toString() method to get the enum key
     Sys.Debug.trace(Tristan.Nationality.toString(nationality));
     Sys.Debug.trace(Tristan.Nationality.toString(3));
     //call parse() method to get the enum value
     Sys.Debug.trace(Tristan.Nationality.parse("China"));
     
     /**//*
     调用toString()方法，接受一个value，可以取得对应的枚举项的key
     调用parse()方法，接受key，可以取得对应的枚举项的value，key参数是大小写敏感的
     */
     
     /**//*
     2
     USA
     UK
     1
     */
     </script>