Microsoft Asp.Net Ajax框架入门(2) 页面的客户端生命周期
VS2008、Asp.Net 3.5
来看一下页面的客户端生命周期。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientLifeCycle.aspx.cs" Inherits="Tristan.AjaxCenter.B.ClientLifeCycle" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptMgr" runat="server"></asp:ScriptManager>
</div>
</form>
<script type="text/javascript">
window.onload = function() {
alert("window loading");
}
Sys.Application.add_init(initIt);
Sys.Application.add_load(loadIt);
function initIt() {
alert("init");
}
function loadIt() {
alert("load");
}
</script>
</body>
</html>
来看一下页面的客户端生命周期。
我们都知道Asp.Net页面的服务端有一个生命周期，而在Microsoft Asp.Net Ajax Core Library的作用下（始作俑者是Sys.Application对象），页面的客户端也有了一个所谓的生命周期。看图（源自Asp.Net Ajax In Action）：
页面加载
Step1 打开页面
Step2 window.onload事件触发
Step3 Sys.Application对象拦截到window.onload事件，然后触发自身的init事件，处理这个事件的时候，我们要做的是将客户端所有需要用到的Component进行初始化
Step4 Sys.Application的init事件处理完之后，触发自身的load事件，这时候所有Component都已初始化完毕，你可以对他们进行必要的操作了
页面卸载
Step1 window.unload事件触发
Step2 Sys.Application对象拦截到window.unload事件，然后触发自身的unload事件，处理这个事件的时候，我们要做的是将所有该释放的资源和我们添加到DOM元素里的Event Handlers
生命周期给我们带来了什么？
我们的所有客户端Component的初始化都在Sys.Application的init Event Handler里面进行。
我们对Component的操作和其它脚本都从Sys.Application的load事件开始，这样就可以保证我们将要使用的Component不会在初始化前就被使用。
更安全了。
写一个简单页面看看执行顺序
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientLifeCycle.aspx.cs" Inherits="Tristan.AjaxCenter.B.ClientLifeCycle" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> </head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="scriptMgr" runat="server"></asp:ScriptManager> </div> </form> <script type="text/javascript"> window.onload = function() {
window.onload 
alert("window loading"); } Sys.Application.add_init(initIt); Sys.Application.add_load(loadIt); function initIt() { alert("init"); } function loadIt() { alert("load"); } </script></body></html>