Writing lightweight ajax components 01-Comparison with various implementation methods on the webform platform-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Writing lightweight ajax components 01-Comparison with various implementation methods on the webform platform

亚连

May 24, 2018 pm 02:57 PM

ajaxweb

This article mainly introduces the writing of lightweight ajax component 01-compared with various implementation methods on the webform platform. Friends in need can refer to the following

Preface

　Asp.net WebForm and Asp.net MVC (referred to as MVC) are both web development frameworks based on Asp.net. There are big differences between the two. One of them is that MVC pays more attention to the essence of http, while WebForm tries to shield http. This provides a large number of server controls and ViewState mechanisms, allowing developers to program based on the event model like developing Windows Form applications. Both have their own pros, cons and applicable scenarios, but MVC is now the first choice for many Asp.net developers.

WebForm is based on Asp.net. Asp.net provides sufficient scalability. We can also use these to write a framework like MVC under WebForm. We will write this again when we have the opportunity. When it comes to WebForm, many people will think of server controls (drag controls!!!). In fact, this is not the case. We can also not use server controls at all and focus on html like MVC. If WebForm wants to abandon server controls and focus on HTML, it must first remove the

tag. This runat server form is the basis of its PostBack mechanism. Since we are going back to html css js, it means that many things have to be implemented by ourselves, such as handling Ajax requests. Unlike MVC, the initial design of WebForm uses server controls as the main component. If you do not use it, you can only use its extensibility to achieve it.

　This series is to implement a lightweight ajax component based on the WebForm platform, which is mainly divided into three parts:

　1. Introducing various implementation methods under WebForm.

　2. Analyze ajaxpro components.

　3. Write your own ajax component.

1. Introduction to Ajax

Asynchronous allows us to request or submit data to the server without refreshing the entire page. For complex pages, it is obviously inefficient to reload the entire page just to request a little data. Ajax is designed to solve this problem. The core of ajax is the XmlHttpRequest object, through which requests are submitted to the server in the form of text. After XmlHttpRequest2.0, submission of binary data is also supported.

Ajax security: For security reasons, Ajax is restricted by the same-origin policy; that is, it can only access requests from the same domain and the same port, and cross-domain requests will be rejected. Of course, sometimes requirements require sending requests across domains. Commonly used cross-domain processing methods include CORS (cross-domain resource sharing) and JSONP (parametric JSON).

Ajax data interaction format: Although the Ajax core object XmlHttpRequest has the word "XML", the data exchange format between the client and the server is not limited to xml. For example, json format is now used more often.　

　Ajax also has shortcomings. For example, the support for search engines is not very good; sometimes it violates the original intention of url resource positioning.

2. Using ajax under the Asp.net MVC platform

In MVC, it is very convenient for ajax to call background methods. You only need to specify the Action. Just name it.

Front-end code:

<body>
  <h1 id="index">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>

Back-end code:

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

3. Using ajax under the WebForm platform

　3.1 Based on server control package or third-party components

This is based on the server Controls, such as the ajax toolkit, or components like FineUI. The web front-end is always composed of html css js, but the question is how to generate it. We can write the native ones ourselves or use some front-end plug-ins; those based on server controls are generated in the background and are usually less efficient. The server component will generate a series of proxies in the foreground. The essence is still the same, but the control encapsulates this process and does not require us to write it ourselves. The model based on controls or third-party components is quite useful in some management systems. The number of visits is not very large and it can be developed quickly.

　3.2 Based on the ICallbackEventHandler interface

　.net provides the ICallbackEventHandler interface for processing callback requests. This interface needs to use ClientScriptManager to generate proxy scripts in the foreground for sending and receiving requests, so the

tag is required.

Front-end 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>

Back-end 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)
  {
  }
}

This method has the following disadvantages:

1. It is more complicated to implement, and a corresponding script must be registered for each page Load event.

　2. The frontend will generate a script file for proxy.

　3. For complex page interactions, it is very troublesome to implement.

　4. Although it is a callback, the page object is still generated at this time.

　3.3 Using general processing procedures

　　一般处理程序其实是一个实现了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组件，这是一个开源的组件，下一篇就通过源码了解这个组件，借鉴它的处理过程，并且分析它的优缺点。

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

A brief analysis of the difference between json and jsonp and the format conversion after obtaining json data through ajax

Ajax asynchronous loading image example analysis

Ajax sending and receiving requests

The above is the detailed content of Writing lightweight ajax components 01-Comparison with various implementation methods on the webform platform. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Python vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

1 months agoByDDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks agoByDDD

InZoi: How To Apply To School And University

3 weeks agoByDDD

Hot Tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Zend Studio 13.0.1

Powerful PHP integrated development environment

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 English version

Recommended: Win version, supports code prompts!

Hot Topics

Where is the login entrance for gmail email?

7797

1644

1402

1299

1234