jQuery의 ajax - 전역 ajax 이벤트 처리
- 전역 ajax 이벤트는 페이지 수준에서 모든 ajax요청에 대한 공통의 이벤트 처리 기능을 지원한다.
- 개별적인 ajax 요청이후 전역 ajax 이벤트가 발생된다
1. 종류
- ajaxStart(handler) : 처리 중인 ajax 요청이 없는 상태에서 처음으로 ajax 요청이 일어날 때 발생되는 이벤트. 이미 ajax 요청이 진행 중인 상태에서 새로운 ajax 요청을 하는 경우에는 이 이벤트가 발생하지 않는다
handler:
function
(){}
- ajaxSend(handler): 각각의 ajax 요청이 전송되기 전에 발생되는 이벤트, 현재 ajax 요청이 진행 중이라 하더라도 매번 이벤트가 발생
handler:
function
(event, xhr, options){}
//event: 이벤트객체
//xhr: jquey xhr 객체
//options: ajax옵션객체
- ajaxSuccess(handler): 각각의 ajax요청에 대한 처리가 성공인 경우에 발생되는 이벤트
handler:
function
(event, xhr, options, data){}
//event: 이벤트객체
//xhr: jquey xhr 객체
//options: ajax옵션객체
//data: 서버로부터 응답된 데이터
- ajaxError(handler): 각각의 ajax 요청에 대해 오류가 일어 났을 때 발생
handler:
function
(event, xhr, options, error){}
//event: 이벤트객체
//xhr: jquey xhr 객체
//options: ajax옵션객체
//error: 오류메시지
- ajaxComplete(handler): 각각의 ajax요청이 완료되었을 때 발생되는 이벤트, 항상 발생한다
handler:
function
(event, xhr, options){}
//event: 이벤트객체
//xhr: jquey xhr 객체
//options: ajax옵션객체
- ajaxStop(handler) : 처리 중인 ajax 요청이 모두 완료된 상태가 되었을 때 발생
handler:
function
(){}
2. 사용
$(document).ajaxStart(
function
(){
console.log();
}).ajaxStop(
function
(){
console.log();
}).ajaxSend(
function
(){
...
- 로딩 효과는 ajaxSend와 ajaxComplete 이벤트에 적합하다
'Front-End > jQuery' 카테고리의 다른 글
[jQuery]jQuery의 ajax - 헬퍼 함수 (0) | 2018.07.17 |
---|---|
[jQuery]jQuery의 ajax - 단축 메서드와 jqXHR객체 (0) | 2018.07.17 |
[jQuery] jQuery의 ajax - 저수준 인터페이스 메서드 (0) | 2018.07.17 |
[jQuery] 외부 파일 드래그 드롭 구현 (0) | 2017.01.12 |
[jQuery] 다른 어플 텍스트 드랍앤 드롭 (0) | 2017.01.12 |