ASP.NET AJAX（1）__Microsoft AJAX Library

ASP.NET AJAX（1）__Microsoft AJAX Library

Microsoft AJAX Library为我们提供的客户端框架，提供的内容大概可以概括为以下的几种:

javascript基础扩展

浏览器兼容层

面向对象类型系统

客户端基础类库

异步通信层

       Microsoft AJAX Library为我们提供了javascript基础扩展，一些在javascript类型中没有但是会经常用到的一种方法，方便了我们的开发，然后它还提供了浏览器兼容层，通常，我们使用javascript开发的时候，我们经常会遇到浏览器不兼容的情况，而要做到浏览器的兼容，我们就不得不了解各种常用浏览器对javascript支持的差异，也不得不在各种浏览器里去调试代码，甚至于写不同的javascript代码来对各种浏览器进行支持，这很明显是一件费时费力的工作，但是Microsoft AJAX Library为我们提供了浏览器兼容层这样一个概念，这样我们就可以不考虑（也不能说完全不考虑，只是这种情况少了很多）浏览器之间对javascript不同的支持，而去使用Microsoft AJAX Library为我们提供的这一个跨浏览器的支持进行开发，而面向对象类型系统，则提高了我们代码的质量（这里，强调一下：合理使用），在Microsoft AJAX Library中，提供了一些在客户端可以直接使用的基础类库，比如最常用的StringBuilder，在我们直接使用AJAX的时候，我们通常需要创建一个XmlHttpRequest,然后对它做一些操作，然后把它send到服务器，然后在客户端得到返回信息，而后进行相应的操作，而异步通信层，是把这些对象进行一些封装，然后丰富这些功能，实际上，在ASP.NET AJAX中，几乎所有的客户端和服务器端进行的交互，都是通过这里的异步通信层。

这里首先演示一个Microsoft AJAX Library提供的面向对象类型系统

在aspx标记中，可以在<script>这个element中创建类，具体方式如下

首先在页面中添加一个ScriptManager

然后插入javascript代码：

<script language="javascript" type="text/javascript">
            Type.registerNamespace("Demo"); //注册一个命名空间
            //定义一个类Vehicle，并定义它的构造函数
            Demo.Vehicle = function(name, fullSpeed) {
                this._name = name;
                this._fullSpeed = fullSpeed;
            }
            //定义类Vehicle的成员
            Demo.Vehicle.prorotype = {
                get_name: function() {//使用get_***或者set_***定义属性，这属于一个约定的做法
                    return this._name;
                },
                get_fullSpeed: function() {
                    return this._fullSpeed;
                },
                set_fullSpeed: function(value) {
                    this._fullSpeed = value;
                },
                toString: function() {//覆盖基类中的toString方法
                    return String.format("This {0}'s full speed is {1}.",this.get_name(),this.get_fullSpeed());
                }
            }
            Demo.Vehicle.registerClass("Demo.Vehicle");//将这个类注册到命名空间中

            Demo.Truck = function(name, fullSpeed, weight) {
                Demo.Truck.initializeBase(this, [name, fullSpeed]);//调用父类的构造函数，并将需要的参数name,fullSpeed传给它
                this._weight = weight;
            }
            Demo.Truck.prototype = {
                get_weight: function() {
                    return this._weight;
                },
                toString: function() {
                    //使用callBaseMethod调用父类方法
                    return Demo.Truck.callBaseMethod(this, "toString") + ",and this truck can load " + this.get_weight() + "kg heavy.";
                }
            }
            Demo.Truck.registerClass("Demo.Truck", Demo.Vehicle); //使用registerClass注册该类，并使它继承自Demo.Vehicle
        </script>

这样我们这个两个类就定义完了

然后示范一下使用这两个类,在页面中添加两个按钮

<div id="text"></div>
        <input type="button" value="Audi S5" onclick="document.getElementById('text').innerHTML=(new Demo.Vehicle('Audi S5',250))" />
        <input type="button" value="北方奔驰" onclick="document.getElementById('text').innerHTML=(new Demo.Truck('FAW',150,30000))" />

这样，我们就生成了两个客户端类的实例，并分别调用了他们的toString方法

这里我们再看一个Microsoft AJAX Library提供的异步通信层的支持

同样，首先在页面中添加一个ScriptManager控件

然后插入Javascript代码:

<script language="javascript" type="text/javascript">
            function realizeVehicle(name, fullSpeed, myWeight) {
                var request = new Sys.Net.WebRequest();
                request.set_url("GetVehicle.ashx");//设置要调用的一般处理程序，我们接下来将会创建它
                request.set_httpVerb("POST"); //使用POST方式发送数据
                request.add_completed(onCompleted); //定义一个回调函数，在一般处理程序发送回数据后，回调函数将会被执行

                //这里要使用encodeURIComponent方法转义一些特殊字符
                var requestBody = String.format("name={0}&fullSpeed={1}&Weight={2}", encodeURIComponent(name), encodeURIComponent(fullSpeed), encodeURIComponent(myWeight));//定义要发送给服务器端的RequestBody
                request.set_body(requestBody);//设置RequestBody

                request.invoke();
            }

            function onCompleted(response) {
                
                if (response.get_responseAvailable()) {//验证得到的response是否可用
                    var vehicle = response.get_object();
                    $get("text").innerHTML = String.format("This {0}'s full speed is {1} km/h.and this truck can load {2} kg heavy.", vehicle.Name, vehicle.FullSpeed,vehicle.Weight);
                }
            }
        </script>

然后定义一个Vehicle类，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
///Vehicle 的摘要说明
/// </summary>
public class Vehicle
{
    private string name;
    private int fullSpeed;
    private float weight;


    public Vehicle(string name,int fullSpeed,float weight)
    {
        this.name = name;
        this.fullSpeed = fullSpeed;
        this.weight = weight;
    }

    public string Name
    {
        get { return this.name; }
    }

    public int FullSpeed
    {
        get { return this.fullSpeed; }
    }

    public float Weight
    {
        get { return this.weight; }
    }
}

然后新建一个GetVehicle.ashx的一般处理程序,这里的作用就是服务器可以接受到客户端的请求，然后通过一些逻辑处理把需要的数据发送回客户端，这也是在通常没有别的框架支持的时候，常用的方法：

<%@ WebHandler Language="C#" Class="GetVehicle" %>

using System;
using System.Web;
using System.Web.Script.Serialization;//提供对内容进行json序列化的类

public class GetVehicle : IHttpHandler 
{
    
    public void ProcessRequest (HttpContext context) 
    {
        context.Response.ContentType = "text/plain";
        //从客户端发送过来的RequestBody里得到信息
        string name = context.Request.Params["name"];
        string fullSpeed = context.Request.Params["fullSpeed"];
        string weight=context.Request.Params["weight"];
        
        Vehicle vehicle = new Vehicle(name, Int32.Parse(fullSpeed), float.Parse(weight));
        //JavaScriptSerializer 类由异步通信层内部使用，用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据
        JavaScriptSerializer jss=new JavaScriptSerializer();
        string jsonVehicle = jss.Serialize(vehicle);
        //输出数据
        context.Response.Write(jsonVehicle);
    }
 
    public bool IsReusable 
    {
        get 
        {
            return false;
        }
    }

}

好了，第一篇文章就到这里，一直想在cnbolgs写一点技术方面的文章，可以迫于没有太多时间，一直没写，最近有些闲暇，又从以前的一些资料里翻出来我们博客园的名人赵劼老师的一些视频教程和我当时照他做的一些示例，说原创不是原创，说照搬也不是，就这样打算再这样在把ASP.NET AJAX写写，因为视频的学习，我个人感觉总是有效率的问题，如果遇到什么问题需要用到这些内容，从视频里找的话真是不容易，所以就半总结的写一些算是蚊帐吧，留做自己的手稿，可能有些不对的地方，希望看到的园友们多批评，我多改正。。。、

小白   2011.10.13