Topic: Ajax Selection and Application in. NET2.0 EnvironmentProblems to be Solved:1. Ajax application framework selection and performance comparison 2. How to Apply Ajax 3. problems that should be paid attention to during Ajax applicationInvestigator:Jimmy. KeTime:A Demo of 2006-11-13 indicates that the Ajax Demo Web Site is a complete. NET Website, which contains five ASPX pages and their corresponding CS files. To facilitate the comparison, three Ajax application methods are used in the Demo: one is to use the Atlas application framework provided by Microsoft, and the other is to use Ajax. NET Professional open-source framework. The third is to use a pure Javascript package Prototype for Ajax. The associated files are shown in the following table:
Application Method |
File Name |
Description |
|
Default. aspx |
Home page navigation, listing links to four Demo pages |
Atlas |
AtlasDemo. aspx |
Use Atlas to implement the CRUD function of Product, and use UpdatePanel to complete the refreshing operation. |
|
|
|
AjaxPro |
AjaxProDemo. aspx |
Use Ajax. NET Pro to implement the Product CRUD function. The edit and delete operations return true/false results, and the. NET DataGrid control is used to render the page data list (HTML ). |
|
|
|
AjaxProDemoSecond. aspx |
Use Ajax. NET Pro to implement the Product CRUD function. The edit and delete operations return the list of all products. Use the. NET DataGrid Control to display the page data list (HTML ). |
|
|
Prototype |
PrototypeDemo. aspx |
Use Prototype to implement the Product CRUD function. The edit and delete operations return the list of all products. The data of the Client and Server is transmitted in JSON format. |
|
|
|
|
|
Product. cs |
Product entity class |
Ii. Conclusion 1 Ajax application framework selection the core of Ajax applications is to submit Client requests to the Server through the XMLHttpRequest object, and synchronously or asynchronously obtain the Response information returned by the Server, before the Client and Server, data can be transmitted in Text, XML, or JSON format. Prototype and Ajax. NET Pro and Atlas Beta2 represent three main methods of Ajax applications: Prototype is the most widely used remote call toolkit. It uses its own APIs to encapsulate XMLHttpRequest objects, this makes it easier and more intuitive to call XMLHttpRequest. Before XMLHttpRequest, we usually use an embedded IFRAME to implement the effect of sending http requests to a refreshing page. Therefore, these remote call packages must support browsers that do not support XMLHttpRequest to improve browser compatibility. Similar Tools include DOJO. These tools need to set their own URLs and parameters during the application process, and write the corresponding callback function to process the Response results returned by the Server. In PrototypeDemo. aspx, we submit a Request to the Server through Ajax. Request, and process and display the Server's Response results in the callback function. Of course, the URL parameters of each request are different. Ajax. NET Pro is a proxy-based Ajax framework that allows Client Javascript to directly map to Server classes one by one, so that the Client's Javascript can directly access the Server's class object and its APIs. The access method is similar to RPC, and the corresponding API is directly called to complete business operations, you still need to write the corresponding callback function to process the Response result returned by the Server. In AjaxProDemo. aspx. in cs, we add [AjaxPro. ajaxMethod] annotation. In Page_Load, set the class to AjaxPro. utility. registerTypeForAjax (typeof (AjaxProDemo) form to register, so that you can directly call in the Client. Atlas is a component-based application that allows you to quickly create components that contain Ajax functions in the design view of the IDE using the drag method and make the most of them.. NET. These components provide another shortcut for rapid development of Ajax applications. You do not need to write the callback function during the development process. Currently, the UpdatePanel control can be used most frequently by Atlas to achieve no refreshing or partial refreshing of pages. 2 Ajax framework performance and development efficiency comparison
A
, Data trafficThe four samples in the Demo all implement the simple CRUD function for the Product. Here, we use Fiddler HTTP Debugger to test the data volume between the Client and Server during the entire operation.
Load the Product List
:
Request URL |
Data Traffic |
Description |
Prototype |
PrototypeServerResponse. aspx? Action = listProduct |
Request Count: 1 Bytes Sent: 380 Bytes encoded ed: 2,150 |
Obtain the Product list and return it in JSON format. The client uses Javascript scripts to process the presentation. |
Ajax. NET Pro(Second) |
Ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx |
Request Count: 1 Bytes Sent: 493 Bytes encoded ed: 1,392 |
Obtain the Product list, which is returned in HTML format and directly presented by the client. |
Atlas |
AtlasDemo. aspx |
Request Count: 1 Bytes Sent: 827 Bytes encoded ed: 6,391 |
Obtain the Product list, and the Server completes the DataGrid data source binding and rendering. |
Delete Product
:
Request |
Data Traffic |
Description |
Prototype |
PrototypeServerResponse. aspx? Action = deleteProduct & productId = 1 |
Request Count: 1 Bytes Sent: 446 Bytes encoded ed: 1,891 |
Send ProductId to complete the delete operation and obtain the Product list to the Client. |
Ajax. NET Pro(Second) |
Ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx |
Request Count: 1 Bytes Sent: 504 Bytes encoded ed: 1,300 |
Call the remote RPC interface to complete the delete operation and obtain the HTML of the Product list displayed on the Client. |
Atlas |
AtlasDemo. aspx |
Request Count: 1 Bytes Sent: 2,287 Bytes encoded ed: 5,913 |
Trigger the Action event on the Server to complete the deletion operation. Postback is required for the entire page. |
Get Product Info
:
Request |
Data Traffic |
Description |
Prototype |
PrototypeServerResponse. aspx? Action = getProduct & productId = 8 |
Request Count: 1 Bytes Sent: 443 Bytes encoded ed: 403 |
Send ProductId to get the Product information in JSON format. The Client completes parsing and rendering. |
Ajax. NET Pro(Second) |
Ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx |
Request Count: 1 Bytes Sent: 506 Bytes encoded ed: 284 |
Call the RPC interface to obtain the Product information in Text format. The Client completes parsing and rendering. |
Altas |
AtlasDemo. aspx |
Request Count: 1 Bytes Sent: 2,185 Bytes encoded ed: 6,275 |
To trigger the Action event on the Server and obtain the Product information, You Need To 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 encoded ed: 1,877 |
Transmit parameters such as ProductId to save the Product and obtain the Product list. |
Ajax. NET Pro(Second) |
Ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx |
Request Count: 1 Bytes Sent: 549 Bytes encoded ed: 1,284 |
Call the remote PPC interface to save the Product and obtain the Product list in HTML format. |
Atlas |
AtlasDemo. aspx |
Request Count: 1 Bytes Sent: 2,218 Bytes encoded ed: 5,913 |
The Action event on the Server is triggered to complete the save operation. Postback is required for 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 encoded ed: 2,050 |
Send parameters such as ProductName to complete the add operation and obtain the Product list in JSON format. |
Ajax. NET Pro |
Ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx |
Request Count: 1 Bytes Sent: 529 Bytes encoded ed: 1,364 |
Call the remote RPC interface to complete the add operation and obtain the Product list in HTML format. |
Atlas |
AtlasDemo. aspx |
Request Count: 1 Bytes Sent: 2,249 Bytes encoded ed: 6,533 |
To trigger the Action event on the Server and complete the add operation, You Need To Postback the entire page. |
Conclusion: from the above comparison table, we can see that Atlas still needs to Postback the entire page in the process of implementing the refreshing display, but this process is processed asynchronously; after the Server responds, the Atlas client updates the partial-page Based on the page. Therefore, Postback is required for any partial page operation. If the page data size is very large, Atlas will reduce the efficiency. The data volume of Prototype and Ajax. NET Pro is not much different.
B
Development EfficiencyAtlas is closely integrated with. NET controls. If you use Atlas, You can reuse. NET controls to the maximum extent, such as data display controls. To use Prototype, you must submit a Request to the Server in Javascript code, and write the corresponding callback function to parse and render the Response result. Using Ajax. NET Pro, you can directly call the Server class method (remote RPC), but you still need to write the corresponding callback function to parse and present the Response result.
C
, Server
Data format returned by the clientAjax. NET Pro provides interfaces and Methods serialized into JSON format. The data format returned by the Server can be simple Text or XML documents, or serialized into JSON format through Ajax. NET Pro. 3. issues that need to be paid attention to when using Ajax are suspended. Four references 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 the Demo source code
Click here to download Demo Web Site