반응형
1. 기타 메소드 종류
- ajaxSetup() : Ajax요청 시에 전달되는 속성 값과 콜백 함수의 기본 값을 설정 및 변경하는 메소드
모든 Ajax요청에 적용되기 때문에 빈번하게 사용하는 것은 권장되지 않음
- ajaxPrefilter() : 사용자 정의 Ajax 설정을 추가하거나 기존 Ajax 설정의 기능을 변경할 때 사용하는 메소드
2. 실습 - Ajax_Setup
<!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).ajaxStop(function() {
console.log("ajaxStop");
});
//모든 Ajax에 대한 timeout이 1900으로 설정됨
//모든 Ajax에 대한 전역 이벤트 함수 호출을 하지 않음
$.ajaxSetup({
timeout : 1900,
global : false, //전역이벤트 함수 발생 옵션(true : 발생, false : 발생하지 않음)
error : function(jqXHR, status, error) {
console.log(error);
}
});
});
function reqList() {
$.get("/contact/list_long.do", function(data) {
console.log(data);
});
$.get("/contact/list_long.do", function(data) {
console.log(data);
});
$.get("/contact/list.do", function(data) {
console.log(data);
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</script>
</body>
</html>
* favicon 에러는 favicon을 지정해주지 않아서 생긴 오류이므로 그냥 무시할 것.
3. 실습 - Ajax_PreFilter
<!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() {
//현재 전송중인지 아닌지를 체크하기 위한 객체 선언
var currentRequest = {};
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
//ajax요청에서 abortOnRetry 속성을 불러옴
if(options.abortOnRetry) {
if(currentRequest[options.url]) {
//현재 ajax 요청 취소
jqXHR.abort();
console.log("abort Request");
} else {
currentRequest[options.url] = jqXHR;
}
}
});
$(document).ajaxComplete(function(e, jqxhr, options) {
//ajax 요청 완료 시 currentRequst 객체의 options.url 속성 제거
if(options.abortOnRetry) {
//delete : 객체 속성 제거 연산자
delete currentRequest[options.url];
}
});
});
var count = 0;
function reqList() {
$.get({
url : "/contact/list_long.do",
//사용자 정의 속성
abortOnRetry : function(xhr, settings) {
count++;
console.log("send" + count + " Request");
},
success : function(data) {
console.log("success" + count + " Request");
console.log(data);
},
error : function(xhr, status, error) {
console.log("error" + count + " Request");
}
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</script>
</body>
</html>
* 조회 버튼을 여러 번 눌렀을 때 abort가 찍힘
반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
| [Ajax] 20. Ajax jsRender 템플릿 분리하기 (0) | 2021.10.07 |
|---|---|
| [Ajax] 19. Ajax 제이쿼리 플러그인 (0) | 2021.10.06 |
| [Ajax] 17. Ajax 전역 이벤트 함수 (0) | 2021.10.06 |
| [Ajax] 16. 헬퍼 함수 (0) | 2021.10.06 |
| [Ajax] 15. encoded_form_data (0) | 2021.10.06 |
댓글