Community Server Series 4: Application of Ajax in cs2.0 1

 AjaxTechnology is very popular nowadays, of course inCs2.0This technology is also applied,CS2No third party is usedAjaxControl, which provides us with a researchAjaxThe Mechanism is good.CS2MediumAjaxAnd analyzes the principle of the application.

The best way to study this technology isCodeSplit them out and put them in your own project. If you reproduce these functions, you will certainly encounter one or another problem. This is exactly where we should focus on research, so let's separate the code first.

TakeCSOneAjaxFor small applications, when users with system administrator permissions enter, they can see that the title of the page and some news content can be changed without any changes. Let's start from here. Find the corresponding control page, we will find that some files referenced by these controls, I will list them first, the following is my analysisTitlebarSeparated code:

For more information, see:

Ajaxmanager. CSMainly providesAjaxThis file contains three classes, as shown in the following figure:2, WhereAjaxmanagerIt contains several static methods. This is the key.

Global. jsThis file mainly contains two important script functions to processAjaxSubmission, and some useful JS functions.

Of course, these two files are only the foundation and need to be usedAjaxThe corresponding page must be matched and matchedJSFamiliar with programming. Now let's take a look.AjaxMechanism,AjaxTo put it bluntly, it is used.JSScript andXMLHTTPThe technology submits data to the server in the background and returns the data to the client after processing the server's corresponding method. Because the data is submitted in the background, the user can only see the data changes but cannot see the page refresh, the functionality is cool, and it is not difficult to implement it. This begins:

First, let's take a lookCS2InAjaxImplementation Principle

This example is simple: provide the numbers entered by two users on the client and submit them to the server for calculation, return the calculation result to the client.

(Before reading the following explanation, you 'd better download this article.ArticleExampleProgramCombined with viewing.)

First, we createAspxPage, named hereDefault. aspx, The first step is to let the page register when submitting the requestAjax_callbackScript (this script is the key for communication between the client and the server). Here our background code is very simple and you canPage_loadThe method is written as follows:If(!This. Ispostback) ajaxmanager. Register (This, "Counter ");We can see that the calledAjaxmanagerStatic method. This method is used to analyze the input parameters.(Here the parameter isThisThat is, page reference), Generate the clientAjax_callbackScript. Before the script is generated, the system automatically finds the number of files on this pageAjaxmethodAttribute method. A server method corresponds to a client.Ajax_callbackAfter the client script is generated, we only need to write a small number of call methods on the client to communicate with the server. The script registered to the client here is:

" Counterenter " : Function (First, second, clientcallback ){
Return Ajax_callback ('asp. default_aspx ', Null , 'Counterenter', [First, second], clientcallback, False , False , False , False ,' / Cs_ajax / Default. aspx ? Ajax_callback = True ');
}

With this script, the client's work has not been completed, because the client control has not responded to the operation, we need to manually write some operation code here, but it is generally not too complex, for example, we only need to add moreJSFast statement:

Function Counterenter (){
$ ('Txtresresult'). Value = Itesettings. counterenter ($ ('txtfirst'). value, $ ('txtsecond'). value, Null ). Value ;}

You can call this function on the onclick event of the client. Some of the client code may be confused. The "$" function is glogal. in JS files, it is equivalent to document. getelementbyid, itesettings. counterenter is to call the script previously registered to the client, so this code means to pass the values of the first and second input baskets to the counterenter method on the server, and pay the returned results to the txtresult text box. As mentioned above, the counterenter method on the server has the ajaxmethod attribute, and the program will automatically find and execute this method. As for how to find it, I will explain in the following sections. After the server method executes this method, it returns the result. The returned value is response to the client in the form of a JS script through the relevant methods of ajaxmanager (for example: {value: 'aaa', error: NULL}). After obtaining the returned object, you only need to call the value attribute to obtain the returned value.
So how does the server determine whether it is a GET request, a PostBack request, or an ajaxpostback request? The corresponding method can be executed only when the result is clear, in fact, both the get method and the ajaxpost data Asp.net are not considered to be sent back to the server, so that the IF (! This. ispostback) for both requests are considered to be equivalent, then the page of the ajaxpost request through the background will also execute ajaxmanager. the register method, so let's take a look at what this method has done in addition to registering the client JS Code. In the last code, we noticed the following: control. prerender + = new eventhandler (onprerender); this statement is to execute the onprerender method first when the response is sent to the client page, this method is used to determine whether Ajax parameters exist in the parameters submitted by the client. If yes, it determines that the request is submitted by Ajax and the server-related method needs to be executed, here, we found the method to be called and executed through a series of jumps and reflections, returned the result after execution to the client, and aborted the page to continue the responst, thus completing a complete Ajax call, of course, there are a lot of details in ajaxmanager that are not detailed here. If you have any objections or questions, I hope to correct and discuss them a lot. I also hope this post can serve as a reference, this is a small reference.
Next, we will introduce the advanced application of Ajax in CS2. This document provides an example for downloading.