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

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

<!-- 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>

<?
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);
})