Heim >Web-Frontend >js-Tutorial >Schreiben leichter Ajax-Komponenten 01 – Vergleich mit verschiedenen Implementierungsmethoden auf der Webform-Plattform

Schreiben leichter Ajax-Komponenten 01 – Vergleich mit verschiedenen Implementierungsmethoden auf der Webform-Plattform

亚连Original: 2018-05-24 14:57:191408Durchsuche

In diesem Artikel wird hauptsächlich das Schreiben der leichten Ajax-Komponente 01 im Vergleich zu verschiedenen Implementierungsmethoden auf der Webform-Plattform vorgestellt

Vorwort

Asp .net WebForm und Asp.net MVC (kurz MVC) sind beide Webentwicklungs-Frameworks, die auf Asp.net basieren. Einer von ihnen ist, dass MVC dem Wesen von http mehr Aufmerksamkeit schenkt, während WebForm es versucht um http abzuschirmen. Dies bietet eine große Anzahl von Serversteuerelementen und ViewState-Mechanismen, die es Entwicklern ermöglichen, auf der Grundlage des Ereignismodells zu programmieren, beispielsweise bei der Entwicklung von Windows Form-Anwendungen. Beide haben ihre eigenen Vor- und Nachteile und anwendbaren Szenarien, aber MVC ist mittlerweile für viele Asp.net-Entwickler die erste Wahl.

WebForm basiert auf Asp.net. Asp.net bietet eine ausreichende Skalierbarkeit. Wir können diese auch zum Schreiben von MVC-ähnlichen Frameworks unter WebForm verwenden. Wenn es um WebForm geht, denken viele Leute an Serversteuerelemente (Drag-Steuerelemente!!!). Wir können auch überhaupt keine Serversteuerelemente verwenden und uns auf HTML konzentrieren. Wenn WebForm auf Serverkontrollen verzichten und sich auf HTML konzentrieren möchte, muss es zunächst das Tag eeccb6136e354f5b68d1005749ca3ca9 entfernen. Dieses Runat-Server-Formular ist die Grundlage seines PostBack-Mechanismus. Da wir zu HTML + CSS + JS zurückkehren, bedeutet dies, dass viele Dinge selbst implementiert werden müssen, beispielsweise die Verarbeitung von Ajax-Anfragen. Im Gegensatz zu MVC verwendet das ursprüngliche Design von WebForm Serversteuerelemente als Hauptkomponente. Wenn Sie es nicht verwenden, können Sie es nur mithilfe seiner Erweiterbarkeit erreichen.

　Diese Serie dient der Implementierung einer leichten Ajax-Komponente basierend auf der WebForm-Plattform, die hauptsächlich in drei Teile unterteilt ist:

　1. Einführung verschiedener Implementierungsmethoden unter WebForm.

　2. Ajaxpro-Komponenten analysieren.

　3. Schreiben Sie Ihre eigene Ajax-Komponente.

1. Einführung in Ajax

Asynchron ermöglicht uns das Anfordern oder Senden von Daten an den Server, ohne die gesamte Seite zu aktualisieren. Bei komplexen Seiten ist es offensichtlich ineffizient, die gesamte Seite neu zu laden, nur um ein paar Daten anzufordern. Ajax wurde entwickelt, um dieses Problem zu lösen. Der Kern von Ajax ist das XmlHttpRequest-Objekt, über das Anforderungen in Textform an den Server gesendet werden. Nach XmlHttpRequest2.0 wird auch die Übermittlung von Binärdaten unterstützt.

Ajax-Sicherheit: Aus Sicherheitsgründen ist Ajax durch die Same-Origin-Richtlinie eingeschränkt, das heißt, es kann nur auf Anfragen von derselben Domäne und demselben Port zugreifen und domänenübergreifende Anfragen werden abgelehnt. Natürlich erfordern Anforderungen manchmal das Senden von Anforderungen über Domänen hinweg. Zu den häufig verwendeten domänenübergreifenden Verarbeitungsmethoden gehören CORS (Cross-Domain Resource Sharing) und JSONP (parametrisches JSON).

Ajax-Dateninteraktionsformat: Obwohl das Ajax-Kernobjekt XmlHttpRequest das Wort „XML“ hat, ist das Datenaustauschformat zwischen dem Client und dem Server nicht auf XML beschränkt. Beispielsweise wird jetzt häufiger das JSON-Format verwendet .

Ajax hat auch Mängel. Beispielsweise ist die Unterstützung für Suchmaschinen nicht sehr gut; manchmal verstößt sie gegen die ursprüngliche Absicht der URL-Ressourcenpositionierung.

2. Verwendung von Ajax unter der Asp.net MVC-Plattform

In MVC ist es für Ajax sehr praktisch, Hintergrundmethoden aufzurufen Sie müssen nur die Aktion angeben.

Frontend-Code:

<body>
  <h1>index</h1>
  <input type="button" value="GetData" onclick="getData()" />
  <span id="result"></span>
</body>
<script type="text/javascript">
  function getData() {
    $.get("GetData", function (data) {
      $("#result").text(data);
    });
  }
</script>

Backend-Code:

public class AjaxController : Controller
{
  public ActionResult GetData()
  {
    if(Request.IsAjaxRequest())
    {
      return Content("data");
    }
    return View();
  }
}

3. Verwendung von Ajax unter der WebForm-Plattform

　3.1 Basierend auf Serversteuerungspaketen oder Komponenten von Drittanbietern

Dies basiert auf Server-Steuerelementen wie dem Ajax-Toolkit oder Komponenten wie FineUI. Das Web-Frontend besteht immer aus HTML+CSS+JS, aber die Frage ist, wie man es generiert. Wir können die nativen Plug-Ins selbst schreiben oder einige Front-End-Plug-Ins verwenden; diejenigen, die auf Server-Steuerelementen basieren, werden im Hintergrund generiert und sind normalerweise weniger effizient. Die Serverkomponente generiert im Vordergrund eine Reihe von Proxys. Das Wesentliche ist immer noch dasselbe, aber die Steuerung kapselt diesen Prozess und erfordert nicht, dass wir ihn selbst schreiben. Das auf Steuerungen oder Komponenten von Drittanbietern basierende Modell ist in einigen Managementsystemen recht nützlich. Die Anzahl der Besuche ist nicht sehr groß und kann schnell entwickelt werden.

　3.2 Basierend auf der ICallbackEventHandler-Schnittstelle

　.net stellt die ICallbackEventHandler-Schnittstelle zur Verarbeitung von Rückrufanfragen bereit. Diese Schnittstelle muss ClientScriptManager verwenden, um im Vordergrund Proxy-Skripte zum Senden und Empfangen von Anforderungen zu generieren. Daher ist das Tag 9da45565527026e0988f6215b7b6a235 erforderlich.

Frontend-Code:

<body>
  <form id="form1" runat="server">
  <p>    
    <input type="button" value="获取回调结果" onclick="callServer()" />
    <span id="result" style="color:Red;"></span>
  </p>
  </form>
</body>
<script type="text/javascript">
  function getCallbackResult(result){
    document.getElementById("result").innerHTML = result;
  }
</script>

Backend-Code:

public partial class Test1 : System.Web.UI.Page, ICallbackEventHandler
{    
  protected void Page_Load(object sender, EventArgs e)
  {
    //客户端脚本Manager
    ClientScriptManager scriptMgr = this.ClientScript;
 
    //获取回调函数，getCallbackResult就是回调函数
    string functionName = scriptMgr.GetCallbackEventReference(this, "", "getCallbackResult", "");
 
    //发起请求的脚本，callServer就是点击按钮事件的执行函数
    string scriptExecutor = "function callServer(){" + functionName + ";}";
 
    //注册脚本
    scriptMgr.RegisterClientScriptBlock(this.GetType(), "callServer", scriptExecutor, true);
  }
 
  //接口方法
  public string GetCallbackResult()
  {
    return "callback result";
  }
 
  //接口方法
  public void RaiseCallbackEvent(string eventArgument)
  {
  }
}

Diese Methode hat die folgenden Nachteile:

　1. Die Implementierung ist komplizierter und für jedes Seitenladeereignis muss ein entsprechendes Skript registriert werden.

　2. Das Frontend generiert eine Skriptdatei für den Proxy.

　3. Bei komplexen Seiteninteraktionen ist die Implementierung sehr mühsam.

　4. Obwohl es sich um einen Rückruf handelt, wird das Seitenobjekt zu diesem Zeitpunkt noch generiert.

　3.3 Verwendung allgemeiner Handler

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

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

public void ProcessRequest(HttpContext context)
{
  Page page = new Page();
  Control control = page.LoadControl("~/PageOrAshx/UserInfo.ascx");
  if (control != null)
  {
    StringWriter sw = new StringWriter();
    HtmlTextWriter writer = new HtmlTextWriter(sw);
    control.RenderControl(writer);
    string html = sw.ToString();
    context.Response.Write(html);        
  }
}

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

　　3.4 页面基类

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

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

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

　　2.在哪里统一处理？

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

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

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

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

　　　　反射。

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

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

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

　　页面基类：

public class PageBase : Page
{
  public override void ProcessRequest(HttpContext context)
  {
    HttpRequest request = context.Request;
    if (string.Compare(request.Headers["AjaxFlag"],"AjaxFlag",0) == 0)
    {
      string methodName = request.Headers["MethodName"];
      if (string.IsNullOrEmpty(methodName))
      {
        EndRequest("MethodName标记不能为空！");
      }
      Type type = this.GetType().BaseType;
      MethodInfo info = type.GetMethod(methodName, BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static);
      if (info == null)
      {
        EndRequest("找不到合适的方法调用！");
      }        
      string data = info.Invoke(this, null) as string;
      EndRequest(data);
    }
    base.ProcessRequest(context);
  }
  private void EndRequest(string msg)
  {
    HttpResponse response = this.Context.Response;
    response.Write(msg);
    response.End();
  }
}

　　页面类：

public partial class Test1 : PageBase
{
  protected void Page_Load(object sender, EventArgs e)
  {
  }
  public string GetData()
  {
    return "213";
  }
}

　　前台代码：

function getData(){
  $.ajax({
    headers:{"AjaxFlag":"XHR","MethodName":"GetData"},
    success:function(data){
      $("#result").text(data);
    }
  });
}

四、优化版页面基类

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

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

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

　　2.加入标记属性。

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

　　3.优化反射。

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

　　标记属性：

public class AjaxMethodAttribute : Attribute
{
}

　　缓存对象：　　

public class CacheMethodInfo
{
  public string MethodName { get; set; }
  public MethodInfo MethodInfo { get; set; }
  public ParameterInfo[] Parameters { get; set; }
}

　　基类代码：

public class PageBase : Page
{
  private static Hashtable _ajaxTable = Hashtable.Synchronized(new Hashtable());
  public override void ProcessRequest(HttpContext context)
  {      
    HttpRequest request = context.Request;
    if (string.Compare(request.Headers["AjaxFlag"],"XHR",true) == 0)
    {
      InvokeMethod(request.Headers["MethodName"]);
    }
    base.ProcessRequest(context);
  }
  /// <summary>
  /// 反射执行函数
  /// </summary>
  /// <param name="methodName"></param>
  private void InvokeMethod(string methodName)
  {
    if (string.IsNullOrEmpty(methodName))
    {
      EndRequest("MethodName标记不能为空！");
    }
    CacheMethodInfo targetInfo = TryGetMethodInfo(methodName);
    if (targetInfo == null)
    {
      EndRequest("找不到合适的方法调用！");
    }
    try
    {
      object[] parameters = GetParameters(targetInfo.Parameters);
      string data = targetInfo.MethodInfo.Invoke(this, parameters) as string;
      EndRequest(data);
    }
    catch (FormatException)
    {
      EndRequest("参数类型匹配发生错误！");
    }
    catch (InvalidCastException)
    {
      EndRequest("参数类型转换发生错误！");
    }
    catch (ThreadAbortException)
    {
    }
    catch (Exception e)
    {
      EndRequest(e.Message);
    }
  }
  /// <summary>
  /// 获取函数元数据并缓存
  /// </summary>
  /// <param name="methodName"></param>
  /// <returns></returns>
  private CacheMethodInfo TryGetMethodInfo(string methodName)
  {
    Type type = this.GetType().BaseType;
    string cacheKey = type.AssemblyQualifiedName;
    Dictionary<string, CacheMethodInfo> dic = _ajaxTable[cacheKey] as Dictionary<string, CacheMethodInfo>;
    if (dic == null)
    {
      dic = new Dictionary<string, CacheMethodInfo>();
      MethodInfo[] methodInfos = (from m in type.GetMethods(BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static)
                    let ma = m.GetCustomAttributes(typeof(AjaxMethodAttribute), false)
                    where ma.Length > 0
                    select m).ToArray();
      foreach (var mi in methodInfos)
      {
        CacheMethodInfo cacheInfo = new CacheMethodInfo();
        cacheInfo.MethodName = mi.Name;
        cacheInfo.MethodInfo = mi;
        cacheInfo.Parameters = mi.GetParameters();
        dic.Add(mi.Name, cacheInfo);
      }
      _ajaxTable.Add(cacheKey, dic);
    }
    CacheMethodInfo targetInfo = null;
    dic.TryGetValue(methodName, out targetInfo);
    return targetInfo;
  }
  /// <summary>
  /// 获取函数参数
  /// </summary>
  /// <param name="parameterInfos"></param>
  /// <returns></returns>
  private object[] GetParameters(ParameterInfo[] parameterInfos)
  {
    if (parameterInfos == null || parameterInfos.Length <= 0)
    {
      return null;
    }
    HttpRequest request = this.Context.Request;
    NameValueCollection nvc = null;
    string requestType = request.RequestType;
    if (string.Compare("GET", requestType, true) == 0)
    {
      nvc = request.QueryString;
    }
    else
    {
      nvc = request.Form;
    }
    int length = parameterInfos.Length;
    object[] parameters = new object[length];
    if (nvc == null || nvc.Count <= 0)
    {
      return parameters;
    }
    for (int i = 0; i < length; i++)
    {
      ParameterInfo pi = parameterInfos[i];
      string[] values = nvc.GetValues(pi.Name);
      object value = null;
      if (values != null)
      {
        if (values.Length > 1)
        {
          value = String.Join(",", values);
        }
        else
        {
          value = values[0];
        }
      }
      if (value == null)
      {
        continue;
      }
      parameters[i] = Convert.ChangeType(value, pi.ParameterType);
    }      
    return parameters;
  }
  private void EndRequest(string msg)
  {
    HttpResponse response = this.Context.Response;
    response.Write(msg);
    response.End();
  }
}

　　页面类：

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

　　前台代码：

function getData3(){
  $.ajax({
    headers:{"AjaxFlag":"XHR","MethodName":"GetData3"},
    data:{"i":1,"d":"10.1a","str":"hehe"},
    success:function(data){
      $("#result").text(data);
    }
  });
}

五、总结

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

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

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

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

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

Eine kurze Analyse des Unterschieds zwischen JSON und JSONP und der Formatkonvertierung nach dem Erhalten von JSON-Daten über Ajax

Beispielanalyse für das asynchrone Laden von Ajax-Bildern

Ajax sendet und empfängt Anfragen

Das obige ist der detaillierte Inhalt vonSchreiben leichter Ajax-Komponenten 01 – Vergleich mit verschiedenen Implementierungsmethoden auf der Webform-Plattform. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse und Lösungen für die Fehlerursachen beim Herunterladen der Jquery Ajax-AnforderungsdateiNächster Artikel：Analyse und Lösungen für die Fehlerursachen beim Herunterladen der Jquery Ajax-Anforderungsdatei

In Verbindung stehende Artikel

Mehr sehen