Share via

AJAX 클라이언트 수명 주기 이벤트

  • 아티클

업데이트: 2007년 11월

AJAX 사용 ASP.NET 페이지는 ASP.NET 2.0 웹 페이지와 동일한 서버 수명 주기 이벤트를 발생시키며 클라이언트 수명 주기 이벤트도 발생시킵니다. 클라이언트 이벤트를 사용하면 포스트백 및 비동기 포스트백(부분 페이지 업데이트) 모두에 대한 UI를 사용자 지정할 수 있습니다. 클라이언트 이벤트는 브라우저에서 페이지의 수명 기간 동안 사용자 지정 스크립트 구성 요소를 관리하는 데에도 도움이 됩니다.

클라이언트 이벤트는 Microsoft AJAX 라이브러리의 클래스에 의해 발생합니다. 이러한 클래스는 페이지에 ASP.NET AJAX 서버 컨트롤이 포함되어 있는 경우 자동으로 인스턴스화됩니다. 클라이언트 클래스는 이벤트에 바인딩하고 이러한 이벤트에 대한 처리기를 제공할 수 있도록 하는 API를 제공합니다. Microsoft AJAX 라이브러리가 브라우저에 종속되지 않으므로 처리기에 대해 작성하는 코드는 지원되는 모든 브라우저에서 동일하게 작동합니다.

초기 요청(GET 요청) 및 동기 포스트백에 대한 키 이벤트는 Application 인스턴스의 load 이벤트입니다. load 이벤트 처리기의 스크립트가 실행되면 모든 스크립트 및 구성 요소가 로드되어 사용할 수 있게 됩니다. UpdatePanel 컨트롤을 사용한 부분 페이지 렌더링이 설정되어 있는 경우 키 클라이언트 이벤트는 PageRequestManager 클래스의 이벤트입니다. 이러한 이벤트를 사용하면 여러 일반적인 시나리오를 처리할 수 있습니다. 여기에는 포스트백을 취소하고, 하나의 포스트백이 다른 포스트백보다 우선 순위가 높도록 설정하고, 해당 콘텐츠가 새로 고쳐질 때 UpdatePanel 컨트롤에 애니메이션 효과를 주는 작업이 포함됩니다.

클라이언트 이벤트는 페이지를 만들거나 구성 요소를 작성하는 경우에 모두 유용합니다. 페이지 개발자의 경우 브라우저에서 페이지가 로드되거나 언로드될 때 호출되는 사용자 지정 스크립트를 제공할 수 있습니다.

서버 수명 주기 이벤트에 대한 자세한 내용은 ASP.NET 페이지 수명 주기 개요를 참조하십시오.

클라이언트 클래스

ASP.NET AJAX 웹 페이지의 클라이언트 수명 주기 동안 이벤트를 발생시키는 두 개의 주요 Microsoft AJAX 라이브러리 클래스는 Application 및 PageRequestManager 클래스입니다.

Application 클래스는 페이지에 ScriptManager 컨트롤이 포함되어 있는 경우 브라우저에서 인스턴스화됩니다. Application 클래스는 Control 클래스에서 파생되는 Page 서버 컨트롤과 유사하지만 서버 이벤트를 발생시키기 위한 추가 기능을 제공합니다. 마찬가지로 Application 클래스는 Sys.Component 클래스에서 파생되지만 사용자가 처리할 수 있는 클라이언트 수명 주기 이벤트를 발생시킵니다.

페이지에 ScriptManager 컨트롤과 하나 이상의 UpdatePanel 컨트롤이 포함되어 있는 경우 페이지에서 부분 페이지 업데이트를 수행할 수 있습니다(부분 페이지 렌더링이 설정되어 있으며 브라우저에서 지원되는 경우). 이 경우 브라우저에서 자동으로 PageRequestManager 클래스의 인스턴스를 사용할 수 있게 됩니다. PageRequestManager 클래스는 비동기 포스트백과 관련된 클라이언트 이벤트를 발생시킵니다. 부분 페이지 렌더링에 대한 자세한 내용은 부분 페이지 렌더링 개요를 참조하십시오.

클라이언트 이벤트에 대한 처리기 추가

Application 및 PageRequestManager 클래스에 의해 발생한 이벤트에 대한 처리기를 추가하거나 제거하려면 이러한 클래스의 add_eventname 및 remove_eventname 메서드를 사용합니다. 다음 예제에서는 MyLoad라는 처리기를 Application 개체의 init 이벤트에 추가하는 방법을 보여 줍니다.

Sys.Application.add_init(MyInit);
function MyInit(sender) {
}
Sys.Appplication.remove_init(MyInit);

Sys.Application.add_init(MyInit);
function MyInit(sender) {
}
Sys.Appplication.remove_init(MyInit);
참고:

이 예제에서는 add_eventname 및 remove_eventname 메서드의 구문만 보여 줍니다. 특정 이벤트로 수행할 수 있는 작업에 대한 자세한 내용은 이 항목의 뒷부분에서 설명합니다.

응용 프로그램 로드 및 언로드 이벤트 처리

Application 개체의 load 및 unload 이벤트를 처리하기 위해 이벤트에 처리기를 명시적으로 바인딩할 필요는 없습니다. 대신 예약 이름 pageLoad 및 pageUnload를 사용하는 함수를 만들 수 있습니다. 다음 예제에서는 이 방법을 통해 Application 개체의 load 이벤트에 대한 처리기를 추가하는 방법을 보여 줍니다.

function pageLoad(sender, args) {
}

function pageLoad(sender, args) {
}

다른 클라이언트 클래스에 대한 이벤트

이 항목에서는 Application 및 PageRequestManager 클래스에 의해 발생하는 이벤트에 대해서만 설명합니다. Microsoft AJAX 라이브러리에는 DOM 요소 이벤트에 대한 처리기를 추가, 제거 및 지우는 클래스도 포함되어 있습니다. 이러한 클래스는 다음과 같습니다.

DOM 요소에 의해 발생하는 이벤트는 이 항목에서 다루지 않습니다.

Application 및 PageRequestManager 클래스의 클라이언트 이벤트

다음 표에서는 AJAX ASP.NET 사용 페이지에서 처리할 수 있는 Application 및 PageRequestManager 클래스의 클라이언트 이벤트를 보여 줍니다. 이벤트가 발생하는 순서는 이 항목의 뒷부분에서 설명합니다.

이벤트

설명

Sys.Application.init 이벤트

모든 스크립트가 로드된 후 개체가 만들어지기 전에 발생합니다. 구성 요소를 작성하는 경우 init 이벤트를 사용하면 수명 주기에서 페이지에 구성 요소를 추가하는 시점이 제공됩니다. 그런 다음 페이지 수명 주기에서 나중에 이 구성 요소를 다른 구성 요소나 스크립트에 사용할 수 있습니다. 페이지 개발자의 경우 대부분의 시나리오에서 init 이벤트 대신 load 이벤트를 사용해야 합니다.

init 이벤트는 페이지가 처음으로 렌더링될 때 한 번만 발생합니다. 이후의 부분 페이지 업데이트는 init 이벤트를 발생시키지 않습니다.

Sys.Application.load 이벤트

모든 스크립트가 로드되고 $create를 사용하여 만든 응용 프로그램의 모든 개체가 초기화된 후에 발생합니다. load 이벤트는 비동기 포스트백을 포함하여 서버에 대한 모든 포스트백에 대해 발생합니다.

페이지 개발자의 경우 이름이 pageLoad인 함수를 만들 수 있습니다. 이 함수는 load 이벤트에 대한 처리기를 자동으로 제공합니다. pageLoad 처리기는 add_load 메서드를 사용하여 load 이벤트에 추가한 모든 처리기 다음에 호출됩니다.

load 이벤트는 Sys.ApplicationLoadEventArgs 개체인 eventargs 매개 변수를 사용합니다. 이벤트 인수를 사용하여 페이지가 부분 페이지 업데이트로 인해 새로 고쳐지는지 여부를 확인하고 이전 load 이벤트가 발생한 이후 만들어진 구성 요소를 확인할 수 있습니다.

Sys.Application.unload 이벤트

모든 개체가 삭제되기 전과 브라우저 창의 window.unload 이벤트가 발생하기 전에 발생합니다.

페이지 개발자의 경우 이름이 pageUnload인 함수를 만들 수 있습니다. 이 함수는 unload 이벤트에 대한 처리기를 자동으로 제공합니다. pageUnload 이벤트는 페이지가 브라우저에서 언로드되기 직전에 호출됩니다. 이 이벤트 동안 코드에 사용되고 있는 리소스를 해제해야 합니다.

Sys.Component.propertyChanged 이벤트

구성 요소의 속성이 변경되는 경우 발생할 수 있습니다. 이 이벤트는 구성 요소 개발자가 속성 집합 접근자에서 Sys.Component.raisePropertyChange 메서드를 호출한 경우에만 발생합니다. 자세한 내용은 사용자 지정 구성 요소 속성 정의 및 PropertyChanged 이벤트 발생시키기를 참조하십시오.

propertyChanged 이벤트는 Sys.applicationLoadEventArgs 개체인 eventargs 매개 변수를 사용합니다.

Sys.Component.disposing 이벤트

Application 인스턴스가 삭제될 때 발생합니다.

Sys.WebForms.PageRequestManager initializeRequest 이벤트

비동기 요청이 시작되기 전에 발생합니다. 이 이벤트를 사용하여 다른 비동기 포스트백의 우선 순위가 높도록 설정하는 등의 작업을 위해 포스트백을 취소할 수 있습니다.

initializeRequest 이벤트는 Sys.WebForms.InitializeRequestEventArgs 개체인 eventargs 매개 변수를 사용합니다. 이 개체는 포스트백 및 기본 요청 개체를 발생시킨 요소를 사용 가능하게 만듭니다. InitializeRequestEventArgs는 cancel 속성도 노출합니다. cancel을 true로 설정하면 새 포스트백이 취소됩니다.

Sys.WebForms.PageRequestManager beginRequest 이벤트

비동기 포스트백이 시작되고 포스트백이 서버로 전송되기 전에 발생합니다. 이미 처리되고 있는 포스트백이 있으면 abortPostBack 메서드를 사용하여 중지됩니다. 이 이벤트를 사용하여 요청 헤더를 설정하거나 페이지에서 애니메이션을 시작하여 요청이 처리되고 있음을 나타낼 수 있습니다.

beginRequest 이벤트는 Sys.WebForms.BeginRequestEventArgs 개체인 eventargs 매개 변수를 사용합니다. 이 개체는 포스트백 및 기본 요청 개체를 발생시킨 요소를 사용 가능하게 만듭니다.

Sys.WebForms.PageRequestManager pageLoading 이벤트

비동기 포스트백에 대한 서버의 응답이 수신된 후 페이지의 콘텐츠가 업데이트되기 전에 발생합니다. 이 이벤트를 사용하여 업데이트된 콘텐츠에 사용자 지정 전환 효과를 제공할 수 있습니다.

pageLoading 이벤트는 Sys.WebForms.PageLoadingEventArgs 개체인 eventargs 매개 변수를 사용합니다. 이 개체는 최근 비동기 포스트백의 결과로 삭제되고 업데이트될 패널에 대한 정보를 사용 가능하게 만듭니다.

Sys.WebForms.PageRequestManager pageLoaded 이벤트

동기 또는 비동기 포스트백의 결과로 페이지의 모든 콘텐츠가 새로 고쳐진 후에 발생합니다. 동기 포스트백의 경우 패널을 만들 수만 있지만 비동기 포스트백의 경우 패널을 만들고 업데이트할 수 있습니다. 이 이벤트를 사용하여 업데이트된 콘텐츠에 대한 사용자 지정 전환 효과를 관리할 수 있습니다.

pageLoaded 이벤트는 Sys.WebForms.PageLoadedEventArgs 개체인 eventargs 매개 변수를 사용합니다. 이 개체는 최근 포스트백에서 업데이트되고 만들어진 패널에 대한 정보를 사용 가능하게 만듭니다.

Sys.WebForms.PageRequestManager endRequest 이벤트

비동기 포스트백에 대한 응답이 처리되고 페이지가 업데이트된 후나 오류가 있는 경우 응답 처리 중에 발생합니다. 오류가 발생하면 페이지가 업데이트되지 않습니다. 이 이벤트를 사용하여 사용자에게 사용자 지정된 오류 알림을 제공하거나 오류를 기록할 수 있습니다.

endRequest 이벤트는 Sys.WebForms.EndRequestEventArgs 개체인 eventargs 매개 변수를 사용합니다. 이 개체는 발생한 오류 및 해당 오류가 처리되었는지 여부에 대한 정보를 사용 가능하게 만듭니다. 또한 응답 개체를 사용 가능하게 만듭니다.

이벤트 순서 예제

다음 예제에서는 하나가 다른 컨트롤 내에 중첩된 두 개의 UpdatePanel 컨트롤을 포함하는 페이지에서 발생하는 클라이언트 이벤트를 보여 줍니다. 부모 패널에서 단추를 클릭할 때와 중첩된 패널에서 단추를 클릭할 때의 차이점을 확인할 수 있습니다. 부모 패널의 단추를 클릭하면 부모 패널이 업데이트되고 중첩된 패널이 삭제되어 다시 만들어집니다. 중첩된 패널의 단추를 클릭하면 중첩된 패널만 업데이트됩니다.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Client Event Example</title>
    <style type="text/css">
    #OuterPanel { width: 600px; height: 200px; border: 2px solid blue; }
    #NestedPanel { width: 596px; height: 60px; border: 2px solid green; 
                   margin-left:5 px; margin-right:5px; margin-bottom:5px;}
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
           <asp:ScriptReference Path="ClientEventTest.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="OuterPanel" UpdateMode="Conditional" >
        <ContentTemplate>
            Postbacks from inside the outer panel and inner panel are
            asynchronous postbacks. PRM = Sys.WebForms.PageRequestManager. APP = Sys.Application.
            <br /><br />
            <asp:Button ID="OPButton1" Text="Outer Panel Button"  />
            Last updated on
            <%= DateTime.Now.ToString() %>
            <br /><br />

            <asp:UpdatePanel ID="NestedPanel" UpdateMode="Conditional" >
            <ContentTemplate>
                <asp:Button ID="NPButton1" Text="Nested Panel 1 Button"  />
                Last updated on
                <%= DateTime.Now.ToString() %>
                <br />
            </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
        </asp:UpdatePanel>

        <input type="button" onclick="Clear();" value="Clear" />

        <asp:Button ID="FullPostBack"  Text="Full Postback" />
        <a href="https://www.microsoft.com">Test Window Unload</a>
        <br />
        <span id="ClientEvents"></span>    
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Client Event Example</title>
    <style type="text/css">
    #OuterPanel { width: 600px; height: 200px; border: 2px solid blue; }
    #NestedPanel { width: 596px; height: 60px; border: 2px solid green; 
                   margin-left:5 px; margin-right:5px; margin-bottom:5px;}
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
           <asp:ScriptReference Path="ClientEventTest.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="OuterPanel" UpdateMode="Conditional" >
        <ContentTemplate>
            Postbacks from inside the outer panel and inner panel are
            asynchronous postbacks. PRM = Sys.WebForms.PageRequestManager. APP = Sys.Application.

            <br /><br />
            <asp:Button ID="OPButton1" Text="Outer Panel Button"  />
            Last updated on
            <%= DateTime.Now.ToString() %>
            <br /><br />

            <asp:UpdatePanel ID="NestedPanel" UpdateMode="Conditional" >
            <ContentTemplate>
                <asp:Button ID="NPButton1" Text="Nested Panel 1 Button"  />
                Last updated on
                <%= DateTime.Now.ToString() %>
                <br />
            </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
        </asp:UpdatePanel>

        <input type="button" onclick="Clear();" value="Clear" />

        <asp:Button ID="FullPostBack"  Text="Full Postback" />
        <a href="https://www.microsoft.com">Test Window Unload</a>
        <br />
        <span id="ClientEvents"></span>    
    </div>
    </form>
</body>
</html>

// Hook up Application event handlers.
var app = Sys.Application;
app.add_load(ApplicationLoad);
app.add_init(ApplicationInit);
app.add_disposing(ApplicationDisposing);
app.add_unload(ApplicationUnload);


// Application event handlers for component developers.
function ApplicationInit(sender) {
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  if (!prm.get_isInAsyncPostBack())
  {
      prm.add_initializeRequest(InitializeRequest);
      prm.add_beginRequest(BeginRequest);
      prm.add_pageLoading(PageLoading);
      prm.add_pageLoaded(PageLoaded);
      prm.add_endRequest(EndRequest);
  }
  $get('ClientEvents').innerHTML += "APP:: Application init. <br/>";
}
function ApplicationLoad(sender, args) {
  $get('ClientEvents').innerHTML += "APP:: Application load. ";
  $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
}
function ApplicationUnload(sender) {
  alert('APP:: Application unload.');
}
function ApplicationDisposing(sender) {
  $get('ClientEvents').innerHTML += "APP:: Application disposing. <br/>";

}
// Application event handlers for page developers.
function pageLoad() {
  $get('ClientEvents').innerHTML += "PAGE:: Load.<br/>";
}

function pageUnload() {
  alert('Page:: Page unload.');
}

// PageRequestManager event handlers.
function InitializeRequest(sender, args) {
  $get('ClientEvents').innerHTML += "<hr/>";
  $get('ClientEvents').innerHTML += "PRM:: Initializing async request.<br/>";  
}
function BeginRequest(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: Begin processing async request.<br/>";
}
function PageLoading(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: Loading results of async request.<br/>";
  var updatedPanels = printArray("PanelsUpdating", args.get_panelsUpdating());
  var deletedPanels = printArray("PanelsDeleting", args.get_panelsDeleting());

  var message = "-->" + updatedPanels + "<br/>-->" + deletedPanels + "<br/>";

  document.getElementById("ClientEvents").innerHTML += message;
}
function PageLoaded(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: Finished loading results of async request.<br/>";
  var updatedPanels = printArray("PanelsUpdated", args.get_panelsUpdated());
  var createdPanels = printArray("PaneslCreated", args.get_panelsCreated());

  var message = "-->" + updatedPanels + "<br/>-->" + createdPanels + "<br/>";

  document.getElementById("ClientEvents").innerHTML += message;
}
function EndRequest(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: End of async request.<br/>";
}

// Helper functions.
function Clear()
{
  $get('ClientEvents').innerHTML = "";
}
function printArray(name, arr)
{
    var panels = name + '=' + arr.length;
    if(arr.length > 0)
    {
        panels += "(";
        for(var i = 0; i < arr.length; i++)
        {
            panels += arr[i].id + ',';
        }
        panels = panels.substring(0, panels.length - 1);
        panels += ")";
    }
    return panels;
}

// Hook up Application event handlers.
var app = Sys.Application;
app.add_load(ApplicationLoad);
app.add_init(ApplicationInit);
app.add_disposing(ApplicationDisposing);
app.add_unload(ApplicationUnload);


// Application event handlers for component developers.
function ApplicationInit(sender) {
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  if (!prm.get_isInAsyncPostBack())
  {
      prm.add_initializeRequest(InitializeRequest);
      prm.add_beginRequest(BeginRequest);
      prm.add_pageLoading(PageLoading);
      prm.add_pageLoaded(PageLoaded);
      prm.add_endRequest(EndRequest);
  }
  $get('ClientEvents').innerHTML += "APP:: Application init. <br/>";
}
function ApplicationLoad(sender, args) {
  $get('ClientEvents').innerHTML += "APP:: Application load. ";
  $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
}
function ApplicationUnload(sender) {
  alert('APP:: Application unload.');
}
function ApplicationDisposing(sender) {
  $get('ClientEvents').innerHTML += "APP:: Application disposing. <br/>";

}
// Application event handlers for page developers.
function pageLoad() {
  $get('ClientEvents').innerHTML += "PAGE:: Load.<br/>";
}

function pageUnload() {
  alert('Page:: Page unload.');
}

// PageRequestManager event handlers.
function InitializeRequest(sender, args) {
  $get('ClientEvents').innerHTML += "<hr/>";
  $get('ClientEvents').innerHTML += "PRM:: Initializing async request.<br/>";  
}
function BeginRequest(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: Begin processing async request.<br/>";
}
function PageLoading(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: Loading results of async request.<br/>";
  var updatedPanels = printArray("PanelsUpdating", args.get_panelsUpdating());
  var deletedPanels = printArray("PanelsDeleting", args.get_panelsDeleting());

  var message = "-->" + updatedPanels + "<br/>-->" + deletedPanels + "<br/>";

  document.getElementById("ClientEvents").innerHTML += message;
}
function PageLoaded(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: Finished loading results of async request.<br/>";
  var updatedPanels = printArray("PanelsUpdated", args.get_panelsUpdated());
  var createdPanels = printArray("PaneslCreated", args.get_panelsCreated());

  var message = "-->" + updatedPanels + "<br/>-->" + createdPanels + "<br/>";

  document.getElementById("ClientEvents").innerHTML += message;
}
function EndRequest(sender, args) {
  $get('ClientEvents').innerHTML += "PRM:: End of async request.<br/>";
}

// Helper functions.
function Clear()
{
  $get('ClientEvents').innerHTML = "";
}
function printArray(name, arr)
{
    var panels = name + '=' + arr.length;
    if(arr.length > 0)
    {
        panels += "(";
        for(var i = 0; i < arr.length; i++)
        {
            panels += arr[i].id + ',';
        }
        panels = panels.substring(0, panels.length - 1);
        panels += ")";
    }
    return panels;
}

일반적인 시나리오에 대한 이벤트 순서

이벤트 순서는 페이지에 사용되는 컨트롤 및 수행된 요청 유형(초기 요청, 포스트백 또는 비동기 포스트백)에 따라 달라집니다. 이 단원에서는 몇 가지 일반적인 시나리오에 대한 이벤트 순서에 대해 설명합니다.

초기 요청

페이지에 대한 초기 요청 동안에는 제한된 수의 클라이언트 이벤트가 발생합니다. 초기 요청에 대한 다음 시나리오를 가정합니다.

다음 클라이언트 이벤트가 아래 순서대로 발생합니다.

  1. 초기 요청이 서버로 전송됩니다.

  2. 클라이언트에서 응답을 수신합니다.

  3. Application 인스턴스가 init 이벤트를 발생시킵니다.

  4. Application 인스턴스가 load 이벤트를 발생시킵니다.

Application 인스턴스의 init 이벤트는 브라우저에서 페이지의 수명 동안 한 번만 발생합니다. 이후의 비동기 포스트백에 대해서는 이 이벤트가 발생하지 않습니다. 초기 요청 동안에는 PageRequestManager 이벤트가 발생하지 않습니다.

비동기 포스트백

비동기 포스트백은 일부 페이지 데이터를 서버로 보내고 응답을 받은 다음 페이지의 부분을 업데이트합니다. 비동기 포스트백에 대한 다음 시나리오를 가정합니다.

다음 클라이언트 이벤트가 아래 순서대로 발생합니다.

  1. UpdatePanel 내부의 단추가 클릭되어 비동기 포스트백이 시작됩니다.

  2. PageRequestManager 인스턴스가 initializeRequest 이벤트를 발생시킵니다.

  3. PageRequestManager 인스턴스가 beginRequest 이벤트를 발생시킵니다.

  4. 요청이 서버로 전송됩니다.

  5. 클라이언트에서 응답을 수신합니다.

  6. PageRequestManager 인스턴스가 pageLoading 이벤트를 발생시킵니다.

  7. PageRequestManager 인스턴스가 pageLoaded 이벤트를 발생시킵니다.

  8. Application 인스턴스가 load 이벤트를 발생시킵니다.

  9. PageRequestManager 인스턴스가 endRequest 이벤트를 발생시킵니다.

자세한 내용은 PageRequestManager 이벤트 작업을 참조하십시오.

Application 인스턴스의 load 이벤트는 PageRequestManagerpageLoaded 이벤트 후 해당 endRequest 이벤트 전에 발생합니다.

여러 비동기 포스트백

사용자가 서버나 브라우저에서 이전에 시작한 요청이 완전히 처리되기 전에 새 요청을 시작하는 경우 여러 비동기 포스트백이 발생할 수 있습니다. 여러 비동기 포스트백에 대한 다음 시나리오를 가정합니다.

  • 페이지에 ScriptManager 컨트롤이 포함되어 있고 컨트롤의 SupportsPartialRendering 및 EnablePartialRendering 속성이 모두 true입니다.

  • 페이지에 UpdatePanel 컨트롤이 포함되어 있습니다.

  • 비동기 포스트백을 시작하는 UpdatePanel 컨트롤 내부의 단추가 두 번 클릭됩니다. 두 번째 클릭은 서버가 첫 번째 클릭으로 시작된 요청을 처리하는 동안에 발생합니다.

  • 첫 번째 요청에 대한 응답이 서버에서 반환되었습니다.

다음 클라이언트 이벤트가 아래 순서대로 발생합니다.

  1. UpdatePanel 내부의 단추가 클릭되어 비동기 포스트백이 시작됩니다.

  2. PageRequestManager 인스턴스가 initializeRequest 이벤트를 발생시킵니다.

  3. PageRequestManager 인스턴스가 beginRequest 이벤트를 발생시킵니다.

  4. 요청이 서버로 전송됩니다.

  5. 단추가 다시 클릭되어 두 번째 비동기 포스트백이 시작됩니다.

  6. PageRequestManager 인스턴스가 두 번째 단추 클릭에 대한 initializeRequest 이벤트를 발생시킵니다.

  7. PageRequestManager 인스턴스가 첫 번째 단추 클릭에 대한 endRequest 이벤트를 발생시킵니다.

  8. PageRequestManager 인스턴스가 두 번째 단추 클릭에 대한 beginRequest 이벤트를 발생시킵니다.

  9. 두 번째 클릭으로 시작된 요청이 서버로 전송됩니다.

  10. 두 번째 클릭에 대한 응답이 수신됩니다.

  11. PageRequestManager 인스턴스가 pageLoading 이벤트를 발생시킵니다.

  12. PageRequestManager 인스턴스가 pageLoaded 이벤트를 발생시킵니다.

  13. Application 인스턴스가 load 이벤트를 발생시킵니다.

  14. PageRequestManager 인스턴스가 endRequest 이벤트를 발생시킵니다.

최근 비동기 포스트백의 우선 순위가 높은 것이 비동기 포스트백의 기본 동작입니다. 두 개의 비동기 포스트백이 순서대로 발생하고 브라우저에서 첫 번째 포스트백이 아직 처리되고 있는 경우에는 첫 번째 포스트백이 취소됩니다. 첫 번째 포스트백이 서버로 전송된 경우 서버는 두 번째 요청이 도착하면 이 요청을 처리하고 첫 번째 요청을 반환하지 않습니다. 특정 비동기 포스트백의 우선 순위가 높도록 설정하는 방법에 대한 자세한 내용은 특정 비동기 포스트백에 우선 순위 설정을 참조하십시오.

다른 페이지로 이동

사용자가 다른 페이지로 이동하면 현재 페이지가 브라우저에서 언로드되므로 unload 이벤트를 처리하여 리소스를 해제할 수 있습니다. 다른 페이지로 이동에 대한 다음 시나리오를 가정합니다.

다음 클라이언트 이벤트가 아래 순서대로 발생합니다.

  1. 새 페이지에 대한 요청이 시작됩니다.

  2. 브라우저에서 새 페이지에 대한 응답을 수신합니다.

  3. Application 인스턴스가 unload 이벤트를 발생시킵니다.

  4. 새 페이지가 표시됩니다.

새 페이지에 대한 요청에 오류가 있는 경우 unload 이벤트는 발생하지만 새 페이지가 표시되지 않습니다.

참고 항목

개념

ASP.NET 페이지 수명 주기 개요

사용자 지정 구성 요소 속성 정의 및 PropertyChanged 이벤트 발생시키기

PageRequestManager 이벤트 작업

사용자 지정 클라이언트 이벤트 만들기