pageloadingandpageloaded.aspx

ajax实例,可以了解ajax的原理

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="PageLoadingAndPageLoaded.aspx.cs"
    Inherits="ClientScripting_SysWebForms_PageLoadingAndPageLoaded" Title="PageLoading和PageLoaded" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="always">
        <ContentTemplate>
            <fieldset>
                <legend>UpdatePanel1</legend>
                <%= DateTime.Now.ToString() %>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="always">
        <ContentTemplate>
            <fieldset>
                <legend>UpdatePanel2</legend>
                <%= DateTime.Now.ToString() %>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel runat="server" ID="UpdatePanel3" UpdateMode="always">
        <ContentTemplate>
            <fieldset>
                <legend>UpdatePanel3</legend>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>

    <!--修改指定元素的背景色为指定颜色，并在指定的时间后把该元素的背景色变为白色-->
    <script type="text/javascript" language="javascript">
        Type.registerNamespace("Demo");
        
        Demo.BackgroundAnimation = function(color, duration) 
        {
            this._color = color;
            this._duration = duration;
        }
        Demo.BackgroundAnimation.prototype = 
        {
            animatePanel: function(panelElement) 
            {
                var s = panelElement.style;
                
                s.backgroundColor = this._color;

                window.setTimeout
                (
                    function() { s.backgroundColor = 'white'; },
                    this._duration
                );
            }
        }
        Demo.BackgroundAnimation.registerClass('Demo.BackgroundAnimation', null);
    </script>

    <script type="text/javascript" language="javascript">
    
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);

        function pageLoadingHandler(sender, e)
        {
            // panelsUpdating - 准备更新的UpdatePanel数组（div元素）
			var refreshingPanels = e.get_panelsUpdating();
			
			for (var i = 0; i < refreshingPanels.length; i++)
			{
			    alert(refreshingPanels[i].id);
			}
        }
        
        // 实例化Demo.BackgroundAnimation
        var panelUpdatedAnimation = new Demo.BackgroundAnimation('red', 1000);

		function pageLoadedHandler(sender, e)
		{
		    // panelsUpdated - 更新完毕的UpdatePanel数组（div元素）
			var refreshedPanels = e.get_panelsUpdated();
			
			for (var i = 0; i < refreshedPanels.length; i++)
			{
			    // 调用Demo.BackgroundAnimation对象的animatePanel方法
			    panelUpdatedAnimation.animatePanel(refreshedPanels[i]);
			}
		}
		
    </script>

</asp:Content>