应用HttpHandler， Json， JQuery， ASP.Net UserControl等技术处理 Ajax 的解决方案

HttpHandler， Json， JQuery， ASP.Net UserControl各部分相应的作用如下，

• HttpHandler：相应客户请求，并通过调用service返回相应数据。
• Json：用来传输简单数据的数据格式。
• JQuery：通过JQuery的API调用Ajax，修改页面数据、样式等。
• UserControl：生成复杂的html数据，并回传给客户端。

一、页面请求部分

页面请求部分通过JQuery的Ajax API向HttpHandler发出request，有post和get两种方式。

JQuery调用的简单代码如下

 

var  showData  =   function () {
var  httpHandler  =   " httphandler.ashx " ;    //  request URL
var  params  =  {  " name " :  " test "  };         //  parameters
var  type  =   " json " ;                       //  type, "xml", "html", "script", "json", "jsonp",  "text".
var  callBack  =   function (data, status) {  //  call back function
      alert(data.toString());
}

$.get(httpHandler, params, callBack,  " json " );

 

自己写的一个小工具函数，类似于c#的String.format();

       var  formatString  =   function (inputStr, parameters) {

             for  ( var  i  =   0 ; i  <  parameters.length; i ++ ) {
                inputStr  =  inputStr.replace( " { "   +  i  +   " } " , parameters[i]);
            }
             return  inputStr;
        }

这样就可以简单的封装请求，

var  httpHandler  =   formatString(  " httphandler.ashx?name={0} " ,[ " test " ]);

 

二、HttpHandler响应

HttpHandler用来响应browser发送的request，它通过params接收request请求的参数，然后调用相应的service处理请求，最终返回数据给客户端。

对于如何调用service的方法，我是通过反射的方式去实现的，当然，反射势必会影响一定的效率，这里也可以考虑用Emit实现。

            string name = context.Request.Params["name"];                   // request params, just like id and name etc.

             string  type  =  context.Request.Params[ " type " ];                    //  which type to response
             string  methodName  =  context.Request.Params[ " methodName " ];        //  get the method name to invoke

            Service service  =   new  Service();
             object  obj  =  service.GetType().InvokeMember(
                                            methodName,
                                            System.Reflection.BindingFlags.InvokeMethod,
                                             null ,
                                            service,
                                             new   object []  { name }                         // here it the method parameters
                                            );

Service返回的数据，若回传到客户端之后，根据客户端生成html的难度一般可以将回传数据分为两种形式，

• 将service返回的实体或者DataTable生成Json，然后输出到客户端
• 先通过UserControl直接生成Html，然后输出到客户端（这种方式有可以充分利用UserControl的优势，可视化编辑和WebForm的服务器端控件）

两种形式都比较简单，生成Json可以使用Json.net，它提供了将实体类和DataTable直接序列化成Json的方式。

至于通过UserControl生成Html，可以用以下代码实现，

      public   class  ViewManager < T >  where T : UserControl
       {
        private Page pageHolder;

        public T LoadUserControl(string path)
        {
            this.pageHolder = new Page();
            return (T)this.pageHolder.LoadControl(path);
        }

        public string RenderView(T control)
        {
            StringWriter writter = new StringWriter();

            this.pageHolder.Controls.Add(control);

            HttpContext.Current.Server.Execute(this.pageHolder, writter, false);

            return writter.ToString();
        }
    }

HttpHandler 中将UserControl生成的html输出到客户端的代码如下，

            ViewManager<UserControl> manager = new ViewManager<UserControl>();

            UserControl control  =  manager.LoadUserControl( " ~/Controls/UserControl.ascx " );

            context.Response.ContentType  =   " text/plain " ;
            context.Response.Write(manager.RenderView(control));

如果，你对如何通过UserControl生成Html代码感兴趣的话，可以查看老赵的这篇文章，http://www.cnblogs.com/JeffreyZhao/archive/2008/07/14/1241979.html

 

三、编写callback函数处理HttpHandler回传的数据

数据回传到客户端之后，可以通过回调函数处理HttpHandler回传的数据，然后将该数据生成的html代码加载到页面上。

回调函数就是第一部分中的编写的callback函数。

      var callBack  =  function(data, status)  { // call back function
                alert(data.toString());
            }

假设页面有如下代码，而回传的数据是html代码的话

< div id = " test " > </ div >

则我们可以编写如下JavaScript，用来增加div中的内容。

       var callBack = function(data, status) { // call back function

                $( " #test " ).html(data);
            }

如果回传数据是json，而我们想通过该json生成table的话，也可以写一个通用的函数，专门用来生成table的html，然后将该table的html加载到页面上。

    var  writeTable  =   function (jsonData) {
     if  (jsonData.length  >   0 ) {
         var  content  =   " <table cellpadding=\ " 5 \ "  cellspacing=\ " 0 \ " ><thead class=\ " thead\ " ><tr> " ;

         for  ( var  key  in  jsonData[ 0 ])
        { content  +=   " <td> "   +  key  +   " </td> " ; }

        content  +=   " </thead><tbody></tr> " ;

        $.each(jsonData,  function (i) {
            content  +=   " <tr> " ;
             for  ( var  key  in  jsonData[i]) {
                content  +=   " <td> "   +  jsonData[i][key]  +   " </td> "
            }
            content  +=   " </tr> " ;
        });

        content  +=   " </tbody> " ;
        content  +=   " </table> " ;
         return  content;
    }
}

上面就是一次完整的调用过程。

四、总结

相对于asp.net ajax的方式，通过这样的方式作为Ajax的解决方案，个人认为有以下优点：

• 控制性，相对于封装好的asp.net ajax的update panel，这样的方式无疑更容易控制。
• 灵活性，想什么时候ajax就什么时候ajax。
• 性能，这种方式带来的性能还是有一定的提升的。

缺点也很明显，

• 开发的难度增加了。
• 抛弃了相对来说比较完整的WebForm模型，而只是将WebForm单纯的作为模板来用。