当前位置：Gxlcms > AJAX > 编写轻量ajax组件01-与webform平台上的各种实现方式比较

编写轻量ajax组件01-与webform平台上的各种实现方式比较

时间：2021-07-01 10:21:17 帮助过：34人阅读

前言

　　Asp.net WebForm 和 Asp.net MVC（简称MVC） 都是基于Asp.net的web开发框架，两者有很大的区别，其中一个就是MVC更加注重http本质，而WebForm试图屏蔽http，为此提供了大量的服务器控件和ViewState机制，让开发人员可以像开发Windows Form应用程序一样，基于事件模型去编程。两者各有优缺点和适用情景，但MVC现在是许多Asp.net开发者的首选。

　　WebForm是建立在Asp.net的基础上的，Asp.net提供了足够的扩展性，我们也可以利用这些在WebForm下编写像MVC一样的框架，这个有机会再写。说到WebForm很多人就会联想到服务器控件（拖控件！！！），其实不然，我们也可以完全不使用服务器控件，像MVC那样关注html。WebForm要抛弃服务器控件，集中关注html，首先就要将<form runat="server"></form>标签去掉，这个runat server 的form 是其PostBack机制的基础。既然我们要回归到html+css+js，那么意味着许多东西都要自己实现，例如处理Ajax请求。不像MVC那样，WebForm开始的设计就将服务器控件作为主要组成部分，如果不使用它，那么只能利用它的扩展性去实现。

　　本系列就是实现一个基于WebForm平台的轻量级ajax组件，主要分为三个部分：

　　1. 介绍WebForm下各种实现方式。

　　2. 分析ajaxpro组件。

　　3. 编写自己的ajax组件。

一、Ajax简介

　　异步允许我们在不刷新整个页面的情况下，像服务器请求或提交数据。对于复杂的页面，为了请求一点数据而重载整个页面显然是很低效的，ajax就是为了解决这个问题的。ajax的核心是XmlHttpRequest对象，通过该对象，以文本的形式向服务器提交请求。XmlHttpRequest2.0后，还支持提交二进制数据。

　　ajax安全：出于安全考虑，ajax受同源策略限制；也就是只能访问同一个域、同一个端口的请求，跨域请求会被拒绝。当然有时候需求需要跨域发送请求，常用的跨域处理方法有CORS(跨域资源共享)和JSONP(参数式JSON)。

　　ajax数据交互格式：虽然Ajax核心对象XmlHttpRequest有"XML"字眼，但客户端与服务器数据交换格式不局限于xml，例如现在更多是使用json格式。　　

　　ajax 也是有缺点的。例如对搜索引擎的支持不太好；有时候也会违背url资源定位的初衷。

二、Asp.net MVC 平台下使用ajax

　　在MVC里，ajax调用后台方法非常方便，只需要指定Action的名称即可。

　　前台代码：

  1. <body>
  2.   <h1>index</h1>
  3.   <input type="button" value="GetData" onclick="getData()" />
  4.   <span id="result"></span>
  5. </body>
  6. <script type="text/javascript">
  7.   function getData() {
  8.     $.get("GetData", function (data) {
  9.       $("#result").text(data);
  10.     });
  11.   }
  12. </script>

　　后台代码：

  1. public class AjaxController : Controller
  2. {
  3.   public ActionResult GetData()
  4.   {
  5.     if(Request.IsAjaxRequest())
  6.     {
  7.       return Content("data");
  8.     }
  9.     return View();
  10.   }
  11. }

三、WebForm 平台下使用ajax

　　3.1 基于服务器控件包或者第三方组件

　　这是基于服务器控件的，例如ajax toolkit工具包，或者像FineUI这样的组件。web前端始终是由html+css+js组成的，只不过如何去生成的问题。原生的我们可以自己编写，或者用一些前端插件；基于服务器控件的，都是在后台生成的，通常效率也低一点。服务器组件会在前台生成一系列代理，本质还是一样的，只不过控件封装了这个过程，不需要我们自己编写。基于控件或者第三方组件的模式，在一些管理系统还是挺有用的，访问量不是很大，可以快速开发。

　　3.2 基于ICallbackEventHandler接口

　　.net 提供了ICallbackEventHandler接口，用于处理回调请求。该接口需要用ClientScriptManager在前台生成代理脚本，用于发送和接收请求，所以需要<form runat="server">标签。

　　前台代码：

  1. <body>
  2.   <form id="form1" runat="server">
  3.   <div>    
  4.     <input type="button" value="获取回调结果" onclick="callServer()" />
  5.     <span id="result" style="color:Red;"></span>
  6.   </div>
  7.   </form>
  8. </body>
  9. <script type="text/javascript">
  10.   function getCallbackResult(result){
  11.     document.getElementById("result").innerHTML = result;
  12.   }
  13. </script>

　　后台代码：

  1. public partial class Test1 : System.Web.UI.Page, ICallbackEventHandler
  2. {    
  3.   protected void Page_Load(object sender, EventArgs e)
  4.   {
  5.     //客户端脚本Manager
  6.     ClientScriptManager scriptMgr = this.ClientScript;
  7.  
  8.     //获取回调函数，getCallbackResult就是回调函数
  9.     string functionName = scriptMgr.GetCallbackEventReference(this, "", "getCallbackResult", "");
  10.  
  11.     //发起请求的脚本，callServer就是点击按钮事件的执行函数
  12.     string scriptExecutor = "function callServer(){" + functionName + ";}";
  13.  
  14.     //注册脚本
  15.     scriptMgr.RegisterClientScriptBlock(this.GetType(), "callServer", scriptExecutor, true);
  16.   }
  17.  
  18.   //接口方法
  19.   public string GetCallbackResult()
  20.   {
  21.     return "callback result";
  22.   }
  23.  
  24.   //接口方法
  25.   public void RaiseCallbackEvent(string eventArgument)
  26.   {
  27.   }
  28. }

　　这种方式有以下缺点：

　　1. 实现起来较复杂，每个页面Load事件都要去注册相应的脚本。

　　2. 前台会生成一个用于代理的脚本文件。

　　3. 对于页面交互复杂的，实现起来非常麻烦。

　　4. 虽然是回调，但是此时页面对象还是生成了。

　　3.3 使用一般处理程序

　　一般处理程序其实是一个实现了IHttpHandler接口类，与页面类一样，它也可以用于处理请求。一般处理程序通常不用于生成html，也没有复杂的事件机制，只有一个ProcessRequest入口用于处理请求。我们可以将ajax请求地址写成.ashx文件的路径，这样就可以处理了，而且效率比较高。

　　要输出文本内容只需要Response.Write(data)即可，例如，从数据库获取数据后，序列化为json格式字符串，然后输出。前面说到，一般处理程序不像页面一样原来生成html，如果要生成html，可以通过加载用户控件生成。如：

  1. public void ProcessRequest(HttpContext context)
  2. {
  3.   Page page = new Page();
  4.   Control control = page.LoadControl("~/PageOrAshx/UserInfo.ascx");
  5.   if (control != null)
  6.   {
  7.     StringWriter sw = new StringWriter();
  8.     HtmlTextWriter writer = new HtmlTextWriter(sw);
  9.     control.RenderControl(writer);
  10.     string html = sw.ToString();
  11.     context.Response.Write(html);        
  12.   }
  13. }

　　这种方式的优点是轻量、高效；缺点是对于交互多的需要定义许多ashx文件，加大了管理和维护成本。

　　3.4 页面基类

　　将处理ajax请求的方法定义在页面对象内，这样每个页面就可以专注处理本页面相关的请求了。这里有点需要注意。

　　1.如何知道这个请求是ajax请求？

　　　　通过请求X-Requested-With:XMLHttlRequest 可以判断，大部份浏览器的异步请求都会包含这个请求头；也可以通过自定义请求头实现，例如：AjaxFlag:XHR。

　　2.在哪里统一处理？

　　　　如果在每个页面类里判断和调用是很麻烦的，所以将这个处理过程转到一个页面基类里处理。

　　3.如何知道调用的是哪个方法？

　　　　通过传参或者定义在请求头都可以，例如：MethodName:GetData。

　　4.知道方法名称了，如何动态调用？

　　　　反射。

　　5.如何知道该方法可以被外部调用？

　　　　可以认为public类型的就可以被外部调用，也可以通过标记属性标记。

　　通过上面的分析，简单实现如下　　

　　页面基类：

  1. public class PageBase : Page
  2. {
  3.   public override void ProcessRequest(HttpContext context)
  4.   {
  5.     HttpRequest request = context.Request;
  6.     if (string.Compare(request.Headers["AjaxFlag"],"AjaxFlag",0) == 0)
  7.     {
  8.       string methodName = request.Headers["MethodName"];
  9.       if (string.IsNullOrEmpty(methodName))
  10.       {
  11.         EndRequest("MethodName标记不能为空！");
  12.       }
  13.       Type type = this.GetType().BaseType;
  14.       MethodInfo info = type.GetMethod(methodName, BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static);
  15.       if (info == null)
  16.       {
  17.         EndRequest("找不到合适的方法调用！");
  18.       }        
  19.       string data = info.Invoke(this, null) as string;
  20.       EndRequest(data);
  21.     }
  22.     base.ProcessRequest(context);
  23.   }
  24.   private void EndRequest(string msg)
  25.   {
  26.     HttpResponse response = this.Context.Response;
  27.     response.Write(msg);
  28.     response.End();
  29.   }
  30. }

　　页面类：

  1. public partial class Test1 : PageBase
  2. {
  3.   protected void Page_Load(object sender, EventArgs e)
  4.   {
  5.   }
  6.   public string GetData()
  7.   {
  8.     return "213";
  9.   }
  10. }

　　前台代码：

  1. function getData(){
  2.   $.ajax({
  3.     headers:{"AjaxFlag":"XHR","MethodName":"GetData"},
  4.     success:function(data){
  5.       $("#result").text(data);
  6.     }
  7.   });
  8. }

四、优化版页面基类

　　上面的页面基类功能很少，而且通过反射这样调用的效率很低。这里优化一下：

　　1.可以支持简单类型的参数。

　　　　例如上面的GetData可以是：GetData(string name)，通过函数元数据可以获取相关的参数，再根据请求的参数，就可以设置参数了。

　　2.加入标记属性。

　　　　只有被AjaxMethodAttribute标记的属性才能被外部调用。

　　3.优化反射。

　　　　利用缓存，避免每次都根据函数名称去搜索函数信息。

　　标记属性：

  1. public class AjaxMethodAttribute : Attribute
  2. {
  3. }

　　缓存对象：　　

  1. public class CacheMethodInfo
  2. {
  3.   public string MethodName { get; set; }
  4.   public MethodInfo MethodInfo { get; set; }
  5.   public ParameterInfo[] Parameters { get; set; }
  6. }

　　基类代码：

  1. public class PageBase : Page
  2. {
  3.   private static Hashtable _ajaxTable = Hashtable.Synchronized(new Hashtable());
  4.   public override void ProcessRequest(HttpContext context)
  5.   {      
  6.     HttpRequest request = context.Request;
  7.     if (string.Compare(request.Headers["AjaxFlag"],"XHR",true) == 0)
  8.     {
  9.       InvokeMethod(request.Headers["MethodName"]);
  10.     }
  11.     base.ProcessRequest(context);
  12.   }
  13.   /// <summary>
  14.   /// 反射执行函数
  15.   /// </summary>
  16.   /// <param name="methodName"></param>
  17.   private void InvokeMethod(string methodName)
  18.   {
  19.     if (string.IsNullOrEmpty(methodName))
  20.     {
  21.       EndRequest("MethodName标记不能为空！");
  22.     }
  23.     CacheMethodInfo targetInfo = TryGetMethodInfo(methodName);
  24.     if (targetInfo == null)
  25.     {
  26.       EndRequest("找不到合适的方法调用！");
  27.     }
  28.     try
  29.     {
  30.       object[] parameters = GetParameters(targetInfo.Parameters);
  31.       string data = targetInfo.MethodInfo.Invoke(this, parameters) as string;
  32.       EndRequest(data);
  33.     }
  34.     catch (FormatException)
  35.     {
  36.       EndRequest("参数类型匹配发生错误！");
  37.     }
  38.     catch (InvalidCastException)
  39.     {
  40.       EndRequest("参数类型转换发生错误！");
  41.     }
  42.     catch (ThreadAbortException)
  43.     {
  44.     }
  45.     catch (Exception e)
  46.     {
  47.       EndRequest(e.Message);
  48.     }
  49.   }
  50.   /// <summary>
  51.   /// 获取函数元数据并缓存
  52.   /// </summary>
  53.   /// <param name="methodName"></param>
  54.   /// <returns></returns>
  55.   private CacheMethodInfo TryGetMethodInfo(string methodName)
  56.   {
  57.     Type type = this.GetType().BaseType;
  58.     string cacheKey = type.AssemblyQualifiedName;
  59.     Dictionary<string, CacheMethodInfo> dic = _ajaxTable[cacheKey] as Dictionary<string, CacheMethodInfo>;
  60.     if (dic == null)
  61.     {
  62.       dic = new Dictionary<string, CacheMethodInfo>();
  63.       MethodInfo[] methodInfos = (from m in type.GetMethods(BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static)
  64.                     let ma = m.GetCustomAttributes(typeof(AjaxMethodAttribute), false)
  65.                     where ma.Length > 0
  66.                     select m).ToArray();
  67.       foreach (var mi in methodInfos)
  68.       {
  69.         CacheMethodInfo cacheInfo = new CacheMethodInfo();
  70.         cacheInfo.MethodName = mi.Name;
  71.         cacheInfo.MethodInfo = mi;
  72.         cacheInfo.Parameters = mi.GetParameters();
  73.         dic.Add(mi.Name, cacheInfo);
  74.       }
  75.       _ajaxTable.Add(cacheKey, dic);
  76.     }
  77.     CacheMethodInfo targetInfo = null;
  78.     dic.TryGetValue(methodName, out targetInfo);
  79.     return targetInfo;
  80.   }
  81.   /// <summary>
  82.   /// 获取函数参数
  83.   /// </summary>
  84.   /// <param name="parameterInfos"></param>
  85.   /// <returns></returns>
  86.   private object[] GetParameters(ParameterInfo[] parameterInfos)
  87.   {
  88.     if (parameterInfos == null || parameterInfos.Length <= 0)
  89.     {
  90.       return null;
  91.     }
  92.     HttpRequest request = this.Context.Request;
  93.     NameValueCollection nvc = null;
  94.     string requestType = request.RequestType;
  95.     if (string.Compare("GET", requestType, true) == 0)
  96.     {
  97.       nvc = request.QueryString;
  98.     }
  99.     else
  100.     {
  101.       nvc = request.Form;
  102.     }
  103.     int length = parameterInfos.Length;
  104.     object[] parameters = new object[length];
  105.     if (nvc == null || nvc.Count <= 0)
  106.     {
  107.       return parameters;
  108.     }
  109.     for (int i = 0; i < length; i++)
  110.     {
  111.       ParameterInfo pi = parameterInfos[i];
  112.       string[] values = nvc.GetValues(pi.Name);
  113.       object value = null;
  114.       if (values != null)
  115.       {
  116.         if (values.Length > 1)
  117.         {
  118.           value = String.Join(",", values);
  119.         }
  120.         else
  121.         {
  122.           value = values[0];
  123.         }
  124.       }
  125.       if (value == null)
  126.       {
  127.         continue;
  128.       }
  129.       parameters[i] = Convert.ChangeType(value, pi.ParameterType);
  130.     }      
  131.     return parameters;
  132.   }
  133.   private void EndRequest(string msg)
  134.   {
  135.     HttpResponse response = this.Context.Response;
  136.     response.Write(msg);
  137.     response.End();
  138.   }
  139. }

　　页面类：

  1. public string GetData3(int i, double d, string str)
  2. {
  3.   string[] datas = new string[] { i.ToString(), d.ToString(), str };
  4.   return "参数分别是：" + String.Join(",", datas);
  5. }

　　前台代码：

  1. function getData3(){
  2.   $.ajax({
  3.     headers:{"AjaxFlag":"XHR","MethodName":"GetData3"},
  4.     data:{"i":1,"d":"10.1a","str":"hehe"},
  5.     success:function(data){
  6.       $("#result").text(data);
  7.     }
  8.   });
  9. }

五、总结

　　上面的页面基类已经具备可以完成基本的功能，但它还不够好。主要有：

　　1. 依附在页面基类。对于本来有页面基类的，无疑会变得更加复杂。我们希望把它独立开来，变成一个单独的组件。

　　2. 效率问题。反射的效率是很低的，尤其在web这类应用程序上，更应该慎用。以动态执行函数为例，效率主要低在：a.根据字符串动态查找函数的过程。b.执行函数时，反射内部需要将参数打包成一个数组，再将参数解析到线程栈上；在调用前CLR还要检测参数的正确性，再判断有没有权限执行。上面的优化其实只优化了一半，也就是优化了查找的过程，而Invoke同样会有性能损失。当然，随着.net版本越高，反射的效率也会有所提升，但这种动态的东西，始终是用效率换取灵活性的。

　　3.不能支持复杂参数。有时候参数比较多，函数参数一般会封装成一个对象类型。

　　4. AjaxMethodAttribute只是一个空的标记属性。我们可以为它加入一些功能，例如，标记函数的名称、是否使用Session、缓存设置等都可以再这里完成。

　　用过WebForm的朋友可能会提到AjaxPro组件，这是一个开源的组件，下一篇就通过源码了解这个组件，借鉴它的处理过程，并且分析它的优缺点。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！