...More Simple More Efficient... ☞ Guest Book enSimple.net ?
Home Study Q & A Knowledge Base Free Board News

   WEB forever
[작성자 : chang]  10/12/2009 11:06:08 AM  에 남기신 글입니다.

제목 : ASP.NET AJAX : Microsoft AJAX Library 클라이언트 측 이벤트 모델
Microsoft AJAX Library_클라이언트 측 이벤트 모델

이번 글에서는 비동기 부분 포스트 백 시에, 클라이언트 측에서 발생하는 이벤트와 그 순서를 따져 보도록 하는 시간을 갖는다.  
앞서 한번 언급 했듯이, 이벤트의 주기를 아는 것은 문제 해결에 많은 도움을 준다. 어떤 단계에서 문제가 발생했는지를 식별할 수 있고, 따라서 문제의 범위를 축소시킬 수 있다. 트러블 슈팅 작업에서 문제를 축소할 수 있다는 것은 절반은 해결을 본 거라 봐도 될 만큼 중요하다.  



■ 클라이언트 측 에서의 모든 이벤트 발생 순서  

1. PageRequestManager.initializeRequest 이벤트

PageRequestManager 객체가 클라이언트 측에서 발생시키는 이벤트이다.어떤 DOM 객체가 이 이벤트를 발생시켰는지에 대한 정보를 제공하므로 특정 비동기 포스트백을 취소시켜 버리거나 혹은 우선 처리하도록 조정할 수 있는 위치이다.  

2. PageRequestManager.beginRequest 이벤트

비동기 포스트 밳이 서버에 전달되기 전에 발생하는 이벤트로서 통상 사용자에게 이제 막 비동기 처리가 시작될 것이라는 것을 알려주는 데 사용되는 이벤트이다. UpdateProgress 컨트롤은 이 이벤트 발생 시에 자신의 시각 요소를 표시하고, 포스트 백이 끝난 후 발생하는 endRequest 이벤트 시에 시각 요소를 숨긴다.  

3. PageRequestManager.pageLoading 이벤트

포스트백이 서버 상에서 처리된 후에 그 응답이 클라이언트로 리턴된다. 그리고는 바로 pageLoading 이벤트가 발생한다. 이 이벤트는 페이지 상에 어떤 변경이 가해지기 전에 발생하므로 서버로부터 전달된 데이터를 검사(검증)하고 필요한 경우 적절하게 원하는 조작할 수 있는 위치이다.  

4. PageRequestManager.pageLoaded 이벤트

PageRequestManager 객체가 발생시키는 이벤트로서 페이지가 로드된 후에 발생하는 이벤트이다. 이 이벤트는 페이지가 무엇으로 인해 로드 되든 상관없이 항상 페이지가 로드될 때 마다 발생된다.  

5. (Application.init 이벤트)

초기 로드 또는 새로이 페이지가 로드될 때만 발생 (부분 페이지 갱신을 위한 비동기 포스트백 시에는 발생 안함)  

6. Application.load 이벤트

다른 이벤트와 달리 이 이벤트는 PageRequestManager가 아닌 Application 객체에 속하는 이벤트이다. 비동기 포스트백 시마다 발생한다.
이 이벤트는 모든 스크립트가 로드되었고, 어플리케이션(페이지) 내 모든 클라이언트 측 객체가 생성되어 초기화 되었음을 알려주는 이벤트이다. 이 이벤트는 클라이언트 이벤트 주기에 있어서 매우 중요한 이벤트이므로 비동기 포스트 백시에는 PageRequestManager 객체가 Application 객체를 대신하여 이 이벤트를 발생시킨다.  
PageRequestManager 객체는 pageLoaded라는 함수를 가진다. 이 함수가 호출될 때 현재의 페이지 로드가 페이지에 대한 초기 로드인지 여부를 알리는 매개 변수가 전달된다. 만일 초기 로드라면, Application 객체는 load 이벤트를 발생시킨다. 하지만 초기 로드가 아닌 경우에는 Application 객체의 raiseLoad 라는 함수가 호출되고 이 함수가 궁극적으로 load 이벤트를 발생시킨다.  

7. PageRequestManager.endRequest 이벤트
부분(비동기) 포스트백 완료 시 마다 항상 endRequest 이벤트가 발생한다. 이 이벤트는 포스트백 처리 중에 에러가 발생한 경우에도 발생한다.  

8. (Application.unload 이벤트)
페이지가 다른 사이트로 이동하거나 닫힐 때 페이지가 언로드 되면서 발생하는 이벤트  

□ 일반 포스트백 시의 이벤트

아래의 이벤트가 순서대로 발생한다.  

1. PageRequestManager.pageLoaded 이벤트
2. Application.init 이벤트
3. Application.load 이벤트
4. Application.unloaded 이벤트

□ 부분 비동기 포스트백 시의 이벤트

1. PageRequestManager.initializeRequest 이벤트
2. PageRequestManager.beginRequest 이벤트
3. PageRequestManager.pageLoading 이벤트
4. PageRequestManager.pageLoaded 이벤트
5. Application.load 이벤트
6. PageRequestManager.endRequest 이벤트

  
★ 일반 포스트 백 시에는 Application 객체의 load 이벤트가 중요하고, 비동기 부분 포스트 백 시에는 PageRequestManager 객체의 이벤트들이 주요하게 발생한다.  

■ 클라이언트 이벤트 핸들러 추가하기

앞선 글에서 많이 소개 했듯이 이벤트가 발생하는 경우에 처리할 함수, 즉 핸들러를 생성 및 등록해야 이벤트에 대응하는 처리를 할 수 있다.  
기본적으로 아래와 같이 이벤트 핸들러를 등록한다.  

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

Sys.Appplication.remove_init(MyInit);

■ Application 객체의 기본 제공 이벤트 핸들러

Application 객체의 경우 명시적으로 이벤트 핸들러를 등록치 않더라도 기본으로 제공되는 핸들러를 그대로 사용할 수 있다.

Applicaton.load 이벤트 : pageLoad() 이벤트 핸들러 --> 위의 PageRequestManager.pageLoaded 이벤트 와 비슷하다고 혼동하면 안된다.
Application.unload 이벤트 : pageUnload() 이벤트 핸들러

 
따라서 아래와 같이 이벤트 핸들러 등록(Application.add_load() 또는 Application.add_unload()) 과정 없이 바로 기본 함수를 사용할 수 있다.  

function pageLoad(sender, args)
{
 //Application.load 이벤트 발생 시 처리할 코드
}
function pageUnload(sender args) {}

■ 동시에 여러 비동기 포스트 백 발생시의 작동과 이벤트  

만일 UpdatePanel 내의 버튼을 두 번 연속해서 클릭하여 비동기 포스트백을 두 번 발생 시킨다면? 즉 서버가 첫 번째 클릭에 대한 비동기 처리를 하는 중에 두 번째 클릭이 발생 했다면 어떻게 될까?  

□ 이벤트 발생 순서

  1. 첫 번째 버튼 클릭 : 첫 번째 비동기 포스트백 발생
  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 이벤트

□ 작동방식

비동기 처리의 기본 동작은 가장 최근의 비동기 포스트백이 우선권을 가진다. 따라서 두 개의 비동기 포스트백이 연속해서 발생한 경우, 첫 번째 포스트백이 아직 웹 브라우저 상에서 처리중인 상태라면 그 포스트백 요청은 바로 취소된다. 그러나 만일 첫 번째 포스트백이 서버로 전달된 상태라면, 서버는 두 번째 요청에 대해서만 처리하여 응답을 리턴할 뿐, 첫 번째 요청에 대한 응답은 리턴하지 않는다.  

□ 테스트해 보기

첨부된 샘플에서 처음 버튼 클릭 후에 beginRequest 발생 후 서버로 요청이 전달되면 곧바로 두 번째 클릭을 시도하여 위의 시나리오 대로 이벤트가 발생하는 것을 확인할 수 있다.

     

    첨부파일 : PageRequestManager_Event.zip (3 Kbytes)       
    List
    □ 한줄의 평 이름: