jquery에서 ajax를 사용시에는 보통 아래와 같은 단계를 거친다.
1. beforeSend : ajax로 지정된 페이지와 통신을 하기 전에 발생 한다.
2. success : ajax가 잘 실행되고 나면 발생한다.
2. error : ajax가 잘못 실행되고 나면 발생한다.
3. complete : ajax의 결과가 success나 error로 결정 난뒤에 발생한다.
그리고 위 이벤트들은 보통 해당 ajax에서만 캐치해서 사용하는것이다.
그렇다면 어떤 ajax든 일어나고 난뒤에는 특정 행위가 발생 할 수 있게 할순 없을까?
그래서 있는 이벤트가 아래와 같다.
참고 링크 :
https://api.jquery.com/Ajax_Events/
ajaxStart
ajaxSend
ajaxSuccess
ajaxError
ajaxComplete
ajaxStop
global이벤트는 여러 ajax 이벤트가 함께 일어날때 사용 되는 것이기 때문에,
ajaxStart는 ajax가 실행되었을때, 다른 ajax 이벤트는 실행이 안되었을경우.. 즉, 여러 ajax가 동시에 실행될 경우, 처음으로 ajax가 실행되면 발생하고,
ajaxStop은 더이상의 실행되는 ajax요청이 없을때 발생한다.
예를 들어 아래와 같은 소스가 있다면,
$(document).on("ajaxComplete", function(){
console.log('ajax complete');
});
위와 같은 소스일 경우 해당 페이지 안에서 어떤 ajax 됐던 해당 ajax가 complete 될때 마다 log가 찍히게 될 것이다.
삭제 대비용 원본글 복사
Ajax Events
Ajax requests produce a number of different events that you can subscribe to. Here's a full list of the events and in what order they are triggered.
There are two types of events:
Local Events
These are callbacks that you can subscribe to within the Ajax request object, like so:
|
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});
|
Global Events
These events are triggered on the document, calling any handlers which may be listening. You can listen for these events like so:
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
Global events can be disabled for a particular Ajax request by passing in the global option, like so:
|
$.ajax({
url: "test.html",
global: false,
// ...
});
|
Events
This is the full list of Ajax events, and in the order in which they are triggered. The indented events are triggered for each and every Ajax request (unless a global option has been set). The ajaxStart and ajaxStop events are events that relate to all Ajax requests together.
- ajaxStart (Global Event)
This event is triggered if an Ajax request is started and no other Ajax requests are currently running.
- beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
- ajaxSend (Global Event)
This global event is also triggered before the request is run.
- success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data).
- ajaxSuccess (Global Event)
This event is also only called if the request was successful.
- error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
- ajaxError (Global Event)
This global event behaves the same as the local error event.
- complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
- ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
- ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.