1 Introduction
With the continuous development of web technology, B/S has been widely used. However, the traditional web development technology reduces the Interactive Performance of web pages. With the rise of Ajax technology, web development technology has gone beyond the traditional development model and has undergone a qualitative leap. The combination of the ASP. NET Ajax framework launched by Microsoft and ASP. Net makes web development easier and easier to use in the. NET environment, and improves page interaction. 2. Principles of the Ajax Engine
Ajax (Asynchronous JavaScript and XML) is a combination of a variety of existing technologies, including JavaScript, XHTML, CSS, Dom, XML, xstl, and XMLHttpRequest. Ajax uses XHTML and CSS to standardize data presentation, uses dom for Dynamic Display and interaction of data, uses XML and xstl for data exchange and processing, and uses XMLHttpRequest object for Asynchronous Data Reading, use JavaScript to bind and process all data. Ajax provides a good solution for Web applications with many interactive operations, frequent data reads and writes, and good data classification. XMLHttpRequest, JavaScript, and Dom are the core of Ajax technology. 2.1 XMLHttpRequest
XMLHttpRequest is the core technology of the Ajax engine. It is the key to the Ajax engine to obtain the required data from the server without refreshing the entire page. On the Microsoft IE platform, XMLHttpRequest is an object of the XMLHTTP component. It allows developers to extend their functions by using the XMLHTTP ActiveX component inside the web page, developers do not have to navigate from the current web page to directly transfer data to databases on the server. This function is very important. It makes up for the disadvantages of stateless connections and eliminates the need to download redundant web data, thus improving the process speed. 2.2 dom (Document Object Model)
Dom is a set of APIS for HTML and XML files. It provides the structure expression of the file, allowing developers to change the content of the file, create a web page and Program A bridge of language communication. All Web developers' operations and file attributes, methods, and events are displayed in the form of objects, which can be used by most browsers today as scripts. A web page built with HTML or XHTML can be considered as a set of structured data, which is blocked in the DOM (Document Object Model), and the DOM provides read and write support for each object in the web page. 2.3 Javascript
Javascript is a cross-platform that is widely used in browsers. Programming Language , Which is often used to make webpage special effects or form verification. In Ajax, JavaScript is the bridge between XMLHttpRequest and Dom, and the main driving force of Ajax engine work. Javascript calls the XMLHttpRequest attributes and methods to obtain server-side data, and CALLS Dom APIs to update web page content, so that the whole page can be refreshed. 3 ASP. NET Ajax Architecture
ASP. NET Ajax is composed of the client script library and server components, which are integrated to provide a powerful development framework. The client script library contains two of the most familiar dynamic web page technologies: ecmascript (JavaScript) technology used across browsers and dynamic HTML (DHTML) web page development technology, and integrate these two technologies into ASP.. NET 2.0 is a server-based development platform. Figure 1 illustrates the ASP. NET Ajax functions that contain client script libraries and server components. 3.1 ASP. NET Server Architecture
ASP. NET Server Components are composed of ASP. NET controls and components. They are used to manage UI and application streams, manage sequences, verify and control scalability. In addition, ASP. NET web services can also be used to access ASP. NET application services, including Form Verification and user verification. 3.2 ASP. NET Server controls
The ASP. NET Ajax control consists of the server side and the client side. Code Construct together to generate actions similar to Ajax. The following are the most common ASP. NET Ajax controls.
● Scriptmanager Control
● Updatepanel Control
● Updateprogress Control
● Timer control 3.3 ASP. NET Ajax client architecture
The ASP. NET Ajax client script library is composed of JavaScript (. JS) files. These. js files provide object-oriented development features. This feature enables continuity and modularization to reach a new level in client scripts. The following are the client levels in ASP. NET Ajax.
(1) compatibility layer of the browser. Provides compatibility for ASP. NET Ajax scripts through the most common browsers.
(2) ASP. NET Ajax core service, which has been extended to JavaScript. For example, classes, namespaces, event handling, inheritance, data types, and Object serialization.
(3) ASP. NET Ajax base class library, including components such as string builders and extended error handling.
(4) network working layer. This layer is used to process Communication Between Web services and applications and manage asynchronous remote method calls.
Figure 1 ASP. NET Ajax server and client architecture 4 ASP. Net Ajax application in Web development 4.1 ASP. NET Ajax Development Environment Figure 2 ASP. NET Ajax Server Control
In web development applications, using vs2005 development tools and ASP. Net ajax1.0 framework for web page development is a recommended method. The vs2005 development tool does not integrate this framework. Therefore, this framework must be installed during web development. You can download it from the official Microsoft website (www.asp.net ). After the download and installation, you can see the ASP. NET Ajax Server Control in the vs2005 development environment. 2.
Note that after the ASP. NET Ajax framework is installed, not all page templates in the vs2005 development environment support Ajax technology. Only the default templates provided by ASP. NET Ajax are supported. For other ASP. NET templates, to support Ajax, you must configure the Web. config file. For specific configurations, refer to the official Microsoft documentation. 4.2 Application of ASP. NET Ajax controls in Web Development
4.2.1 scriptmanager Control
It is used to process all components on the page and partial page updates, and generate relevant client proxy scripts to allow access to Web Services in Javascript. All components must support ASP. net Ajax ASP. the. NET page has only one scriptmanager control, and if you want to use other ASP. net Ajax controls must be supported by the scriptmanager control. In the scriptmanager control, we can specify the required script library, the Web service called through JS, and page error handling. Use <asp: scriptmanager/> to define a scriptmanager. The simple form of scriptmanager is as follows: <asp: scriptmanager id = "scriptmanager1" runat = "server"> <authenticationservice Path = ""/> <profileservice loadproperties = "" Path = ""/> <scripts> <asp: scriptreference/> </scripts> <services> <asp: servicereference/> </services> </ASP: scriptmanager>
By default, the scriptmanager control registers scripts for the Microsoft Script library on the page. This allows the client script library to perform various system extensions, and supports partial page refresh and Web Services callback features. In web application development, the scriptmanager control is required. To use the ASP. NET Ajax control, each. ASPX page must have only one scriptmangeger control. When the. ASPX page and the master page are used as content pages, you only need to place a scriptmanger control on the master page, and the control does not need to be placed on the Content Page.
It is worth noting that the script registered with the scriptmanger control and all event processing scripts on the page must be in the <form> element. Otherwise, the script will not be registered or executed.
4.2.2 updatepanel Control This control can be used to create multiple local updates. Web Application, which is ASP. NET 2.0 Ajax extensions Is a very important control, the strength of which is that you do not need to write any client script, as long as you add a few Updatepanel Control and Scriptmanager Control to automatically implement local updates. One or more Updatepanel And Updatepanel Controls can also be nested. Updatepanel Depends on Scriptmanager Server Control And client pagerequestmanager Class. When scriptmanager When partial page update is allowed, it will be returned to the server asynchronously. Unlike the traditional full page return method, only The page section in will be updated and the HTML will be returned from the server Then, pagerequestmanager By operating the DOM Object To replace the code snippet to be updated. Updatepanel Working principle 3 As shown in.
Figure 3 Working Principle of updatepanel
The simple updatepanel definition is as follows: <asp: updatepanel id = "updatepanel1" runat = "server"> <contenttemplate> </contenttemplate> <triggers> <asp: asyncpostbacktrigger/> <asp: postbacktrigger/> </triggers> </ASP: updatepanel> <Contenttemplate> A tag is used to define the content of updatepanel. It can contain any ASP. NET element. <Triggers> there are two types of attributes: asyncpostbacktrigger and postbacktrigger. Asyncpostbacktrigge is used to specify a server-side control and use the triggered server-side event as the asynchronous update trigger of the updatepanel. The attributes that need to be set include the control ID and the events of the server-side control; postbacktrigger is used to specify a Server Control in updatepanel. The callback triggered by postbacktrigger is not asynchronous, but is still a traditional whole-page delivery. 4.2.3 updateprogress Control When the content in the updatepanel control is refreshed locally, the control can provide information about the refresh status. As mentioned above, one or more updatepanel controls can be placed on one page. However, when the content updated in one updatepanel is slow and you need to wait for a long time, it is easy for users to mistakenly think that the application is in the "dead" state. In this case, the updateprogress control is used to provide the status information when some page content is refreshed. On a page, an updateprogress control can be associated with an updatapanel control or multiple updatepanel controls. The updateprogress control provides the associatedupdate panelid attribute to specify which updatepanel control the updateprogress control displays. The updateprogress control is defined as follows: <asp: updateprogressid = "updateprogress1" runat = "server" associatedupdatepanelid = updatepanel1 "> <progresstemplate> the data is being read. Please wait ...... </Progresstemplate> </ASP: updateprogress> 4.2.4 Timer control This control is used to perform the submit operation within a specified time period. You can use the timer control to submit the entire page or use it with the updatepanel control to perform partial page refresh within the specified time. The timer control is used as a server control to embed Javascript components into the web page. When the interval attribute setting interval of the timer control is reached, the widget will trigger the submit operation from the browser. Property operations set by the timer control are run on the server side and these property values are passed to JavaScript parts. Like other controls, the timer control also depends on the scriptmanager control. The timer control can be placed in both the updatepanel control and the updatepanel control. Its simple definition is as follows: <asp: timer id = "timer1" runat = "server"> </ASP: timer> It is worth noting that if the interval attribute value of the timer control is set to be too small, it will cause serious blocking on the Web server. Therefore, the timer control is considered only when the content to be refreshed on the page is necessary and frequently used. 5 notes for using ASP. NET Ajax controls in the vs2005 Development Environment Various server controls are required during web development using vs2005. Generally, common controls of vs2005 can be used with ASP. NET Ajax controls. Note that the following controls are incompatible with ASP. NET Ajax controls. 5.1 controls incompatible with the updatepanel Control (1) Treeview and menu controls; Web parts controls; and substitution controls. (2) logon controls, such as login, passwordrecovery, change password, and createuserwizard controls. By default, the above control is incompatible with the updatepanel control. When the preceding control is converted to editable, the verification control in the logon control can be compatible with the updatepanel control. (3) verification controls. Such as basecomparevalidator, basevalidator, comparevalidator, customvalidator, rangevalidator, regular expressionvalidator, requiredfieldvalidator and validation summary controls. These controls can also be used with the updatepanel control by default. However, after a web application is released, the above verification function may become invalid. To make these verification controls compatible with updatepanel controls, you must set the Enable clientscript attribute of the preceding verification controls to false. In this way, client scripts cannot be used to perform verification operations on the browser. In the asynchronous commit operation, the verification control performs the verification operation on the server side. (4) The gridview and detailsview controls. By default, the gridview and detailsview controls are compatible with the updatepanel controls. However, if you set the enablesortingandpagingcallbacks attribute to true (the default value is false), the sort and paging functions of the gridview and detailsview controls in updatepanle will not work. ⑸ Fileupload control. By default, the fileupload control is placed in updatepanel and triggered by a control. However, when the triggers attribute of updatepanel is set to PostBack as the triggers control (for example, button,), fileupload can use the upload function, but the whole page cannot be refreshed locally. 5.2 notes for page Jump Under normal circumstances, developing Web applications will inevitably involve passing values and redirecting between pages. If updatepanel contains a page Jump Control (such as a button), the following statements cannot be used in the event of the Control. Otherwise, an exception dialog box is displayed. (1) Call response. Write (): (2) Call response filters: (3) httpmodules: (4) call server. Transfer (). 5.3 issues in the pop-up dialog box after ASP. NET Ajax control is used When using ASP. net Ajax control, if you want to use JS scripts to output some prompt dialog boxes, you will often think of using page. register clientscriptblock or page. registerstartupscript registration. However, no message is displayed on the page. The following statement can be used to solve the problem: Scriptmanager. registerclientscriptblock (updatepanel1, this. GetType (), "click", "alert ('prompt information')", true); the normal alert dialog box is displayed. Note that if there are multiple updatepanels on the page, if the attribute value of updatemode for each updatepanel is "always" (default), you can use the updatepanel instance as the parameter; if the value of updatemode for each updaepanel is conditional, The updatepanel being updated must be used as the parameter for the script to take effect. 6 Summary Because of its unique advantages, Ajax has quickly become a hotspot in Web research and has been widely used in actual development, which greatly expands the efficiency of web development. This article is based on AJAX theory and extended to ASP. net Ajax principles, summed up the use of vs2005 development tools and ASP. net Ajax framework to develop Web applications, which provides a good reference for Web application development. ASP. NET Ajax will be an important tool in web development, and its applications will become more and more extensive. References [1] Yan jianghua. ASP. NET 2.0 development details-use C # [M]. beijing: Tsinghua University Press, 2006 [2] Xie xiaokui. ajax technology and its application in WebGIS. computer and Information Technology [J]. 2007, issue 1 [3] Microsoft Official Website: http://www.asp.net/ajax4254]chen champion .w.asp.net 3rd Ajax-detailed explanation of web development technology [M]. beijing: People's Education Press, http://weblogs.asp.net/leftslipper/archive/2007/02/26/ 2007, China
