Uncover Ajax Mystery Veil (Ajax personal Learning Notes) 1th/5 page _ajax related

Source: Internet
Author: User

Ajax technology is the crystallization of a variety of computer technology, its name comes from: asynchronism (asynchronous), JavaScript, and, XML, the first letter of 4 words, that is, asynchronous JavaScript request processing XML technology. The simple description is the technology of the local refresh of the data asynchronous transmission Web page. Ajax is very popular, web design, if not the application of Ajax technology, it can be said to be imperfect. Like Black-and-white television and color TV, Ajax is the latter, is a technological renovation of the revolution!
I learn Ajax time is not long, only more than 10 days, can not say 100% master, but also some understanding. Now put your own learning through and experience to write down, and June sharing.
First, study through:
Ajax technology and many articles and books, video also many, can be said to be the hottest technology in the last two years. But most of the books introduced by the whole but not fine, or focus is not prominent, give a person a Yunshan feeling! There are many well-known professors such as Tsinghua University written books. I have this aspect of personal experience, I first downloaded the biography of Intelligence podcast Ajax Video tutorials, read a few verses can not go on, and then bought an AJAX technology book, a very thick 60 yuan. is also very hot, the patient looked at eight days really can't see down, feel Ajax technology is very abstruse, can't really comprehend, give up, go mountaineering, swim, sea, and Meimei chat, game, live a more rotten happy life. Later, the weather is cool, spare time and think of Ajax this matter, so they bought a few bottles of cold beer, a few bags of small food, a bag of melon seeds, at home while watching while drinking, very comfortable! Unexpectedly, this look is Itong, Ajax technology in the one-day time, but also has its own unique understanding of AJAX technology: Ajax application is very simple, can not encode or a small number of coding.

Second, learning experience and focus
Learning the application of language and tools software: I am self-study of the C # language, so the development environment is NET framework (asp.net), development tools using VS2008 (VS2005 can also).
Learning Focus:
The installation of Ajax controls, especially the AJAX Control Toolkit part of the installation, see my blog log, there are more detailed introduction, here is not much to say, the only reminder is: VS2008 and VS2005 in the AJAX control installation and use of a little different, but not big!
1. Introduction to 5 basic controls for Ajax controls
It is the most basic of the five controls that Microsoft offers, and the most practical. Use it, you can not write any code, but simply set the relevant properties, you can achieve the AJAX asynchronous data update effect. This is to learn the Ajax technology of the most exciting, is a kind of fool-type application, the effect is good. If you want to apply Ajax technology to a previously written program, you can use these five basic controls in more than 10 minutes. Here is a specific description:
(1) ScriptManager is the script manager responsible for managing the scripting resources of Ajax controls on the page. There can be only one ScriptManager in a Web page, and in any case using a ASP.net AJAX control must add a ScriptManager to the page. (This control generally does not need to be set, if you want to know specific genera and and events, you can find information.) )
The foreground code form for the ScriptManager control is as follows:

Copy Code code as follows:

<asp:scriptmanager id= "ASM1" runat= "Server" >
<authenticationservice path= ""/>
<profileservice loadproperties= "" Path= ""/>
<Scripts>
<asp:scriptreference/>
</Scripts>
<Services>
<asp:servicereference path= ""/>
</Services>
</asp:ScriptManager>

The following highlights some of the properties and methods that are prone to error:
1, ScriptMode property: Specify Send mode. An enumeration property, four values: Auto, Debug, release, Inherit.
Auto: Default value. That is, the mode of sending the script is determined according to the value of the retail configuration section in Web.config. If the retail node value is true, the script for the publish mode is sent to the client, otherwise the debug version is sent.
Debug: When the Retail property value is False, the ScriptManager control sends the debug version of the script to the client.
Release: When the retail property value is False, the ScriptManager control sends the version of the script to the client.
Inherit: Same as auto usage, but not generally.
2. Services properties: To specify the Web service referenced by the current page, use the <asp:ServiceReference> node to register the Web service, and the Scritpmanage control will generate a client proxy for each registered Web service.

(2) ScriptManagerProxy is an extension of ScriptManager, a script manager that is used specifically for projects that use master pages or user controls. When ScriptManager is used on the engineering page, a scriptmanagerproxy can be used to broker Scripmanager work in a master page or in a user control. property is basically the same as the ScriptManager control.

(3) UpdatePanel is the most widely used AJAX control, embedded in the page UpdatePanel, you can achieve a local refresh of the page. There can be multiple updatepanel,updatapanel in a page, or you can nest each other. (Application emphasis)
Updatapanel is the control that implements the local refresh of the page, and the foreground code for the UpdatePanel control looks like this:
Copy Code code as follows:

<asp:updatepanel runat= "Server" id= "UDP1" >
<ContentTemplate>//Templates
The area where content templates place content
</ContentTemplate>
<Triggers>//Set the way to submit the server: asynchronous or synchronous
<asp:asyncpostbacktrigger controlid= "eventname="/>//Refers to setting the asynchronous mode and ControlID (the control ID that raises the update) and EventName (raising the update event name)
<asp:postbacktrigger controlid= "" "/>/refers to the synchronization mode, generally do not set this, you can not write this line of code, because the AJAX implementation is asynchronous update, synchronization has lost its meaning!
</Triggers>
</asp:UpdatePanel>

Important Properties and Events:
Childrenastriggers: When the UpdateMode property value is conditional, setting the asynchronous request server for the child controls in the UpdatePanel causes the UpdatePanel to be updated.
Rendermode: Indicates that UpdatePanel is interpreted to the foreground HTML code style, the default value is block is interpreted as <div></div&gt, and when the property is set to inline, UpdatePanel is interpreted as < Span></span>
Triggers: Sets the controls and events that trigger the current UpdatePanel update. (This is the point)
UpdateMode: Sets the current UPDATEPANCL update mode: Always and conditional. When set to always, UpdatePanel is updated regardless of whether the current exists trigger. When set to conditional, the current UpdatePanel control updates or submits the page only if the current UPDATEPANCL is set trigger or Childtrigger, or when the server-side calls update () The UpdatePanel is updated when the method is not.
Attributes and events that require special description:
Trigger property: Indicates the type of submission server that the current UpdatePanel uses, with either synchronous commit or asynchronous submission of two kinds. A synchronous commit only needs to specify the control ID that triggers the submission, and the synchronization submission will submit the entire page. Asynchronous commit needs to set the control ID and server-side events that trigger the asynchronous commit.

Multiple UpdatePanel Coexistence on a page: When multiple UpdatePanel coexist on a page, you need to set the UpdateMode property of all UpdatePanel controls on the page to conditional. Otherwise, whenever any one of the UpdatePanel local updates is triggered, the UpdatePanel on all pages will be updated. The reason is simple, the UpdateMode default for all UpdatePanel controls on the page is always.

Nested use of multiple UpdatePanel: When multiple UpdatePanel controls are nested, they are not affected when they are in a parallel UpdatePanel update. However, when two UpdatePanel are nested with each other, the UpdatePanel local update in the inner layer does not affect the UpdatePanel everywhere, but the outer UpdatePanel local update updates all the UpdatePanel nested inside it.

(4) As the name implies UpdateProgress to perform the page local refresh process work. UpdateProgress can provide a friendly information about the user's state during the refresh process, such as "Loading data" to the customer.
The UpdateProgress control foreground code is very simple, as follows:
Copy Code code as follows:

<asp:updateprogress runat= "Server" id= "UPG1" >
<ProgressTemplate>//Templates

<div alige= "Ecnter" style= "width:1100px" >//The following code is the part of the message or picture displayed

</div>
</ProgressTemplate>
</asp:UpdateProgress>

Key attributes:
Associatedupdatepanelid: Sets the ID of the UpdatePanel that triggers the updateprogress, which is generally used in situations where there are multiple UpdatePanel on the page.
DisplayAfter: The number of milliseconds the progress information displays.
Dynamiclayout: Boolean property that sets whether the current updateprogress is dynamically drawn, rather than directly interpreted at the foreground.


(5) In the development of WinForm, many programmers are dumped by the function of the timer control. The timer control can trigger events on a regular basis, such as submitting an entire page or refreshing part of a page.
The timer control is quite simple to define, just declare the control, and the code looks like this:
<asp:timer runat= "Server" id= "timer1" interval= "1000" ontick= "Timer1_Tick" ></asp:Timer>
Key attributes:
Enabled: Whether to start the Timer control and trigger the Tick event.
The Interval:timer control triggers the interval event of the Tick event, the unit Ms.
The Tick:timer control executes the event at the specified time of the Interval property when the Enabled property is set to true.

Tip: Generally put the timer control in the UpdatePanel place, or local update will reset the interval time. Foreground code:
Copy Code code as follows:

<asp:scriptmanager id= "Scriptmanagel" runat= "Server" ></asp:ScriptManager>
<asp:timer id= "Timer1" runat= "Server" ontick= "Timer1_Tick" interval= "1000" >
</asp:Timer>
<asp:updatepanel runat= "Server" id= "UDP1" >
<ContentTemplate>
The area where content templates place content
</ContentTemplate>
<Triggers>
<asp:asyncpostbacktrigger controlid= "Timer1" eventname= "Tick"/>
</Triggers>
</asp:UpdatePanel>

2, Ajax fundamentals and Case code
Ajax technology: My understanding is the technique of JAVASCRITP parameter transfer, where the parameter can be a parameter value or a data stream. Learning the fundamentals of Ajax and helping to extend the application of controls to Ajax is not a missing part.
Here are two Ajax most common ways for learners to realize the principles of AJAX application. As a scholar to some of the code can not understand, to find relevant orders and information!
Application Mode One:
In everyday asp.net Ajax implementations, this is the simplest and most common way to develop. The typical implementation steps in this way are as follows:
Create a XMLHttpRequest object that requests a specific AJAX processing page.
Ajax processing pages receive asynchronous requests for XMLHttpRequest objects in the Page_Load event.
The AJAX processing page responds according to the requested content, and the response can take this. Response.Write or This.Response.OutPutStream puts the XML document of the response text or response into the Response object.
The foreground JavaScript script receives the server response by XMLHttpRequest the object's ResponseText or Responsexml, and dynamically modifies the page content to achieve Ajax asynchronous no refresh application.
Current 1/5 page 12345 Next read the full text
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.