반응형
1. 이론 - Ajax 전역 이벤트 함수
- Ajax 전역 이벤트 함수는 콜백에서 사용되는 공통적인 코드를 관리하고 사용하도록 구성
2. Ajax 전역 이벤트 함수의 종류
1) ajaxStart(handler) : 처리중인 ajax 요청이 없는 상태에서 처음 ajax 요청이 일어날 때 발생되는 이벤트.
이미 ajax 요청이 진행중이면 실행되지 않음
ex) $(document).ajaxStart(function() {
console.log("ajaxStart");
});
2) ajaxSend(handler) : 각각의 ajax 요청이 전송되기 전에 발생되는 이벤트
다른 ajax요청이 진행중인 상태에서도 실행됨
ex) $(document).ajaxSend(function(event, xhr, options) {
console.log("ajaxSend");
});
event : event 객체
optios : ajax 호출 시 설정한 설정 값들
3) ajaxSuccess(handler) : ajax 요청이 성공일 때 실행되는 이벤트
ex) $(document).ajaxSuccess(function(event, xhr, options, data) {
console.log("ajaxSuccess");
});
data : 서버로부터 응답받은 데이터
4) ajaxError(handler) : ajax 요청이 실패했을 때 발생되는 이벤트
ex) $(document).ajaxError(function(event, xhr, options, data) {
console.log("ajaxError");
});
error : 발생된 오류 메시지
5) ajaxComplete(handler) : ajax 요청이 완료됐을 때 발생되는 이벤트, 성공/실패 여부와 관계없이 실행
ex) $(document).ajaxError(function(event, xhr, options) {
console.log("ajaxComplete");
});
6) ajaxStop(handler) : 처리중인 ajax요청이 모두 완료된 상태가 되었을 때 발생되는 이벤트
ex) $(document).ajaxStop(function() {
console.log("ajaxStop");
});
3. Ajax 전역 이벤트 함수와 Ajax 로컬 콜백 함수의 시점
Ajax 요청이 성공일 때 :
전역 이벤트 함수 ajaxStart -------> ajaxSend -------> ajaxSuccess -------> ajaxComplete -------> ajaxStop
로컬 콜백 함수 beforeSend -------> success -------> complete ------->
Ajax 요청이 실패일 때 :
전역 이벤트 함수 ajaxStart -------> ajaxSend -------> ajaxError -------> ajaxComplete -------> ajaxStop
로컬 콜백 함수 beforeSend -------> error -------> complete ------->
4. 실습 - Ajax_GlobalEvent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - GET방식</title>
</head>
<body>
<button type="button" onclick="reqList();">조회</button>
<button type="button" onclick="delList();">삭제</button>
<p id="resp"></p>
<script>
//Ajax 전역 이벤트 함수 등록
$(document).ready(function() {
$(document).ajaxStart(function() {
console.log("ajaxStart");
}).ajaxStop(function() {
console.log("ajaxStop");
}).ajaxSend(function() {
console.log("ajaxSend");
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
}).ajaxComplete(function() {
console.log("ajaxComplete");
});
});
function reqList() {
$.get({
url : "/contact/list.do",
beforeSend : function() {
console.log("Ajax-1 beforeSend : list.do");
},
success : function() {
console.log("Ajax-1 success : list.do");
},
complete : function() {
console.log("Ajax-1 complete : list.do");
}
});
$.get({
url : "/contact/list_long.do",
beforeSend : function() {
console.log("Ajax-2 beforeSend : list_long.do");
},
success : function() {
console.log("Ajax-2 success : list_long.do");
},
complete : function() {
console.log("Ajax-2 complete : list_long.do");
}
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</script>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
| [Ajax] 19. Ajax 제이쿼리 플러그인 (0) | 2021.10.06 |
|---|---|
| [Ajax] 18. 기타 메소드 (0) | 2021.10.06 |
| [Ajax] 16. 헬퍼 함수 (0) | 2021.10.06 |
| [Ajax] 15. encoded_form_data (0) | 2021.10.06 |
| [Ajax] 14. jsPromise (콜백 지옥 해결법)과 jqWhen (0) | 2021.10.06 |
댓글