반응형
1. Ajax 콜백 함수 정리
$.ajax({
/*콜백 함수 영역*/
beforeSend : function(xhr, settings) {
alert("전송 전 실행");
} : 요청을 서버로 전송하기 전에 실행되는 콜백 함수
xhr : XHR 객체
settings : ajax 호출 시 지정한 설정 값들
success : function(data, status, xhr) {
alert("요청 성공!");
console.log(data);
} : 요청이 성공했을 때 실행되는 콜백 함수
data : 서버로부터 응답받은 데이터
status : 요청 상태 정보를 문자열로 전달받는 매개변수("success")
try catch finally : try구문에 해당하는 영역
error : function(xhr, status, error) {
alert("요청 실패!");
console.log(error);
} : 요청이 실패했을 때 실행되는 콜백 함수
status : 요청 상태 정보를 문자열로 전달받는 매개변수("timeout", "error", "abort" 등)
error : 에러 정보를 문자열로 전달받는 매개변수
try catch finally : catch구문에 해당하는 영역
complete : function(xhr, status) {
alert("요청 완료!");
} : 요청이 완료됐을 때 실행되는 콜백 함수
요청의 성공/실패 여부와 상관없이 항상 실행되는 콜백 함수
try catch finally : finally구분에 해당하는 영역
});
2. Ajax - Callback 실습
<에러가 발생하지 않는 경우>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - Callback</title>
</head>
<body>
<button type="button" onclick="reqList();">조회</button>
<button type="button" onclick="delList();">삭제</button>
<p id="resp"></p>
<Script>
//성공 : beforeSend -> success -> complete
//실패 : beforeSend -> error -> complete
function reqList() {
//ajax 호출
$.ajax({
//요청 서비스 url 지정
url : "/contact/list.do",
//메소드 타입 지정
type : "GET",
//요청 시 서버로 전달할 데이터 지정
data : { pageno : 1, pagesize : 5 },
//요청 전송 전에 실행될 콜백 함수 지정
beforeSend : function(xhr, settings) {
console.log("before Send");
},
//요청 성공 시 동작할 콜백 함수 지정
success : function(data) {
console.log("success");
//p요소에 서버로부터 응답받은 데이터 표출
$("#resp").html(data);
},
//요청 실패 시 실행될 콜백 함수 지정
error : function(xhr, status, error) {
console.log("error : " + error + ", status : " + status);
},
//요청 완료 시 실행될 콜백 함수 지정
//요청 성공/실패 여부와 관계없이 무조건 실행
complete : function(xhr, status) {
console.log("complete");
}
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</Script>
</body>
</html>
<에러가 발생하는 경우>
* 에러를 발생시키기 위해 list2로 url 변경
3. Ajax - Timeout 실습
<!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>
function reqList() {
//ajax 호출
$.ajax({
//요청 서비스 url 지정
//2초간 지연 발생(2초간 응답이 없음)
url : "/contact/list_long.do",
//메소드 타입 지정
type : "GET",
//1.9초 후에 응답오지 않으면 요청 중단시키고, 에러 콜백 함수 실행(요청 실패했다는 의미)
timeout : 1900,
//요청 시 서버로 전달할 데이터 지정
data : { pageno : 1, pagesize : 5 },
//요청 성공 시 동작할 콜백 함수 지정
success : function(data) {
console.log(data);
//p요소에 서버로부터 응답받은 데이터 표출
$("#resp").html(data);
},
error : function(xhr, status, error) {
console.log("status : " + status + ", error : " + error);
}
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</Script>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
| [Ajax] 12. XHR객체를 이용한 콜백함수 (0) | 2021.10.06 |
|---|---|
| [Ajax] 11. Ajax 단축 메소드 (0) | 2021.10.06 |
| [Ajax] 09. Ajax Bootstrap table로 나타내기 (0) | 2021.10.06 |
| [Ajax] 08. Ajax POST방식과 Json POST방식 (0) | 2021.10.06 |
| [Ajax] 07. Ajax 동기 방식(Sync)과 비동기 방식(Async) (0) | 2021.10.06 |
댓글