自己动手写AJAX

本文基于.Net Framework 2.0

 

Asp.Net 2.0自带的客户端回调

    Asp.Net 2.0已经发布。2.0有了许多新特性，客户端回调就是其中之一。客户端回调允许我们不经过回发而调用服务器端的方法，与AJAX提供的功能是一致的，但是不如AJAX灵活，AJAX可以自定义调用的方法， 2.0自带的回调功能却不行。

    要使用客户端回调功能必须实现System.Web.UI.IcallbackEventHandler接口。

这个接口包含两个方法：

    //客户端回调时固定调用此方法

public void RaiseCallbackEvent(String eventArgument)

//执行完RaiseCallbackEvent后将调用此方法。此方法的返回值将被发回客户端

public string GetCallbackResult()

    例一：

    .cs：

   String cbReference = Page.ClientScript.GetCallbackEventReference(this,

"arg", "ReceiveServerData", "context");

     String callbackScript;

callbackScript = "function CallServer(arg, context)"

+ "{ " + cbReference + "} ;";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"CallServer",

 callbackScript, true);

   

    javascript：

    <script type="text/javascript">

    function LookUpStock()

    {

        var product = "";

        var lb = document.forms[0].ListBox1;

        if(lb.selectedIndex >= 0)

            product = lb.options[lb.selectedIndex].text;

        CallServer(product, "");

    }   

    function ReceiveServerData(rValue)

    {

        Results.innerText = rValue;

    }

  </script>

 

更多内容查看MSDN: “在 ASP.NET 网页中不经过回发而实现客户端回调“主题

 

AJAX介绍

    AJAX并不是一种新的技术，而是一些已有技术的有机结合，主要包括：XmlHttp、Reflect。

一个AJAX框架基本上包括：一个自定义的HttpHandler、一段JavaScript代码.

 

  AJAX运行机制：

XMLHTTP发送请求

服务器处理请求

返回客户端

客户端通过XmlHttp对象向服务器发送一个Http请求，在服务端自定义的Http处理程序通过客户端发送的信息，使用反射(Reflect)调用指定的方法，且将方法的返回值发回客户端。

以前我们使用XmlHttp实现无刷新页面的时候，是用XmlHttp来请求一个隐藏的页面，使用(Asp/Asp.Net)自带的HttpHandler，而在AJAX中，我们请求的也是一个隐藏的页面，不同的是这个页面的HttpHandler是由我们自己来实现。

 

动手：

 

1．   首先我们要实现一个Http处理程序(HttpHandler)来响应客户端的请求：

实现自定义的HttpHandler需要实现IHttpHandler接口。

该接口包含一个属性和一个方法：

bool IHttpHandler.IsReusable

    void IHttpHandler.ProcessRequest(HttpContext context)

 

例子：

        bool IHttpHandler.IsReusable

        {

            get { return true; }

        }

 

        void IHttpHandler.ProcessRequest(HttpContext context)

        {

            context.Response.Clear();

          //获取要调用的方法

            string methodName =  context.Request.QueryString["me"];

 

           //获取程序集信息。

           //Czhenq.AJAX.Class1.Dencode是自定义的字符串编码方法

string AssemblyName = Czhenq.AJAX.Class1.Dencode(

context.Request.QueryString["as"]);

           //获取方法的参数

            string Arguments = context.Request.QueryString["ar"];
          

           //开始调用方法

            Type type = Type.GetType(AssemblyName);

            MethodInfo method = type.GetMethod(methodName, BindingFlags.NonPublic

 | BindingFlags.Public | BindingFlags.Static |

BindingFlags.Instance);

            if (method != null)

            {

              //参数使用”,”分隔

                string[] args = Arguments.Split(",".ToCharArray());

                ParameterInfo[] paras = method.GetParameters();

                object[] argument = new object[paras.Length];

                for (int i = 0; i < argument.Length; i++)

                {

                    if (i < args.Length)

                    {

                     //因为XmlHttp传递过来的参数全部时String类型，所以必须进行转换

                     //这里只将参数转换为Int32,并不做其他考虑。

                        argument[i] = Convert.ToInt32(args[i]);

                    }

                }

                object value = method.Invoke(Activator.CreateInstance(type,

 true), argument);

                if (value != null)

                    context.Response.Write(value.ToString());

                else

                    context.Response.Write("error");

            }

           //处理结束

            context.Response.End();

     }

 

2．   一段Javascript代码：

function CallMethod(AssemblyName,MethodName,Argus){

       var args = "";

       for(var i=0;i<Argus.length;i++)

            args += Argus[i] + ",";

       if(args.length>0)

        args = args.substr(0,args.length-1);

        var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

        url = "AJAX/AJAX.czhenq?as=" + AssemblyName + "&me=" + MethodName +"&ar="

+ args;

        xmlhttp.open("POST",url,false);

        xmlhttp.send();

        alert(xmlhttp.responseText);

}

 

一个简单的AJAX框架已经实现。现在写段代码来测试.

 

1.新建一个网站，并应用刚才你编写的HttpHandler。并在网站的Web.config中注册你的HttpHandler,说明那些请求将使用你编写的Handler来处理。下面的内容说明:所有以“czq”结尾的请求，都将使用“Czhenq.HttpHandlerFactory”来处理。

    <httpHandlers>

<add verb="POST,GET" path="*.czq" type="Czhenq.HttpHandlerFactory,

         Czhenq.AJAX"/>

    </httpHandlers>

 

2.添加一个web页面，将刚才的脚本拷贝到页面中，并添加一个你要调用的方法。

private string Add(int i, int j)

{

    return TextBox1.Text;

}

 

3.在页面中放置一个HiddenField控件，命名为AssemblyName。 并在Page_Load中添加如下代码：

string assemblyName = Czhenq.AJAX.Class1.Encode(typeof(_Default

).AssemblyQualifiedName);

AssemblyName.Value = assemblyName;

 

4.页面中添加如下脚本：

var assemblyName = document.getElementById(“AssemblyName”)；

var argus = new Array();

argus.push(“100”)；

argus.push(“200“);

CallMethod(assemblyName,”Add”,argus);