学习ajax 笔记（一）

学习ajax 笔记（一）

1.传统页面的过程

很多文件都是通过http协议请求来传送的

2.Ajax应用    

 异步的发生请求

页面部分刷新

减少数据传输量

（请求的数据传输量不变，主要是回发的数据传输量）

提高用户的体验

   （胡乱应用的话，会造成反方向的结果）

3.   asp.net的ajax应用 

服务器为中心的开发（是不用写js代码的）

客户端为中心开发（提供了丰富的支持）

4．microsoft Ajax library

 javascript基础扩展

 浏览器兼容层（ie，forbox）

 面向对象类型系统(维护和扩展的方法)

 提供一个异步通信层（对象进行封装进行扩张，服务器端和客户端之间的通信

 提供客户端基础类库（一些模型的基础）

下面是一段用JavaScript实现的面向对象的系统

客户端相应用户请求

<script language="javascript" type="text/javascript">
    //注册一个命名空间（一个类面向对象）
     Type.registerNamespace("AspNetAjaxOverView");
     //定义一个Person类
     //顶一个构造函数，有两个参数，将用户传入的两个参数保存下来
     //加下划线的是私有成员
     AspNetAjaxOverView.Person=function (firstName,lastName)
     {
         this._firstName=firstName;
         this._lastName=lastName ;
     }
     //定义成员方法
     AspNetAjaxOverView.Person.prototype =
     {
        //得到其属性(方法)
        get_firstName :function()
        {
           return this._firstName;
        },
        get_lastName :function()
        {
          return this._lastName;
        },
        toString :function()
        {
           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>

 以及一个用异步通信层实现信息传输

 <script language="javascript" type="text/javascript">
    function showEmployee(firstName, lastName, title)
    {
        //异步通信层定义一些类
        var request=new Sys.Net.WebRequest();
        //(2)设置请求URL
        request.set_url("GetEmployee.ashx");
         //(3)设置请求方式
        request.set_httpVerb("POST");
        //(4)设置请求完成时的处理函数
        //回调函数含义：发出一个请求，服务器通过你指定一个回调函数来回复你
        request.add_completed(onGetEmployeeComplete);
        
        //encodeURIComponent进行转义
        var requestBody=String.format(
        "firstName={0}&lastName={1}&title={2}",
        encodeURIComponent(firstName),
        encodeURIComponent(lastName),
        encodeURIComponent(title));
        //传进去
        request.set_body(requestBody);
        
        //发送信息
        request.invoke();
        
        function onGetEmployeeComplete(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>

对应请求在一般处理程序写  

<%@ 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";
            
            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);

            //将对象序列化为json数据格式
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string jsonEmp = serializer.Serialize(employee);
            
            //进行输出
            context.Response.Write(jsonEmp);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }
}

其中的Employee类是

public class Employee
    {
        private string _FirstName;
        private string _LastName;
        private string _Title;

        public Employee() { }

        public Employee(string firstName, string lastName, string title)
        {
            this._FirstName = firstName;
            this._LastName = lastName;
            this._Title = title;
        }

        public string FirstName
        {
            get
            {
                return this._FirstName;
            }
        }

        public string LastName
        {
            get
            {
                return this._LastName;
            }
        }

        public string Title
        {
            get
            {
                return this._Title;
            }
        }
    }

客户端访问WebService方法

对应的JavaScript

<script language="javascript" type="text/javascript">
            function showEmployee(firstName, lastName, title)
            {
                //调用WebService的方法
                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>

webservice代码

<%@ WebService Language="C#" Class="AspNetAjaxOverview.EmployeeService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

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);
        }
    }
}