您现在的位置: 365建站网 > 365学习 > 应用HttpHandler, Json, JQuery, ASP.Net UserControl等技术处理 Ajax 的

应用HttpHandler, Json, JQuery, ASP.Net UserControl等技术处理 Ajax 的

文章来源:365jz.com     点击数:1307    更新时间:2009-09-15 10:03   参与评论
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单纯的作为模板来用。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1307人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------