ajax学习笔记(1)

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            alert(prm.get_isInAsyncPostBack()); //判断是否为异步提交
一.Ajax类

< form id = " form1 "  runat = " server " >
         < asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
         </ asp:ScriptManager >
    
     < script language = " javascript "  type = " text/javascript " >
        Type.registerNamespace( " AspNetAjaxOverView " );  // 注册命名空间
         // 写一个类,=号后为构造方法
        AspNetAjaxOverView.Person  =   function (firstName, lastName)
         {
            this._firstName = firstName;
            this._lastName = lastName;
        }
     // 写个属性,get方法以get_开头,set方法同上    AspNetAjaxOverView.Person.prototype = 
         {
            get_firstName : function()
            {
                return this._firstName;
            },
            get_lastName : function()
            {
                return this._lastName;
            },
            toString : function()
            {//toString覆盖了类的toString方法
                return String.format("Hello, I'm {0} {1}.",
                    this.get_firstName(),
                    this.get_lastName());
            }
        }
     // 把这个类注册到命名空间
AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");
     // 定义子类    
        AspNetAjaxOverView.Employee  =   function (firstName, lastName, title)
         {
    //继承父类的构造方法
AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]);
            
            this._title = title;
        }
        AspNetAjaxOverView.Employee.prototype  =  
         {
            get_title : function()
            {
                return this._title;
            },
            toString : function()
            {
//调用父类中的toString方法
                return AspNetAjaxOverView.Employee.callBaseMethod(this, "toString") + 
                    " My title is '" + this.get_title() + "'.";
            }
        }
     // 注册时第二个参数表明为继承父类
    AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee", AspNetAjaxOverView.Person);
     </ script >

二.异步通讯类
1.服务器端定义一个C#类
  public class Employee
 {
  private string _FirstName;
  private string _LastName;
  private string _Title;

  public Employee() { }
  public Employee(string firstName, string lastName, string title)
  public string FirstName
  public string LastName
  public string Title
 }
2.服务器端接收请求的GetEmployee.ashx

GetEmployee.ashx
<%@ WebHandler Language="C#" Class="AspNetAjaxOverview.GetEmployee" %>

using System;
using System.Web;
using System.Web.Script.Serialization;

namespace AspNetAjaxOverview
{
    public class GetEmployee : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //从客户端获取Request参数
            string firstName = context.Request.Params["firstName"];
            string lastName = context.Request.Params["lastName"];
            string title = context.Request.Params["title"];
            Employee employee = new Employee(firstName, lastName, title);
            //创建Javascript序列化实例
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string jsonEmp = serializer.Serialize(employee);//把C#实例Javascript序列化
            //把C#实例发送到客户端
            context.Response.Write(jsonEmp);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }
}

3.客户端调用这个类

Code
<script language="javascript" type="text/javascript">
    function showEmployee(firstName, lastName, title)
    {  //创建Request实例
        var request = new Sys.Net.WebRequest();
        request.set_url('GetEmployee.ashx'); //请求到GetEmployee.ashx
        request.set_httpVerb("POST");//请求方式
        request.add_completed(onGetEmployeeComplete);//添加回调函数到Request实例
        
        var requestBody = String.format(
            "firstName={0}&lastName={1}&title={2}",
            encodeURIComponent(firstName),//转义为可请求URI格式
            encodeURIComponent(lastName),
            encodeURIComponent(title));
        request.set_body(requestBody);//添加到Request参数集
        
        request.invoke();//发送请求
    }
    //回调函数定义
    function onGetEmployeeComplete(response)
    {//response.get_responseAvailable():Response是否有可用回复
        if (response.get_responseAvailable())
        {
            var employee = response.get_object();//接收服务器端实例
            alert(String.format(
                "Hello I'm {0} {1}, my title is '{2}'",
                employee.FirstName,//使用服务器端实例的属性
                employee.LastName,
                employee.Title));
        }
    }
</script>

三．客户端调用Webservice
1.服务器端Webservice

namespace  AspNetAjaxOverview
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService] //允许客户端调用的类标记(必须)
    public class EmployeeService : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod]  //允许客户端调用的方法标记(必须)
        public Employee GetEmployee(string firstName, string lastName, string title)
        {
            return new Employee(firstName, lastName, title);
        }
    }
}

2.客户端调用

< asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
     < Services >
     <!-- 为ScriptManager指定WebService服务器端程序,会自动生成客户端代理 -->
         < asp:ServiceReference Path = " EmployeeService.asmx "   />
     </ Services >
</ asp:ScriptManager >

< script language = " javascript "  type = " text/javascript " >
     function  showEmployee(firstName, lastName, title)
     {//在这里就可以直接调用WebServic方法了
        AspNetAjaxOverview.EmployeeService.GetEmployee(
            firstName,
            lastName,
            title,
            onGetEmployeeSuccess);
    }
     // 回调函数参数为服务器端类实例,通过代理可直接使用
     function  onGetEmployeeSuccess(employee)
     {
        alert(String.format(
            "Hello I'm {0} {1}, my title is '{2}'",
            employee.FirstName,
            employee.LastName,
            employee.Title));
    }
</ script >