Ajax Selection and Application in the. NET2.0 environment (Demo source code download is provided)

Source: Internet
Author: User
Tags comparison table

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.