jquery | Global Ajax 이벤트 핸들러를 이용하여 ajax 공통처리를 해보자
jquery | Global Ajax 이벤트 핸들러를 이용하여 ajax 공통처리를 해보자
REDINFO
약 1년전 2022-11-19 02:18:35

Global Ajax 를 이용하여 공통처리를 할 수 있는 방법이 있다. 이는 주로 이 블로그처럼 대다수가 AJAX 를 통한 페이지 전환으로 구성된 사이트에서 로딩바를 띄우기 위한 목적으로 사용이 된다.

 

지원되는 이벤트 핸들러는 ajaxStart, ajaxSend, ajaxSuccess, ajaxComplete, ajaxStop , ajaxError 가 있으며 공식 API 문서에는 아래와 같이 소개가 되어있으니 함께 참고 바란다. 

 

 
Global Ajax Event Handlers | jQuery API Documentation
Global Ajax Event Handlers | jQuery API Documentation
api.jquery.com/category/ajax/global-ajax-event-handlers/

 

Global Ajax 이벤트 핸들러 소개

.ajaxStart() 

가장 처음 시작되는 ajax 요청이 있을 시 실행된다.  

  • 우선순위: 1 
  • 실행범위: 1회
  • 에러발생시: 실행
  • param:  event

.ajaxSend() 

ajax 요청이 전송되기 전에 실행된다. (ajax 의 beforesend 와 비슷한 역활을 한다.)

  • 우선순위: 2 
  • 실행범위: 1회
  • 에러발생시: 실행
  • param:  event,request,settings

.ajaxSuccess() 

ajax 요청이 성공될때마다 실행된다.

  • 우선순위: 3 
  • 실행범위: 성공시마다 매번
  • 에러발생시: 실행안함
  • param:  event,request,settings

.ajaxComplete() 

ajax 요청이 성공으로 완료되었을 시 실행된다. 

  • 우선순위: 4
  • 실행범위: 1회
  • 에러발생시: 실행
  • param: event,request,settings

.ajaxStop() 

ajax 요청이 모두 완료되었을 시 실행된다. 

  • 우선순위: 5
  • 실행범위: 1회
  • 에러발생시: 실행
  • param: event

.ajaxError() 

ajax 요청중 에러 발생한 ajax 요청건 있을 경우 실행된다.

  • 우선순위: 3 
  • 실행범위: 에러발생시에만
  • 에러발생시: 실행
  • param: event,jqxhr,settings,thrownError

 

Global Ajax 이벤트 핸들러 요청 예제 | reqeust.php
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

<a href="#none" onclick="return false;" load>load 이벤트(무조건실행)</a> <br>
<a href="#none" onclick="return false;" ajax>ajax 이벤트(에러발생)</a>
<div res></div>

<script type="text/javascript">

// -> ajax를 보내고 페이지 컴파일이 아닌 읽기 이기때문에 에러가 나도 그대로 보낸다.
$('a[load]').on('click',function(e){
   $('div[res]').load("/response.php",function(e){
      console.log(e);
   });   
});

// -> dataType 이 json 이 아닐경우 에러발생을 하기 위한 목적으로 실행
$('a[ajax]').on('click',function(e){
   $.ajax({url:"/response.php", dataType:'json'})
   .done(function(e){
      console.log(e);
   })
});

$(function(){
	// -> ajax 가 시작될때 실행 ==> 우선순위1 (에러발생시에도 실행)
   $(document).ajaxStart(function (event) {
   	console.log('ajaxStart',event);
   })
   // -> ajax 를 보낼때 실행 ==> 우선순위2 - (에러발생시에도 실행)
   .ajaxSend(function(event,request,settings){
      console.log('ajaxSend',event,request,settings);
   })   
   // -> ajax 가 성공일때 실행 ==> 우선순위3 
   .ajaxSuccess(function(event,request,settings){
      console.log('ajaxSuccess',event,request,settings);
   })         
   // -> ajax 요청완료일떄 실행 ==> 우선순위4 (에러발생시에도 실행)
   .ajaxComplete(function(event,request,settings){
      console.log('ajaxComplete',event,request,settings);
   })      
   // -> ajax 요청이 모두 완료되었을 때 실행 ==> 우선순위5 (에러발생시에도 실행)
   .ajaxStop(function(event){
      console.log('ajaxStop',event);
   })
   // -> ajax 에러발생시에만 실행 ==> (에러발생시에만 실행되고 우선순위3)
   .ajaxError(function(event,jqxhr,settings,thrownError){
      console.log('ajaxError',event,jqxhr,settings,thrownError);
   })   
});	
	
</script>

 

Global Ajax 이벤트 핸들러 응답 예제 | response.php
<?
response OK

 

결과1 | load 이벤트(무조건실행)

 

결과2 | ajax 이벤트(에러발생)

 

만약 특정 ajax 호출 시 Global Ajax 이벤트 핸들러 공통처리에서 제외를 하고 싶을 경우 아래와 같이 ajax 핸들러 선언 시 global:false 옵션을 추가해주면 된다. 

$.ajax({url:"/response.php", dataType:'json',global: false})
.done(function(e){
   console.log(e);
})

 

 

이 포스트글이 도움이 되었나요?
3
카테고리 연관글

Comment

댓글작성

0(500) | 1(30)