Uncover the secrets of AJAX (AJAX personal learning notes) page 1/5

AJAX is the crystallization of multiple computer technologies. Its names come from the four initials Asynchronism (asynchronous), JavaScript, And, And XML, that is, XML technology for Asynchronous JavaScript request processing. A simple description is the technology that asynchronously transmits webpage partial refresh data. AJAX is very popular. If AJAX technology is not used in WEB programming, it can be said that it is not a perfect design. Just like black and white TV sets and color TV sets, AJAX is the latter and a technology update revolution!
I have not studied AJAX for a long time. I only learned about it for more than 10 days. I can't say I have mastered it for a hundred percent, but I also understand it. Now I want to share my learning experience with you.
I. Learning Experience:
There are many articles and books on AJAX technology and many videos. It can be said that AJAX is the hottest technology in the past two years. However, most books do not cover all the details, or the focus is not prominent. This gives you a feeling of cloudization! Among them, there are many books written by well-known professors such as Tsinghua University. I have my own personal experience in this regard. I first downloaded the ajax video tutorial of Chuanzhi podcast, but I couldn't read it after reading a few sections. Later I bought another AJAX technology book, A thick 60 yuan copy. It was also very hot. After eight days of patience, I couldn't see it anymore. I felt that AJAX technology was very profound and could not really comprehend it, so I gave up, go hiking, swimming, going to the sea, chatting with Meimei, and playing games, and live a miserable and happy life. Later, the weather was cool and I remembered AJAX in my spare time. So I bought a few bottles of ice beer, a few bags of small food, a bag of melon seeds, and watched and drank at home! I didn't think of it, but it was a hundred things. AJAX technology was mastered in a day, and I had my own unique understanding of AJAX technology: AJAX applications are very simple, you do not need to use encoding or a small amount of encoding.

Ii. learning experience and key points
Language and tool software used to learn the application: I learned the C # language by myself, so the development environment is under the NET Framework (ASP. NET), and the development tool is VS2008 (VS2005 can also be used ).
Key points:
The installation of AJAX controls, especially the installation of AJAX Control Toolkit, is detailed in my blog log. I will not talk about it here. The only reminder is: VS2008 and VS2005 are somewhat different in the installation and use of AJAX controls, but they are not big!
1. Introduction to five basic AJAX controls
This is the most basic and practical AJAX control provided by Microsoft. With it, you do not need to write any code, but simply set the relevant attributes to implement AJAX asynchronous data update. This is the most exciting thing for those who want to learn AJAX technology. It is a silly application with good results. If you want to apply AJAX technology to a previously written program, you can use these five basic controls within ten minutes. The following details:
(1) ScriptManager is the script manager responsible for managing the relevant script resources of Ajax controls on the page. You can only have one ScriptManager on a Web page. To use the ASP. NET Ajax control in any case, you must add a ScriptManager on the page. (This control generally does not need to be set. If you want to know the specific owner and event, you can find the relevant information .)
The foreground code of the ScriptManager control is as follows:
Copy codeThe Code is 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 describes some error-prone attributes and methods:
1. ScriptMode attribute: Specify the sending mode. An enumeration attribute with four values: Auto, Debug, Release, and Inherit.
Auto: default value. The script sending mode is determined based on the value of the retail configuration section in Web. config. If the retail node value is true, the publish mode script is sent to the client; otherwise, the debug version is sent.
Debug: When the retail attribute value is false, the ScriptManager control sends the Debug script to the client.
Release: When the retail attribute value is false, the ScriptManager control sends the Release version script to the client.
Inherit: it is used in the same way as Auto, but generally not.
2. Services properties: used to specify the WEB Service referenced on the current page. You can use the <asp: ServiceReference> node to register a WEB service. The ScritpManage control generates a client proxy for each registered Web service.

(2) ScriptManagerProxy is an extension of ScriptManager. It is a script manager used in projects that use master pages or user controls. When ScriptManager is used on the project page, you can use a ScriptManagerProxy in the master page or user control to proxy ScripManager. The attributes are basically the same as those of the ScriptManager control.

(3) UpdatePanel is the most widely used Ajax control. If you embed UpdatePanel into a page, you can perform partial page refresh. The page can contain multiple updatepanels, And the UpdataPanel can also be nested with each other. (Application Focus)
Updatapanel is the control for partial page refreshing. The front-end code of the UpdatePanel control is as follows:
Copy codeThe Code is as follows:
<Asp: UpdatePanel runat = "server" ID = "udp1">
<ContentTemplate> // Template
Content Area in the content Template
</ContentTemplate>
<Triggers> // set the method for submitting the server: asynchronous or synchronous
<Asp: AsyncPostBackTrigger ControlID = "" EventName = "/> // specifies the asynchronous mode, controlID (Control ID that triggers update), and EventName (name of the event that triggers update)
<Asp: PostBackTrigger ControlID = ""/> // specifies the synchronous mode. If you do not set this mode, you can skip this line of code. Because ajax implements asynchronous updates, synchronization will lose its meaning!
</Triggers>
</Asp: UpdatePanel>

Important attributes and events:
ChildrenAsTriggers: When the attribute value of UpdateMode is Conditional, sets whether the asynchronous request server of the Child control in UpdatePanel will cause UpdatePanel updates.
RenderMode: indicates that UpdatePanel is interpreted as the HTML code style at the front end. The default value is Block, which is interpreted as <div> </div>. When this attribute is set to Inline, updatePanel is interpreted as <span> </span>
Triggers: Set the controls and events that trigger the current UpdatePanel update. (This is important)
UpdateMode: Set the update modes of the current UpdatePancl: Always and Conditional. When it is set to Always, UpdatePanel will be updated regardless of whether a Trigger exists. When it is set to Conditional, only when Trigger or ChildTrigger is set for the current UpdatePancl, the current UpdatePanel control will Update or submit the page, or when the server calls Update () updatePanel is updated only when the method is used.
Attributes and events that require special instructions:
Trigger attribute: indicates the submission server method used by the current UpdatePanel, which can be synchronous or asynchronous. For synchronous submission, you only need to specify the ID of the control that triggers the submission. synchronous submission will be submitted throughout the page. For Asynchronous submission, you must set the Control ID and server-side events that trigger asynchronous submission.

Multiple updatepanels coexist on the page: when multiple updatepanels coexist on the page, you must set the UpdateMode attribute of all UpdatePanel controls on the page to Conditional. Otherwise, if any UpdatePanel local update is triggered, updatePanel on all pages will be updated. The reason is simple. The UpdateMode of all UpdatePanel controls on the page is Always by default.

Nested use of multiple UpdatePanel: when multiple UpdatePanel controls are nested for use, the UpdatePanel updates in parallel do not affect each other. However, when two updatepanels are nested with each other, the UpdatePanel in the inner layer will not be affected when the UpdatePanel is updated locally. However, when the outer UpdatePanel is updated locally, all the UpdatePanel nested inside it will be updated.

(4) as the name suggests, UpdateProgress executes the work during partial page refresh. UpdateProgress provides user status friendly information during the refresh process, such as prompting the customer that "loading data.
The front-end code of the UpdateProgress control is very simple, as shown below:
Copy codeThe Code is as follows:
<Asp: UpdateProgress runat = "server" ID = "upg1">
<ProgressTemplate> // Template

<Div alige = "ecnter" style = "width: 1100px"> // the following code shows the information or image part.

</Div>
</ProgressTemplate>
</Asp: UpdateProgress>

Key attributes:
AssociatedUpdatePanelID: Set the UpdatePanel ID that triggers UpdateProgress. It is generally used when multiple updatepanels exist in the page.
DisplayAfter: How many milliseconds the progress information displays.
DynamicLayout: Boolean attribute that specifies whether the current UpdateProgress is dynamically drawn, rather than being directly interpreted on the foreground.


(5) In WinForm development, many programmers are overwhelmed by the functions of the Timer control. The Timer control can regularly trigger some events, such as submitting the entire page or refreshing some pages.
The definition of the Timer control is quite simple. You only need to declare the control. The Code is as follows:
<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.
Interval: Interval event in ms when the Timer control triggers the Tick event.
Tick: When the Enabled attribute is set to true, the Timer control executes the event at intervals specified by the Interval attribute.

Tip: Generally, the Timer control is placed in the UpdatePanel. Otherwise, the interval will be reset during partial update. Front-end code:
Copy codeThe Code is 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>
Content Area in the content Template
</ContentTemplate>
<Triggers>
<Asp: AsyncPostBackTrigger ControlID = "Timer1" EventName = "Tick"/>
</Triggers>
</Asp: UpdatePanel>

2. Basic principles of AJAX and case code
AJAX technology: In my understanding, it is the technology for passing parameters in front and back of javascrui. The parameters here can be parameter values or data streams. Learning the basic principles of AJAX helps you to extend the application of AJAX controls.
The following lists the two most commonly used AJAX methods for learners to understand the principles of AJAX applications. If you cannot understand some of the code, you can find the relevant commands and materials!
Method 1:
In daily ASP. NET Ajax implementation, this method is the simplest and most commonly used development method. The typical implementation steps are as follows:
Create an XMLHttpRequest object to request a specific Ajax processing page.
The Ajax processing page receives asynchronous requests from the XMLHttpRequest object in the Page_Load event.
The Ajax processing page responds to the request content. You can use this. Response. Write or this. Response. OutPutStream to put the Response text or Response XML Document into the Response object.
The front-end JavaScript script uses the responseText or responseXml of the XMLHttpRequest object to receive the server response and dynamically modify the page content to implement Ajax asynchronous refreshing applications.