初试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）能异步获取服务端返回的结果。