客户端[浏览器]的页面生命周期

引言

本文解释了 Ajax 脚本管理器和更新控件的客户端生命周期。它还解释了由于 Ajax 控件而发生部分回发时的页面生命周期，以及开发人员对事件的控制。

客户端[浏览器]的页面生命周期

我们都知道正常的 ASP.NET 页面生命周期事件。Ajax 控件将在此基础上增加更多事件。这些事件更侧重于客户端而不是服务器端。正常的页面事件发生在服务器端，而这些 Ajax 事件发生在客户端。我不会过多讨论服务器页面事件，我们将关注客户端的页面事件。

Sys.Application 类

这些事件与 Sys.Application 类相关，该类提供了一个运行时对象来处理客户端事件并管理客户端组件。此对象无需创建实例即可访问其所有成员。

• pageInit
• pageLoad
• pageUnload

pageInit

pageInit 事件仅在页面首次加载时和每次正常回发时发生一次。当使用更新面板或任何其他 Ajax 方法发生部分回发时，此事件不会被调用。它发生在服务器 Page Render 事件之后。此外，在所有与 ScriptManager 相关的脚本加载之后，但在客户端创建对象或控件之前。如果我们在客户端创建任何组件，这是一个编写首次初始化代码的好地方。我们可以通过向 pageInit 事件添加函数处理程序来掌握此事件。通过简单地添加处理程序，我们的函数将在 init 事件之后被调用。由于页面未加载，我们无法引用页面中的任何对象或控件。我们可以向这些事件添加任意数量的处理程序。我们还可以删除现有处理程序。语法如下所示：

Sys.Application.add_init(MyInit);
//Sys.Application.remove_init(MyInit);

function MyInit()
{
    alert("MyInit added to page init");
}

pageLoad

pageLoad 事件发生在客户端 pageInit 事件之后。在 pageInit 事件之后，所有对象或控件都创建完毕，然后将调用 pageLoad。它在每次页面加载时发生，无论是正常渲染还是部分渲染。我们可以在事件中引用任何对象，在此事件之后，页面会提供给用户。与 pageInit 事件类似，pageLoad 事件也将接受在此事件之后添加的处理程序。语法几乎相似，如下所示：

Sys.Application.add_load(MyLoad);
//Sys.Application.remove_load(MyLoad);

function MyLoad()
{
    alert("MyLoad added to page load");
}

pageUnload

pageUnload 事件仅在页面重定向到另一个页面或浏览器窗口关闭时发生一次。重定向必须通过正常回发或使用 Response.Redirect 方法发生，如果我们尝试使用 Server.Transfer 重定向，客户端将不知道页面重定向，它会抛出一个名为 PageRequestManagerParserErrorException 的客户端异常。此事件与服务器 Page Unload 事件无关，服务器 Page Unload 事件发生在服务器端的 Page Render 之后，与客户端无关。届时所有控件都将加载到浏览器[客户端]中。pageUnload 事件将接受在此事件之后添加的处理程序。语法如下所示：

Sys.Application.add_unload(MyUnload);
//Sys.Application.remove_unload(MyUnload);

function MyUnload()
{
    alert("MyUnload added to page unload");
}

附加信息

事件处理程序和其他代码应写入单独的 js 文件中，并应在 ScriptManger 控件的脚本部分中指定。此处，名为“UsingJScript.js”的 js 文件已附加到 ScriptManger 控件，如下所示：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
    <Scripts>
        <asp:ScriptReference Path="UsingJScript.js" />
    </Scripts>
</asp:ScriptManager>

Sys.WebForms.PageRequestManager 类

此类负责部分回发。此对象将自行启动，要在客户端获取此对象，页面应具有 ScriptManager 和至少一个 UpdatePanel。此对象还具有某些将参与客户端页面生命周期的事件。该类的全名及其命名空间是 Sys.WebForms.PageRequestManager。让我们看看与此相关的事件：

• initializeRequest
• beginRequest
• pageLoading
• pageLoaded
• endRequest

initializeRequest

initializeRequest 事件将在用户触发异步部分回发后被触发。它准备了要发送到服务器以获取响应的请求。部分回发可以在此阶段中止或取消。我们可以像任何其他生命周期事件一样向此事件添加处理程序。我们的处理程序将在调用 initialRequest 之后被调用。initializeRequestEventArgs 提供了有关事件的更多详细信息，我们将其引用作为事件的参数。代码片段如下所示：

//This statement should be inside pageInit or pageLoad event.
//adds the handler MyIntializeRequest to the intializeRequest event
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(MyIntializeRequest);

//removes the handler MyIntializeRequest from the intializeRequest event
//Sys.WebForms.PageRequestManager.getInstance().remove_initializeRequest
//(MyIntializeRequest);

function MyIntializeRequest(sender,args)
{
    alert("My Request is getting initalized");
}

beginRequest

beginRequest 在 initializeRequest 之后，以及异步回发处理之前被触发。它负责将请求发送到服务器。我们可以向此事件添加处理程序。在请求发送到服务器之前，处理程序会首先被调用。beginRequestEventArgs 提供了有关事件和与其相关的其他对象的更多详细信息。通常，此事件用于显示图形或任何消息，以保持用户交互，直到请求在服务器中处理完毕。在此特定事件之后，服务器负责处理请求。代码片段如下：

//This statement should be inside pageInit or pageLoad event.
//adds the handler MyBeginRequest to the beginRequest event
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(MyBeginRequest);

//removes the handler MyBeginRequest from the beginRequest event
//Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(MyBeginRequest);

function MyBeginRequest(sender,args)
{
    alert("My Request is ready about to sent to server");
}

pageLoading

pageLoading 是服务器处理完成后调用的第一个事件，这意味着在服务器的页面渲染事件之后。当它被调用时，客户端尚未加载新响应，它正在等待响应对象。我们可以在此处引用它进行任何操作。它还提供了在部分回发后将要修改的面板的引用。如果我们需要在更新数据放置到相应位置之前发生任何动画或转换，pageLoadingEventArgs 会提供有关事件和与其相关的其他对象的更多详细信息。通常，我们在此部分进行一些控件操作，然后将其加载到页面中。代码片段如下：

//This statement should be inside pageInit or pageLoad event.
//adds the handler MyPageLoading to the pageLoading event
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(MyPageLoading);

//removes the handler MyPageLoading from the pageLoading event
//Sys.WebForms.PageRequestManager.getInstance().remove_pageLoading(MyPageLoading);

function MyPageLoading(sender, args)
{
    alert("My page is started loading");
}

pageLoaded

pageLoaded 是在页面所有内容因同步或异步回发而更新后触发的事件。我们可以在此处清除在 beginRequest 事件中启动的图形或动画。我们使用 pageLoadedEventArgs 类获取响应以及与回发相关的其他对象和控件的引用。我们也可以在此处进行动画或过渡，而不是在 pageLoading 事件中。代码片段如下：

//This statement should be inside pageInit or pageLoad event.
//adds the handler MyPageLoaded to the pageLoaded event
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(MyPageLoaded);

//removes the handler MyPageLoaded from the pageLoaded event
//Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(MyPageLoaded);

function MyPageLoaded(sender, args)
{
    alert("My page is loaded");
}

endRequest

endRequest 事件将是客户端回发周期中触发的最后一个事件。在此之后，控制权将返回给用户。此事件可用于通知用户请求的状态。此事件可用于记录错误。作为 try catch 块中的 finally，无论回发成功还是失败，此事件都将被调用。可以使用 endRequestEventArgs 类引用与此相关的对象和其他数据。代码片段如下所示：

//This statement should be inside pageInit or pageLoad event.
//adds the handler MyEndRequest to the endRequest event
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyEndRequest);

//removes the handler MyEndRequest from the endRequest event
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(MyEndRequest);

function MyEndRequest(sender, args)
{
    alert("My Request has end");
}

附加信息

我们可以在客户端 pageInit 或 pageLoad 事件中引用此对象。我们无法在第一时间获取此引用，只有在脚本加载后才能获取。我们可以控制对象或获取对象的引用。与此相关的代码通常在 pageInit 或 pageLoad 事件中编写。错误处理应在 endRequest 事件中完成。如果发生任何错误，我们将在此事件参数中获取错误的引用。当服务器抛出错误时，pageLoading 和 pageLoaded 事件将被跳过，并直接触发此事件。我们将在下一篇文章中讨论这些问题以及每个事件的相应 Args 类。