[JS] AJAX 호출

자주 써도 헷갈리는 ajax 스크립트 한번에 정리

 

success & error & complete

GET

- 서버에서 데이터 조회

$.ajax({
    url: url
    type: 'GET',
    async: true, // 기본값은 비동기, false일 경우 동기 요청으로 변경
    dataType : 'json', // 서버로부터 수신할 데이터 타입 xml, script, html, text..
    beforeSend: function (xhr) {
        // ajax 요청 전 실행되는 내용
    }, success: function (result) {
        // 성공 시 수행할 내용
    }, error: function (error) {
        // 실패 시 수행할 내용
    }, complete: function(data) {
        // 성공 실패와 상관없이 항상 수행할 내용
    }
});

POST / PUT

- 서버에 데이터 전송

$.ajax({
    url: url,
    type: 'POST',
    contentType: 'application/json', // 전송할 데이터 타입
    // 기본 값 : "application / x-www-form-urlencoded; charset = UTF-8"  
    data: JSON.stringify({
        // 전송할 데이터
    }),
    beforeSend: function (xhr) {
        // ajax 호출 전 실행되는 내용
    },
    success: function (result) {
        // 성공 시 수행할 내용
    }, error: function (error) {
        // 실패 시 수행할 내용
    }, complete: function(data) {
        // 성공 실패와 상관없이 항상 수행할 내용
    }
});

 

done & fail & always

$.ajax ({
    url : url,
    type: 'GET',
    dataType: 'json',
    ...
})
.done(function(){
    // 요청 성공 시 실행할 콜백함수
})
.fail(function(){ 
    // 요청 실패 시 실행할 콜백함수
})
.always(function(){ 
    // 성공 실패와 상관없이 항상 호출
})

 

성공시 호출 순서 : success -> complete -> done -> always

실패시 호출 순서 : error -> complete -> fail -> always

 

 

success 와 done의 차이?

https://api.jquery.com/

jQuery API Documentation

success()
A function to be called if the request succeds.

.ajaxSuccess() (success & .ajax() option)
Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event

.done()
Add hanlders to be called when the Deferred object is resolved

 

[stackoverflow] https://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done

jQuery.ajax handling continue responses: "success:" vs ".done"?