初試Ajax.Net ！

    從事了幾年的C/S模式的開發，曾一直無暇研究B/S，前段時間攤上了一個B/S的活，這才開始認真的關注其B/S開發。而且，AJAX技術的風起雲湧，也使得B/S應用的表現力日益增強，大有逐漸吞食C/S領地之勢。這兩天通過《Ajax基礎教程》開始學習Ajax技術，在附錄的Ajax架構介紹中發現了這樣一句話：“利用Ajax.Net，你可以從JavaScript客戶調用.NET方法”。這是我夢寐以求的功能啊，于是迫不及待的開始研究下Ajax.Net，初試的結果令我對Ajax.Net非常滿意：）

        <httpHandlers>

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

        </httpHandlers>

    這個配置項表明所有的ajaxpro/*.ashx請求（即從客戶發送的Ajax請求）都交給AjaxPro.AjaxHandlerFactory處理，而不是由預設的System.Web.UI.PageHandlerFactory來處理。 

    建立的web項目有個預設的_Default頁面，我們為其加上命名空間如MyAjaxNetTest，然後在_Default的HTML第一句也要加上這個名目空間：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="MyAjaxNetTest._Default" %>

    然後在PageLoad中注冊本頁面到AjaxPro中：

        protected void Page_Load(object sender, EventArgs e)

        {

            AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); 

        }

    測試一：

    一切已經準備就緒了，我們先進行第一個測試，從客戶調用服務端的簡單方法。首先在_Default類中添加方法：

         [AjaxPro.AjaxMethod]

        public string GetServerTime()

            return DateTime.Now.ToString();

    客戶現在可以在JS中調用這個方法了，如

       <script type="text/javascript">

       function getTime()

       {         

          alert(MyAjaxNetTest._Default.GetServerTime().value);          

       }

       </script>

    然後你可以加個HTML的button，onclick處理函數設為getTime()。

<input id="Button1" type="button" value="button" onclick="getServerTime()"/>

    測試二：    

    為GetServerTime方法添加static修飾，測試仍然成功!

    測試三： 

    簡單方法調用已經OK了，GetServerTime方法傳回的是一個簡單的string,那麼服務端可不可以傳回稍微複雜一點的對象了？我們來試試。先建立一個Student類：

     public class Student

    {

        public string Name = "sky" ;

        public int     Age = 26;

    }

    服務端添加GetStudent方法：

        [AjaxPro.AjaxMethod]

        public Student GetStudent()

            return new Student();

    對應的，用戶端添加調用：

       function getStudent()

       {

         var stu = MyAjaxNetTest._Default.GetStudent().value ;

         alert(stu.Name + " " + stu.Age) ;

    依照前面的加個HTML按鈕測試getStudent函數，答案是，一切照我們預料的進行，客戶js可以通路服務端傳回的對象。

    測試四：

    最後看看能夠在用戶端送出對象給伺服器，先在服務端添加方法：

1         private Student student = null;

2         [AjaxPro.AjaxMethod]

3         public void SetStudent(Student stu)

4         {

5             this.student = stu;

6             string name = this.student.Name;

7         }

    可以在第六行添加斷點，然後當用戶端調用時，會進入該斷點。

    用戶端添加調用：

     function putStudent()

            var stu = MyAjaxNetTest._Default.GetStudent().value ;

            stu.Name = "chenqi" ;

            MyDemo._Default.SetStudent(stu) ;

    同樣，當調用putStudent這個js方法時，服務端進入斷點已經表明客戶成功的送出了對象，并且對象的Name字段已經改變為“chenqi”了。

    測試五：

    前面客戶設定的都是Student的public字段，那麼通路屬性如何了？我們将Student定義更改如下：

     public class Student

        private string name = "sky" ;

        public int Age = 26;

        public string Name

            get

            {

                return this.name;

            }

            set

                this.name = value;

    }

    再重複前面的測試，結果我想已經在你的料想中了。

    單從前面的幾個小測試，我已經發現了使用Ajax.Net的友善與迅捷，看來B/S開發不再像我以前感受的那樣繁瑣了。

備忘錄：Ajax基礎

（1）建立XmlHttpRequest對象

            var xmlHttp ;

            function createXMLHttpRequest()

                if(window.ActiveXObject)

                {

                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;

                }

                else if(window.XMLHttpRequest)

                    xmlHttp = new XMLHttpRequest() ;

                }                

（2）POST Ajax請求

            function startRequest()

                createXMLHttpRequest() ;

                xmlHttp.onreadystatechange = handleStateChangeComplex ;

                xmlHttp.open("POST" ,"WebForm1.aspx?timeStamp="+ new Date().getTime(),true) ;

                xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded") ;

                xmlHttp.send("ID=中國123") ;

            }        

    服務端可以通過QueryString擷取xmlHttp.send方法傳遞的參數。

（3）處理異步結果

            function handleStateChangeComplex()

                if(xmlHttp.readyState == 4)

                    if(xmlHttp.status == 200)

                    {

                        document.getElementById("results").innerText = xmlHttp.responseText ;

                    }

備忘錄：為何Ajax能如此風行？

    最主要的原因是它能極大提高Web頁面的表現力，進而極大地改善最終使用者體驗。其底層技術就是Ajax擁有異步局部重新整理的能力，這個能力源于兩點：

（1）任何一個HTML page都是一個樹狀的DOM文檔，而JavaScript能夠操縱Dom文檔，包括添加、删除、修改任一節點＝》局部重新整理。

（2）JavaScript可以通過XmlHttpRequest對象與伺服器進行通信（GET/POST）。

（3）能異步擷取服務端傳回的結果。