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
3 problems that should be paid attention to in the process of applying Ajax
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
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.
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.
|
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.
|
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.
|
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.
|
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.
|
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
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