ASP.NET AJAX（1）Microsoft AJAX LibraryASP.NET AJAX（1）Microsoft AJAX Library

阿新 • • 發佈：2022-05-03

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>

這樣，我們就生成了兩個客戶端類的例項，並分別呼叫了他們的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寫寫，因為視訊的學習，我個人感覺總是有效率的問題，如果遇到什麼問題需要用到這些內容，從視訊裡找的話真是不容易，所以就半總結的寫一些算是蚊帳吧，留做自己的手稿，可能有些不對的地方，希望看到的園友們多批評，我多改正。。。、