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

This article introduces the relevant knowledge of "selection and application of Ajax in .NET 2.0 environment". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Study the problems that need to be solved:

1 selection of Ajax application framework and its performance comparison

2 how to apply Ajax

3 problems that should be paid attention to in the process of applying Ajax

Ajax Demo Web Site is a complete .NET Website that contains five ASPX pages and their corresponding CS files.

For ease of comparison, three Ajax application methods are used in Demo:

One is to use the Atlas application framework provided by Microsoft, the second is to use the Ajax.NET Professional open source framework, and the third is to use the simple Javascript package Prototype for Ajax. The associated files corresponding to the three are shown in the following table:

Application mode

File name

Description

Default.aspx

Home navigation, listing the links to the four Demo pages

Atlas

AtlasDemo.aspx

Use Atlas to realize the CRUD function of Product, and complete no refresh operation through UpdatePanel.

AjaxPro

AjaxProDemo.aspx

Use Ajax.NET Pro to realize the CRUD function of Product, edit and delete operations to return the results of true/false, and realize the presentation of page data list (HTML) through .NET DataGrid controls.

AjaxProDemoSecond.aspx

Use Ajax.NET Pro to achieve the CRUD function of Product, edit and delete operations to return all Product lists, through .NET DataGrid controls to achieve page data list rendering (HTML).

Prototype

PrototypeDemo.aspx

Use Prototype to realize the CRUD function of Product, edit and delete operations return all Product lists, and the data of Client and Server are transmitted in JSON format.

Product.cs

Product entity class

1 selection of Ajax application framework

The core of Ajax application is to submit Client request to Server through XMLHttpRequest object, and obtain the Response information returned by Server synchronously or asynchronously, while the previous data transmission between Client and Server can be in Text, XML or JSON format.

Prototype, Ajax.NET Pro and Atlas Beta2 used in Demo represent the three main ways of Ajax application:

Prototype is the most widely used remote invocation toolkit at present. It usually uses its own API to encapsulate XMLHttpRequest objects, which makes calling XMLHttpRequest more simple and intuitive. Before XMLHttpRequest, we usually used embedded IFRAME to achieve the effect of sending http requests without refresh pages. Therefore, these remote call packages must support browsers that do not support XMLHttpRequest in order to improve browser compatibility. Similar tools such as DOJO. In the process of application, this kind of tool needs to set its own URL and parameters, and write corresponding callback functions to deal with the Response results returned by Server.

In PrototypeDemo.aspx, we submit the request to the server through Ajax.Request, and realize the processing and display of the Response result of Server in the callback function. Of course, the URL parameters for each request are different.

Ajax.NET Pro is an Ajax framework based on proxy implementation, which allows the Javascript of Client to be mapped directly to the classes of Server, so that the Javascript of Client can directly access the class object of Server and its API through them, which is similar to RPC, and directly calls the corresponding API to complete business operations. It is still necessary to write corresponding callback functions to deal with the Response results returned by Server.

In AjaxProDemo.aspx.cs, we register the class in the form of AjaxPro.Utility.RegisterTypeForAjax (typeof (AjaxProDemo)) in Page_Load by adding a [AjaxPro.AjaxMethod] tag to the method header, so that it can be called directly in Client.

Atlas is a component-based application, which allows the use of drag-and-drop to quickly create components with Ajax functions in the design view of IDE, and can maximize the use of DataGrid, Button and other UI controls provided by .NET. These components provide another shortcut to the rapid development of Ajax applications without the need to write callback functions.

For now, Atlas can make the most use of UpdatePanel controls to achieve no refresh or partial refresh of the page.

2 comparison of performance and development efficiency of Ajax framework

A, data flow

All four Sample in Demo implement simple CRUD functionality for Product. Here we use Fiddler HTTP Debugger to test the amount of data that Client and Server interact with throughout the operation.

Load Product List:

Request URL

Data flow

Description

Prototype

PrototypeServerResponse.aspx

? action=listProduct

Request Count: 1

Bytes Sent: 380

Bytes Received: 2150

Gets the Product list and returns it in JSON format, and the client uses Javascript scripts to process the rendering.

Ajax.NET Pro (Second)

Ajaxpro/AjaxProDemoSecond

App_Web_qgwv3twq.ashx

Request Count: 1

Bytes Sent: 493

Bytes Received: 1392

Get the Product list, return it in HTML format, and render it directly on the client side.

Atlas

AtlasDemo.aspx

Request Count: 1

Bytes Sent: 827

Bytes Received: 6391

Get the Product list, and Server completes the DataGrid data source binding rendering.

Delete Product:

Request

Data flow

Description

Prototype

PrototypeServerResponse.aspx

? action=deleteProduct&productId=1

Request Count: 1

Bytes Sent: 446

Bytes Received: 1891

Transfer the ProductId, complete the deletion operation, and get the Product list for presentation on the Client side.

Ajax.NET Pro (Second)

Ajaxpro/AjaxProDemoSecond

App_Web_qgwv3twq.ashx

Request Count: 1

Bytes Sent: 504

Bytes Received: 1300

Call the remote RPC interface, complete the deletion operation, and get the HTML of the Product list to be presented on the Client side.

Atlas

AtlasDemo.aspx

Request Count: 1

Bytes Sent: 2287

Bytes Received: 5913

Trigger the Action event on the Server side to complete the deletion operation, and you need to Postback the entire page.

Get Product Info:

Request

Data flow

Description

Prototype

PrototypeServerResponse.aspx

? action=getProduct&productId=8

Request Count: 1

Bytes Sent: 443

Bytes Received: 403

Transmit ProductId, get the Product information in JSON format, and the Client side completes the parsing and rendering.

Ajax.NET Pro (Second)

Ajaxpro/AjaxProDemoSecond

App_Web_qgwv3twq.ashx

Request Count: 1

Bytes Sent: 506

Bytes Received: 284

Call the RPC API to obtain the Product information in Text format, and the Client side completes the parsing and rendering.

Altas

AtlasDemo.aspx

Request Count: 1

Bytes Sent: 2185

Bytes Received: 6275

To trigger the Action event on the Server side to obtain Product information, you need to Postback the entire page.

Edit Product:

Request

Data flow

Description

Prototype

PrototypeServerResponse.aspx

? action=updateProduct&productId=8

& productName=Sony&manufacturer=China

Request Count: 1

Bytes Sent: 482

Bytes Received: 1877

Transfer parameters such as ProductId, complete the save operation, and get the Product list.

Ajax.NET Pro (Second)

Ajaxpro/AjaxProDemoSecond

App_Web_qgwv3twq.ashx

Request Count: 1

Bytes Sent: 549

Bytes Received: 1284

Call the remote PPC interface, complete the save operation, and get the Product list in HTML format.

Atlas

AtlasDemo.aspx

Request Count: 1

Bytes Sent: 2218

Bytes Received: 5913

Trigger the Action event on the Server side to complete the save operation, and you need to Postback the entire page.

Add Product:

Request

Data flow

Description

Prototype

PrototypeServerResponse.aspx

? action=addProduct&productName=Sony

& manufacturer=China

Request Count: 1

Bytes Sent: 467

Bytes Received: 2050

Transfer parameters such as ProductName, complete the add operation, and get the Product list in JSON format.

Ajax.NET Pro

Ajaxpro/AjaxProDemoSecond

App_Web_qgwv3twq.ashx

Request Count: 1

Bytes Sent: 529

Bytes Received: 1364

Call the remote RPC interface, complete the add operation, and get the Product list in HTML format.

Atlas

AtlasDemo.aspx

Request Count: 1

Bytes Sent: 2249

Bytes Received: 6533

Trigger the Action event on the Server side to complete the add operation, and you need to Postback the entire page.

Conclusion:

As you can see from the above comparison table, Atlas still needs to Postback the entire page in the process of displaying without refresh, but the process is handled asynchronously; when the Server side completes the response, the Atlas client updates the partial-page according to the time of the page. So for any partial page operation, the Postback of the page is still required. If the amount of data on the page is particularly large, Atlas will lead to a reduction in efficiency.

There is little difference in the amount of data between Prototype and Ajax.NET Pro.

B, development efficiency

Atlas is tightly integrated with .NET controls. If you use Atlas, you can reuse .NET controls, such as data display controls, to the maximum extent.

Using Prototype, you need to submit the Request request to Server in the Javascript code, and write the corresponding callback function to parse and render the Response result.

With Ajax.NET Pro, you can directly call the methods of Server's class (remote RPC), but you still need to write corresponding callback functions to parse and render the Response results.

Data format returned by C and Server

Ajax.NET Pro provides interfaces and methods for serializing into JSON format.

The data format returned by the Server side can be a simple Text, an XML document, or serialized into JSON format through Ajax.NET Pro.

This is the end of the content of "Ajax selection and Application under .NET 2.0". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.