Shulou(Shulou.com)06/03 Report--

Write lightweight ajax component 01-an example analysis compared with various implementation methods on the webform platform. In view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Preface

Asp.net WebForm and Asp.net MVC (MVC for short) are both web development frameworks based on Asp.net, and there are great differences between them. One of them is that MVC pays more attention to the essence of http, while WebForm tries to shield http, so it provides a large number of server controls and ViewState mechanisms, so that developers can program based on event model just like developing Windows Form applications. Both have their own advantages and disadvantages and applicable scenarios, but MVC is now the first choice for many Asp.net developers.

WebForm is based on Asp.net, Asp.net provides enough extensibility, we can also use these under WebForm to write a framework like MVC, this has the opportunity to write again. When it comes to WebForm, many people will think of server controls (drag controls! Instead of using server controls at all, we can follow html as much as MVC does If WebForm wants to abandon the server controls and focus on html, the first step is to remove the tags, and the form of this runat server is the basis of its PostBack mechanism. Now that we're going back to html+css+js, that means a lot of things have to be implemented on our own, such as handling Ajax requests. Unlike MVC, WebForm started its design with server controls as a major component, and if you don't use it, you can only take advantage of its extensibility.

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

1. This paper introduces various implementation methods under WebForm.

two。 Analyze the ajaxpro components.

3. Write your own ajax components.

A brief introduction to Ajax

Async allows us to request or submit data without refreshing the entire page, like the server. For complex pages, it is obviously inefficient to reload the entire page in order to request a little data, and 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, binary data submission is also supported.

Ajax security: for security reasons, ajax is restricted by the same origin policy; that is, requests that can only access the same domain and the same port will be rejected. Of course, sometimes requests need to be sent across domains. The common cross-domain processing methods are 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, more json format is now used.

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

2. Use ajax under Asp.net MVC platform

In MVC, it is very convenient for ajax to call background methods by specifying the name of the Action.

Foreground code:

Index function getCallbackResult (result) {document.getElementById ("result") [xss_clean] = result;}

Background code:

Public partial class Test1: System.Web.UI.Page, ICallbackEventHandler {protected void Page_Load (object sender, EventArgs e) {/ / client script Manager ClientScriptManager scriptMgr = this.ClientScript; / / get the callback function, and getCallbackResult is the callback function string functionName = scriptMgr.GetCallbackEventReference (this, "getCallbackResult", "") / / the script that initiates the request. CallServer is the execution function of the button event string scriptExecutor = "function callServer () {" + functionName + ";}"; / / register the script scriptMgr.RegisterClientScriptBlock (this.GetType (), "callServer", scriptExecutor, true);} / / API method public string GetCallbackResult () {return "callback result";} / / Interface method public void RaiseCallbackEvent (string eventArgument) {}}

This approach has the following disadvantages:

1. It is more complex to implement, and each page Load event has to register the corresponding script.

two。 The foreground generates a script file for the agent.

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

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

3.3 use general handlers

The general handler is actually a class that implements the IHttpHandler interface, and like the page class, it can also be used to handle requests. General handlers are not usually used to generate html, there is no complex event mechanism, and there is only a ProcessRequest entry for processing requests. We can write the ajax request address to the path of the .ashx file so that it can be processed and more efficiently.

All you need to output the text content is Response.Write (data), for example, after getting the data from the database, serialize it into an json format string, and then output it. As mentioned earlier, a general processor does not originally generate html like a page, but if you want to generate html, you can generate it by loading user controls. Such as:

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);}}

The advantage of this approach is lightweight and efficient; the disadvantage is that many ashx files are defined for many interactions, increasing the cost of management and maintenance.

3.4 Page Base Class

Define the method of handling ajax requests in the page object so that each page can focus on processing requests related to this page. There's something to pay attention to here.

1. How do I know that this request is an ajax request?

From the request X-Requested-With:XMLHttlRequest, you can tell that most asynchronous requests from browsers contain this request header; it can also be achieved through custom request headers, such as AjaxFlag:XHR.

two。 Where will it be handled in a unified manner?

If it is troublesome to judge and call in each page class, transfer the processing to a page base class.

3. How do I know which method is called?

You can pass parameters or define them in the request header, for example: MethodName:GetData.

4. If you know the name of the method, how to call it dynamically?

Reflex.

5. How do I know that this method can be called externally?

It can be thought that the public type can be called externally, or it can be tagged by tag attributes.

Through the above analysis, the simple implementation is as follows

Page base class:

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 tag cannot be empty!") ;} Type type = this.GetType (). BaseType; MethodInfo info = type.GetMethod (methodName, BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static); if (info = = null) {EndRequest ("cannot find a suitable method call!") ;} 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 ();}}

Page class:

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

Foreground code:

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

Fourth, the optimized version of the page base class

The above page base class has few functions, and it is inefficient to call through reflection. Here is a little optimization:

1. Parameters of simple types can be supported.

For example, the GetData above can be: GetData (string name). The relevant parameters can be obtained through the function metadata, and then the parameters can be set according to the requested parameters.

two。 Add tag attributes.

Only attributes marked by AjaxMethodAttribute can be called externally.

3. Optimize reflection.

Use caching to avoid searching for function information based on the function name every time.

Tag attributes:

Public class AjaxMethodAttribute: Attribute {}

Cache objects:

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

Base class code:

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) } / reflection executes the function / private void InvokeMethod (string methodName) {if (string.IsNullOrEmpty (methodName)) {EndRequest ("MethodName tag cannot be empty!") ;} CacheMethodInfo targetInfo = TryGetMethodInfo (methodName); if (targetInfo = = null) {EndRequest ("No suitable method calls found!") ;} try {object [] parameters = GetParameters (targetInfo.Parameters); string data = targetInfo.MethodInfo.Invoke (this, parameters) as string; EndRequest (data);} catch (FormatException) {EndRequest ("error occurred in parameter type matching!") ;} catch (InvalidCastException) {EndRequest ("error occurred in parameter type conversion!") ;} catch (ThreadAbortException) {} catch (Exception e) {EndRequest (e.Message);}} / get function metadata and cache / private CacheMethodInfo TryGetMethodInfo (string methodName) {Type type = this.GetType (). BaseType; string cacheKey = type.AssemblyQualifiedName; Dictionary dic = _ ajaxTable [cacheKey] as Dictionary If (dic = = null) {dic = new Dictionary (); 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 } / get function parameters / private object [] GetParameters (ParameterInfo [] parameterInfos) {if (parameterInfos = = null | | parameterInfos.Length)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.