) Ajaxpro instructions

Ajaxpro instructions 1

Directory 2

Modify history 3

1. What is Ajax 4?

2. Why Ajax 4?

3. Ajax application scenario 4

4. Ajax development framework 5

5. ajaxpro description 6

6. ajaxpro instance description 6

2.1 Add the ajaxpro. dll application 6

2.2 configure web. config 8

2.3 Add Server Method 9

2.4 Add front-end Code 11

2.5 run the program and check result 12

1. What is Ajax?

 

Ajax is the abbreviation of Asynchronous JavaScript and XML (Asynchronous JavaScript and XML. The inventor of the term "ajax" is Jesse James Garret, and Google is the one that promotes Ajax technology. The core idea of AJAX is to use the XMLHTTPRequest object to send asynchronous requests.

2. Why Ajax?

• Reduce the burden on the server. The principle of AJAX is "retrieve data on demand", which can minimize redundant requests and reduce the burden on the server.
• You do not need to refresh the page to reduce users' psychological and actual waiting time. Especially when reading a large amount of data, there will be no white screen like refreshing the page. Ajax uses the XMLHTTPRequest object to send a request and get the server response. without reloading the entire page, use JavaScript to update the DOM page. Therefore, when reading data, the user is not facing a white screen, but the original page content (you can also add a "loading" prompt box to let the user know the data currently being read ), the content of the corresponding social part is updated only after the data is received. This kind of update is instantly invisible to users.
• Better User Experience
• The previous server workload can be transferred to the client, and the client's idle capabilities can be used to reduce the server workload, make full use of Bandwidth Resources, and save space and bandwidth rental costs.
• Attackers can call external data.
• Based on standardized and widely supported technologies, you do not need to download plug-ins or applets.
• Further promote the separation of page presentation and Data

3. Ajax application scenarios

Scenario 1: Data Verification

Scenario 2: retrieve data as needed

Scenario 3: automatically update the page

4. Ajax development framework

• Jquery
• EXT
• Yui
• Qooxdoo
• DWR (Direct Web remoting)

Currently, this product is added to webwork, open source (APACHE ). You can directly call the Java method application framework in JavaScript code. You can transfer the request call in JavaScript to the Java method and return the execution result to JavaScript.

• Ajaxpro

Ajaxpro is the first free library that supports accessing server. NET through javascript in various ways, similar to sajax. It can send JavaScript requests to the. NET method, and the server side will send them back to Javascript, even including serialized custom classes. Its main features are as follows:

Session and application data can be accessed in Javascript;

Cache query results

Free source code

All classes support data returned by the Javascript client. dataset can be used in JavaScript.

Use the htmlcontrols component to access and return data

The page does not need to be reloaded. Event proxy (data access layer) is used)

Because only one interface method is provided, the CPU usage on the server is very small.

• Magicajax

Magicajax integrates Ajax functions into pages in the simplest way without modifying ASP. net controls, and do not need to write new controls, but do not need to write Javascript. It has the following features:

The application configuration is simple and easy to use;

Use only one AjaxPanel to implement the Ajax function. You only need to put the control that requires no refreshing into AjaxPanel.

Ajax functions and common PostBack functions can coexist in a webform. The magicajax processing module only processes callback actions of controls contained in the AjaxPanel.

The viewstate content is visible for both PostBack and callback. Therefore, viewstate generated by callback or PostBack is visible;

Provides an event model similar to PostBack callback.

Supports IE and Firefox

• Anthem. net

Compared with traditional Ajax technology, anthem. Net has the following advantages:

No technical upgrade is required. People who previously did not use Ajax technology can implement Asynchronous interaction based on previous programming methods;

Support Asp.net 1.1 and Asp.net 2.0

5. ajaxpro description

This document uses the ajaxpro. NET Framework to implement Ajax: the client asynchronously calls the server method. Ajaxpro. net is an excellent. the Ajax framework in the. NET environment is easy to use. You can refer to the relevant materials. This document uses a simple example to describe the key points of using ajaxpro. In this example, a simple function is implemented, the server adds the number entered in the page to 1 and returns the result to the client (note that the ajaxpro package must exist, that is, ajaxpro. DLL file, which can be downloaded on VSS ).

6. ajaxpro instance description 6.1. Add the ajaxpro. dll Application

 

2.1.1 open the project with vs, right-click the reference in its resource manager, and left-click "add reference", as shown in 1_1.

 

Figure 1-1

 

2.1.2 the dialog box shown in 1_2 appears. Click Browse, find the location of the ajaxpro. dll file, double-click ajaxpro. dll, and click OK.

Figure 1-2

2.1.3 in the reference folder of the resource manager, you can see the ajaxpro, indicating that the reference is successfully added, as shown in 1_3.

Figure 1-3

2.2 configure web. config

This step ensures that the client requests (post and get) to "ajaxpro/*. ashx" are intercepted by ajaxpro. ajaxhandlerfactory.

Open the Web. config file and add the following code after <configuration> <system. Web>,

<Httphandlers> <Add verb = "post, get" Path = "ajaxpro/*. ashx" type = "ajaxpro. ajaxhandlerfactory, ajaxpro"/> </Httphandlers>

 

2_1.

 

Figure 2-1

 

2.3 Add a server

2.3.1 open the background code and add the following code to the page_load method,

 

Ajaxpro. Utility. registertypeforajax (typeof (Class Name of the class ));

 

3-1.

Figure 3-1

 

The function is to output the following code to the client:

<SCRIPT type = "text/JavaScript" src = "/ch33/ajaxpro/CORE. ashx"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "/ch33/ajaxpro/1373.verify, 1373.ashx"> </SCRIPT>

 

2.3.2 Add a number plus one method. First add [ajaxpro. ajaxmethod] before the method, and then write the method like the C # method, 3-2

Figure 3-2

Note: you must add the [Ajax. ajaxmethod] identifier to access the client.

2.4 Add front-end code

Add a JS script to the foreground and call the server method, as shown in Figure 4-1 (try. ajaxtest. add (Num), try is the page class, that is, the namespace where the ajaxtest class is located, here is try; while ajaxtest is the class name, add is the method name)

Figure 4-1

 

2.5 run the program and check the results

 

You can achieve the expected results by following the preceding four steps, as shown in Figure 5-1.

Figure 5-1