[jQuery] Ajax의 Success와 Done의 차이

Ajax의 동작 방식

브라우저에서 Ajax 요청을 담당하는 XMLHttpRequest라는 객체를 통해 서버에 정보를 요청, 응답받음

 

콜백 동작 순서

성공 시 : success > complete > done > always

실패 시 : error > complete > fail > always

 

jQuery를 이용한 Ajax

Ajax의 기본 Method를 이용하면 XMLHttpRequest를 직접 사용하게 되는데 때문에 이러한 복잡한 과정 없이 jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있음

또한 크로스 브라우징 문제도 jQuery가 알아서 해결해주고 여러 가지 편리한 기능들을 제공

 

 

$.ajax([settings]) 함수의 property

https://api.jquery.com/jquery.ajax/

$.ajax ({  
    url		: "url", // (Required) 요청이 전송될 URL 주소
    type	: "GET", // (default: ‘GET’) http 요청 방식
    async	: true,  // (default: true, asynchronous) 요청 시 동기화 여부
    cache 	: true,  // (default: true, false for dataType 'script' and 'jsonp') 캐시 여부
    timeout : 3000, // (ms) 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백 호출
    data  	: {key : value}, // 요청 시 전달할 데이터
    processData : true, // (default: true) 데이터를 컨텐트 타입에 맞게 변환 여부
    contentType : "application/json", // (default: 'application/x-www-form-urlencoded; charset=UTF-8')
    dataType    : "json", // (default: Intelligent Guess (xml, json, script, or html)) 응답 데이터 형식
    beforeSend  : function () {
    	// XHR Header 포함, HTTP Request 하기전에 호출
    }, 
    success : function(data, status, xhr) {
    	// 정상적으로 응답 받았을 경우 파라미터는 응답 바디, 응답 코드 그리고 XHR 헤더
    },
    error	: function(xhr, status, error) {
    	// 응답을 받지 못하거나 정상적인 응답이지만 데이터 형식을 확인할 수 없는 경우
    },
    complete : function(xhr, status) {
    	// success와 error 콜백이 호출된 후에 반드시 호출, try - catch - finally의 finally 구문과 동일
    }
});

 

---

success와 .done()의 차이

success / error의 형태

$.ajax({  
    url: 'URL',
    type: 'POST',
    data: yourData,
    datatype: 'json',
    success: function (data, textStatus, xhr) { },
    error: function (xhr, textStatus, errorThrown) { },
    complete: function(xhr, status) { }
});

 

.done() / .fail()의 형태

$.ajax({  
    url: 'URL',
    type: 'POST',
    data: yourData,
    datatype: 'json'
})
.done(function(data, textStatus, xhr) { });
.fail(function(xhr, textStatus, errorThrown) { });
.always(function(data|xhr, textStatus, xhr|errorThrown) { });
.then(function(data, textStatus, xhr|errorThrown) { });

형태를 보면 거의 유사하다는 것을 알 수 있는데 success는 jQuery에서 성공 콜백의 기본 이름으로, ajax 호출 옵션으로 정의됨

그러나 $.Deferreds와 더 정교한 콜백의 구현 이후, done은 어떤 deferred에서도 호출될 수 있기 때문에 성공 콜백을 구현하는 데 선호되는 방법임

또한 promises 패턴인 .done()이 좀 더 깔끔함

 

done의 장점

done의 좋은 점은 $.ajax의 반환 값이 이제 애플리케이션의 다른 곳과 연결될 수 있는 지연된 promise이라는 것

그래서 ajax를 몇 군데 다른 곳에서 걸려고 한다면 이 ajax 호출을 만드는 함수의 옵션으로 성공 함수를 전달하는 대신, 함수 자체에서 $.ajax를 반환하고 콜백을 done, fail, then 등으로 바인딩할 수 있음

always은 요청의 성공 여부에 관계없이 실행되고 done는 성공할 때만 트리거 됨

function xhr_get(url) {  
    return $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        beforeSend: showLoadingImgFn
    })
    .always(function() {
    	// remove loading image maybe
    })
    .fail(function() {
    	// handle request failures
    });
}
xhr_get('/index').done(function(data) {
	// do stuff with index data
}); 
xhr_get('/id').done(function(data) {
	// do stuff with id data
});

유지관리 용이성 측면에서 중요한 이점은 애플리케이션별 기능에 ajax 메커니즘을 적용했다는 것

나중에 앱의 다른 모든 참조는 동일하게 유지하면서 다르게 동작하게 해야 한다면 xhr_get의 정의만 변경하면 됨 ($.ajax 호출이 필요하거나, 다른 ajax 메서드를 사용하거나, jQuery를 삭제하거나)

 

 

---

참고 : https://string.tistory.com/128

 

$.Deferred 참고 : http://api.jquery.com/category/deferred-object/