. Ajax selection and application in NET2.0 environment (provide demo source download) _ajax related

Theme:. The selection and application of Ajax in NET2.0 environment

Study the issues to be addressed:

Selection of 1 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

Researcher: Jimmy.ke

Time: 2006-11-13

A demo description

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

For ease of comparison, the Demo uses three Ajax apps:

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 corresponding associated files are shown in the following table:

Application Mode	File name	Describe
	Default.aspx	Home navigation, listing four Demo page links
Atlas	Atlasdemo.aspx	Using Atlas to implement the CRUD functionality of Product, no refresh operation is done through UpdatePanel.
Ajaxpro	Ajaxprodemo.aspx	Using Ajax.NET Pro to implement Product CRUD functionality, edit, delete operations return the results of True/false, and the. NET DataGrid control implements the rendering of the page data list (HTML).
	Ajaxprodemosecond.aspx	Using Ajax.NET Pro to implement the product's CRUD functionality, the edit, delete operation returns all the product lists, and the. NET DataGrid control implements the rendering of the page data list (HTML).
Prototype	Prototypedemo.aspx	Using Prototype to implement the CRUD functionality of product, edit, delete operations return all the product lists, Client and Server data are transmitted in JSON format.
	Product.cs	Product entity Classes

Conclusion of the second study

1 Ajax Application Framework Selection

The core of Ajax applications is to submit client requests to the server via XMLHttpRequest objects, synchronously or asynchronously, to obtain the Response information returned by the server, and the way in which data is delivered before Client and server can be used in Tex T, XML, or JSON format.

The Prototype, Ajax.NET Pro, and Atlas Beta2 that are used in the Demo represent three main ways of using Ajax today:

Prototype is the most widely used remote call toolkit, which typically encapsulates XMLHttpRequest objects using its own APIs, making it easier to invoke XMLHttpRequest. Before XMLHttpRequest, we usually use an inline IFRAME to implement an HTTP request without refreshing the page. Therefore, these remote call packs must support browsers that do not support XMLHttpRequest to improve browser compatibility. Similar tools such as DOJO. Such tools need to set their own URLs and parameters in the application process, and write the corresponding callback function to handle the Response results returned by the Server.

In prototypedemo.aspx, we submit a request to the server through Ajax.request, and the Response results of the server are processed and displayed in the callback function. Of course, the URL parameters for each request are different.

Ajax.NET Pro is an Ajax framework based on agent-based implementations that allows client JavaScript to implement a one by one mapping directly with the server's class, enabling client JavaScript to access the server's classes directly through their Like and its API, its access is similar to RPC, directly invoke the appropriate API to complete business operations, still need to write the corresponding callback function to handle the Response results returned by the Server.

In AjaxProDemo.aspx.cs, we add a [Ajaxpro.ajaxmethod] callout to the method header to AjaxPro.Utility.RegisterTypeForAjax the class in Page_Load ( typeof (Ajaxprodemo)) in the form of registration, so that it can be called directly from the Client.

Atlas is a component-based application that allows you to quickly create components that contain Ajax functionality in the IDE's design view and to maximize the use of UI controls, such as the DataGrid, Button, and so on, provided by. NET itself. These components provide another shortcut for rapid development of AJAX applications, and the development process does not require the writing of callback functions.

For now, Atlas can make the most of the UpdatePanel control, through which it implements no refresh or partial refreshes of the page.

2 Ajax Framework performance and development efficiency comparison

A , data Traffic

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

load Product List :

Request URL	Data traffic	Description
Prototype
Prototypeserverresponse.aspx ? action=listproduct	Request count:1 Bytes sent:380 Bytes received:2,150	Gets the Product list, which is returned in JSON format, and the client uses Javascript scripting to handle rendering.
ajax.net Pro (Second )
Ajaxpro/ajaxprodemosecond, App_web_qgwv3twq.ashx	Request count:1 Bytes sent:493 Bytes received:1,392	Gets the Product list, which is returned in HTML format and is rendered directly by the client.
Atlas
Atlasdemo.aspx	Request count:1 Bytes sent:827 Bytes received:6,391	Gets the Product list that Server completes the DataGrid data source binding rendering.

Delete Product :

Request	Data traffic	Description
Prototype
Prototypeserverresponse.aspx ? action=deleteproduct&productid=1	Request count:1 Bytes sent:446 Bytes received:1,891	Transfer ProductId, complete the delete operation, and get the Product list to client side rendering.
ajax.net Pro (Second )
Ajaxpro/ajaxprodemosecond, App_web_qgwv3twq.ashx	Request count:1 Bytes sent:504 Bytes received:1,300	Invokes the remote RPC interface, completes the delete operation, and gets the HTML of the Product list rendered on the client side.
Atlas
Atlasdemo.aspx	Request count:1 Bytes sent:2,287 Bytes received:5,913	Triggers the Server-side action event, completes the deletion, and needs to postback the entire page.

Get Product Info :

Request	Data traffic	Description
Prototype
Prototypeserverresponse.aspx ? action=getproduct&productid=8	Request count:1 Bytes sent:443 Bytes received:403	Transmits ProductId, obtains the JSON format the Product information, the client side completes resolves and renders.
ajax.net Pro (Second )
Ajaxpro/ajaxprodemosecond, App_web_qgwv3twq.ashx	Request count:1 Bytes sent:506 Bytes received:284	Invokes the RPC interface to obtain Product information in the Text format, and the client side completes parsing and rendering.
Altas
Atlasdemo.aspx	Request count:1 Bytes sent:2,185 Bytes received:6,275	Triggers the Server-side Action event to get Product information that requires postback the entire page.

Edit Product :

Request	Data traffic	Description
Prototype
Prototypeserverresponse.aspx ? action=updateproduct&productid=8 &productname=sony&manufacturer=china	Request count:1 Bytes sent:482 Bytes received:1,877	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:1,284	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:2,218 Bytes received:5,913	Triggers the Server-side action event, completes the save operation, and needs to postback the entire page.

Add Product :

Request	Data traffic	Description
Prototype
Prototypeserverresponse.aspx ? action=addproduct&productname=sony &manufacturer=china	Request count:1 Bytes sent:467 Bytes received:2,050	Transfer ProductName and other parameters, complete the increase 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:1,364	Invoke the remote RPC interface, complete the increment operation, and get the Product list in HTML format.
Atlas
Atlasdemo.aspx	Request count:1 Bytes sent:2,249 Bytes received:6,533	Triggers the Server side action event, completes the increment operation, needs to postback the entire page.

Conclusion:

As you can see from the comparison table above, Atlas still needs to postback the entire page in the absence of a refreshing display, except that the process is handled asynchronously, and when the server side completes the response, the Atlas client completes the page according to the Partial-page The update. So for any local page operation, the postback of the page is still needed. If the volume of data on the page is particularly large, Atlas will result in lower efficiency.

Prototype and Ajax.NET Pro have little difference in the amount of data.

B , development efficiency

Atlas is tightly integrated with. NET controls. If you use Atlas, you can maximize the reuse of. NET controls, such as data display controls.

Using Prototype, you need to submit request requests to the Server in Javascript code, and write the corresponding callback function to complete the parsing and rendering of Response results.

Using Ajax.NET Pro, you can directly call the Server's class method (remote RPC), but you still need to write the corresponding callback function to complete the parsing and rendering of Response results.

C , Server the data format returned by the end

Ajax.NET Pro provides an interface and method that is serialized into JSON format.

The data format returned by the server side can be simple Text, or an XML document, or be formatted as JSON by Ajax.NET Pro serialization.

Three issues to be aware of using Ajax

Suspend.

Four reference materials

Micorsoft Fiddler HTTP debugger:http://www.fiddlertool.com/fiddler/

prototype:http://prototype.conio.net/

Ajax.NET pro:http://www.ajaxpro.info/

Atlas Beter 2:http://ajax.asp.net/default.aspx?tabid=47

Click here to download demo source
Click here to download demo Web Site