ajaxSuccess() Ajax 요청이 성공적으로 완료 때마다 호출

.ajaxSuccess()

원문 링크 http://api.jquery.com/ajaxSuccess/

ajaxSuccess( handler(event, XMLHttpRequest, ajaxOptions) )Returns : jQuery

개요 : Ajax 요청이 성공적으로 완료 때마다 실행될 함수를 작성합니다. 이것은 Ajax 이벤트 입니다.

• .ajaxSuccess( handler(event, XMLHttpRequest, ajaxOptions) )
• handler(event, XMLHttpRequest, ajaxOptions) 실행될 함수

Ajax 요청이 성공적으로 완료 때마다, jQuery ajaxSuccess 이벤트를 발생시킵니다. .ajaxSuccess() 함수내에 등록된 핸들러는 매번 실행되게 됩니다.

이 함수가 동작하는 것을 보기위해 기본적인 Ajax 요청을 만들 수 있습니다.

<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

특정한 엘리먼트에 이벤트 핸들러를 붙여 보겠습니다.

$('.log').ajaxSuccess(function() {
  $(this).text('Triggered ajaxSuccess handler.');
});

그리고, Ajax를 실행시킬 jQuery 함수를 사용하면:

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

trigger 클래스를 가진 div 를 클릭한 후 모든 Ajax 요청이 성공적으로 완료되면 log 메시지가 log 클래스 div 태그에 나타나게 됩니다.

Note: .ajaxSuccess() 함수는 jQuery 객체에 의해 만들어지기 때문에, this 키워드는 콜백 함수내에서 선택되어진 요소를 지칭하게 됩니다.

Ajax 요청이 성공할 때마다 ajaxSuccess 핸들러가 실행됩니다. 만약 요청들을 구분해야 한다면, ajaxSuccess 핸들러에 인자를 부여해야 합니다. 그것은 event 객체, XMLHttpRequest 객체, 그리고 settings 객체들로 구성되어 있습니다. 예를 들어, 특정한 URL 를 구분해 내야 한다면 아래와 같이 처리할 수 있습니다.

Note: 반환된 데이터의 형태에 따라 xhr.responseXML 또는 xhr.responseText를 구분해서 사용할 수 있습니다.

$('.log').ajaxSuccess(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxSuccess handler. The ajax response was:' 
                     + xhr.responseText );
  }
});

예 제  
Ajax 요청이 성공하면 메시지를 보여줍니다.

$("#msg").ajaxSuccess(function(evt, request, settings){
      $(this).append("<li>Successful Request!</li>");
      });

 

이 함수가 Ajax시 가장 중요한 함수겠네요. 실제로는 $.ajax() 함수내에서 사용하긴 합니다. 그 예제는 간단한 검색으로도 많이 보실 수 있을 거구요. 이 함수는 아주 원론적인 방법 중 하나이구요. 나는 명확하게 구분해서 핸들러를 처리하겠다라고 하시면 이 이벤트 함수를 직접 작성해 주셔도 되겠네요. 아~ 괜히 혼란만 드린 건 아닐까... ^^;;

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.