[ASP.NET]輕薄好用的AJAX framework-AjaxPro

這兩年Ajax的概念日夯,一大堆Ajax的framework陸續推出,其中較有名的大概就是ASP.NET Ajax了,不過這個framework相信大家都很熟悉了,我想我也不多做討論,今天要談的是一個third-party的免費Ajax framework-AjaxPro

在五年前我們想使用Ajax時,大概就是用最傳統的方法,如下;

1 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
2 xmlhttp.Open('POST', strURL, false);
3 xmlhttp.Send(str);

這個傳統的寫法是使用ActiveXObject對目標網頁送出請求,同時將所需的參數傳遞過去,而彼此之間需要透過XML的資料格式來溝通,傳遞過去的資料(上述的str)需要是XML格式,而回傳回來的格式也是XML,因此使用時需要去解析XML,但在過去Ajax沒有那麼紅的年代,這個做法已經很好了。

這兩年Ajax的概念日夯,一大堆Ajax的framework陸續推出,其中較有名的大概就是ASP.NET Ajax了,不過這個framework相信大家都很熟悉了,我想我也不多做討論,今天要談的是一個third-party的免費Ajax framework-AjaxPro,下面是他的網站:

http://www.ajaxpro.info/

這個framework的好處是輕薄,不需要安裝其他額外的程式,只要參考他的dll檔就好了,下面我描述一下怎麼使用這個Ajax framework:

Step1:註冊httphandler

在web.config的<System.web>中加入以下設定:

1 <httpHandlers>
2     <add verb="POST,GET" path="ajaxpro/*.ashx"  type = "AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
3 </httpHandlers>

Step2:註冊要使用Ajax的Class

在Page_Load中加入下面這行,用來註冊要使用Ajax的Class:

1         protected void Page_Load(object sender, EventArgs e)
2         {
3             AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
4         }

Step3:撰寫Ajax的後端fucntion

在要使用Ajax的網頁中加入要讓javascript呼叫的function,這邊要注意的是,function一定要宣告成public,如果要在這個function中使用Session,一定要加上第1行那個屬性註冊:

1         [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
2         public string getServerTime()
3         {
4             return DateTime.Now.ToString("s");
5         }

Step4:撰寫Ajax的前端fucntion

最後撰寫前端用來呼叫後端function的程式,在呼叫後端的function要特別注意兩點,

1.一定要加上class一定要加上namespace

2.呼叫的方法為namespace.class.function

3.最後一定要加上.value來取得回傳的值

1     function getServerTime()
2     {
3         alert("client time:"+new Date());
4         alert("server time:"+AJAXTest._Default.getServerTime().value);
5     }

我以上的範例是分別取得client端的時間與server端的時間。

原則上只要依以上的做法就可以得到Ajax的效果,不過看起來沒有比ASP.NET Ajax來的便利的樣子,我想要比方便使用的話,AjaxPro這個framework可能比不上ASP.NET Ajax只要拉一個ScriptManager+UpdatePanel就可以那麼方便,不過他的好處有二:

1.輕薄,不用無外安裝其他程式

2.在.net framework 1.1的環境也能使用

除了以上的優點之外,他還有一個特點就是PageMethods的呼叫方式,採用類似ASP.NET Ajax的PageMethods的方式,當呼叫後端的程式時只會執行所呼叫的function,而不會將整個頁面的生命週期跑過一次,您使用UpdatePanel時,預設的模式就是Full Page的Ajax postback,而傳統的ActiveXObject也是一樣的,因此當我們只是想要執行某個單一fucntion時,建議還是透過AjaxPro或者ASP.NET Ajax的PageMethods,千萬不要為了貪圖方便而不學PageMethods。

已上大致是AjaxPro的基本介紹,當初會使用這個方法最主要是因為.net2.0尚未成熟,且ASP.NET Ajax的架構也還沒有穩定,因此先找AjaxPro來使用,用習慣後反而也不常用ASP.NET Ajax的PageMethods了,呵呵。

游舒帆 (gipi)

探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。