[jQuery] - ajax 완전 정복

먼저

예시코드 2가지를 살펴보고,

하나씩 자세히 뜯어보자

 

ajax 예시 코드 1

$.ajax({
    url: 요청을 보낼 URL(ex: "comment/writeComment.do"),
    type: 요청을 보내는 방식(ex: "GET", "POST", "DELETE", "PUT"),
    data: 보내는 데이터 형식(ex: formData), // controller의 consume
    dataType: 받는 데이터 형식(ex: "json"), // controller의 produces
    // 기타 설정
    async: false // 동기 처리 여부(default: true),
    contentType: 서버로 보내는 데이터의 MIME 타입
    (ex: "application/x-www-form-urlencoded; charset=UTF-8"), 
    headers: 추가적인 HTTP 헤더 (ex: { 'X-My-Custom-Header': 'CustomValue' }), 
    processData: 데이터 객체를 쿼리 문자열로 변환할지 여부(default: true),
    timeout: 요청 타임아웃 시간(ex: 5000), // 밀리초 
    global: 글로벌 AJAX 이벤트 핸들러에 영향 여부(defalut: true), 
    traditional: 전통적인 방식으로 데이터 직렬화 여부(default: false),  
    xhrFields: CORS 요청에 인증 정보 포함 여부
    (ex: {withCredentials: true(default: false)} (default: {null})),    
    statusCode: { // HTTP 상태 코드에 따른 콜백
        404: function() { // ex
            alert('Not found!');
        }
    },

    beforeSend: function(xhr) {
         // ajax 성공 시 로직. 받은 데이터 활용 가능
        ...
    },
    success: function(response) {
        // ajax 성공 시 로직. 받은 데이터 활용 가능
        ...
    },
    error: function(xhr, status, error) {
        // ajax 실패 시 로직. 에러 출력 가능
        ...
    },
    complete: function(xhr, status) {
        // 성공, 실패와 상관없이 실행. catch문의 finally 느낌
        // 당연히 success나 error 이후 실행
        ....
    }
});

 

ajax 예시 코드 2

$.ajax({
    url: 요청을 보낼 URL(ex: "comment/writeComment.do"),
    type: 요청을 보내는 방식(ex: "GET", "POST", "DELETE", "PUT"),
    data: 보내는 데이터 형식(ex: formData), // controller의 consume
    dataType: 받는 데이터 형식(ex: "json"), // controller의 produces
    // 기타 설정
    async: false // 동기 처리 여부(default: true),
    contentType: 서버로 보내는 데이터의 MIME 타입
    (ex: "application/x-www-form-urlencoded; charset=UTF-8"), 
    headers: 추가적인 HTTP 헤더 (ex: { 'X-My-Custom-Header': 'CustomValue' }), 
    processData: 데이터 객체를 쿼리 문자열로 변환할지 여부(default: true),
    timeout: 요청 타임아웃 시간(ex: 5000), // 밀리초 
    global: 글로벌 AJAX 이벤트 핸들러에 영향 여부(defalut: true), 
    traditional: 전통적인 방식으로 데이터 직렬화 여부(default: false),  
    xhrFields: CORS 요청에 인증 정보 포함 여부
    (ex: {withCredentials: true(default: false)} (default: {null})),    
    statusCode: { // HTTP 상태 코드에 따른 콜백
        404: function() { // ex
            alert('Not found!');
        }
    },

    beforeSend: function(xhr) {
        // ajax가 서버에 요청하기 전 실행
    }
})
.done(function(response) {
    // ajax 성공 시 로직. 받은 데이터 활용 가능
    ...
})
.fail(function(xhr, status, error) {
    // ajax 실패 시 로직. 에러 출력 가능
    ...
})
.always(function(xhr, status) {
    // 성공, 실패와 상관없이 실행. catch문의 finally 느낌
    // 당연히 success나 error 이후 실행
    ....
});

 

 

<URL>

ajax 요청을 보낼

url을 지정하는 부분이다

MVC 구조에서는

보통 Controller 를 호출하게 된다

example: "comment/writeComment.do"

 

<type>

데이터 요청을 보내는

방식을 지정하는 부분이다

보통 GET, POST 를 많이 사용한다

 

PUT, DELETE 도 존재하지만,

일부 브라우저, 서버 또는 백엔드 프레임워크에서

지원하지 않는 경우가 있으니 주의 필요

 

또한 PUT 의 경우,

멱등성을 보장해야 한다

(여러 번 수행 시 결과의 동일성)

 

<data>

보내는 데이터의

형식을 지정하는 부분이다

MVC 구조 Controller 의

consumes 와 연결된다

 

폼 데이터, JSON 객체,

쿼리 문자열, JavaScript 객체,

XML 데이터, text 데이터

등등의 형식을 지정할 수 있다

 

<dataType>

받는 데이터의

형식을 지정하는 부분이다

MVC 구조 Controller의

produces 와 연결된다

 

text, script

JSON, XML, HTML

등등의 형식을 지정할 수 있다

 

<async>

ajax 요청을

동기 방식으로 수행할 것인지,

비동기 방식으로 수행할 것인지

설정하는 부분이다

 

기본값은 false 이며,

true 로 설정 시

요청이 완료될 때까지

사용자의 다른 동작을 막을 수 있다

 

<contentType>

 데이터를 보낼 때

사용하는 MIME 타입을

설정하는 부분이다

 

기본값은

'application/x-www-form-urlencoded;

charset=UTF-8' 이다

 

MIME 타입이란

(Multipurpose Internet Mail Extensions type)

파일 형식을 나타내는

인터넷 표준이다

이메일에서 사용되기 시작했지만,

현재는 웹에서 데이터를

전송할 때 사용된다

 

"type/subtype" 형식으로 구성되며,

데이터의 형식과 처리 방법을 정의한다

 

<headers>

데이터 요청에

사용자 정의 HTTP 헤더를

추가하는 기능이다

 

예를 들어,

인증 토큰을 전송하거나

데이터 요청의

언어를 지정할 수 있다

 

<processData>

자동 변환을

비활성화하는 기능이다

 

기본적으로 jQuery 는

data 옵션에 객체가 제공되면

이를 쿼리 문자열로 변환하는데,

 

기본값은 true 이지만

이미 쿼리 문자열이거나,

다른 형식으로 인코딩 된 경우

false 로 지정할 수 있다

 

<timeout>

요청이 걸리는

시간을 제어하는 기능이다

 

지정된 시간이 지날 경우,

실패한 것으로 간주되며

네트워크 지연이나

서버 문제로 인한

무한 대기를 방지할 수 있다

 

<global>

특정 ajax 요청이

jQuery 글로벌

이벤트 핸들러에 의해

처리 여부를 설정하는 기능이다

 

기본값은 true 이며,

false 로 설정 시

특정 ajax 요청에 대해서는

트리거 되지 않도록 설정할 수 있다

 

<traditional>

객체나 배열을

직렬화하는 방식을

제어하는 기능이다

 

기본 값은 true 이며,

서버와 프레임워크와

호환될 경우 false 로 설정 시

데이터가 복잡한 구조를 가지고 있을 때

(중첩된 배열)

더 쉽게 해석할 수 있도록 돕는 기능이다

 

<xhrFields>

생성되는

'XMLHttpRequest' 객체에

직접적으로 필드를 설정할 수 있는 기능이다

 

특정한 요구 사항에 맞춰

ajax 요청을

더욱 세밀하게 제어할 수 있다

 

withCredentials, responseType

Custom XHR Properties

등등으로 지정할 수 있으며,

 

이 옵션을 사용할 때는

브라우저의 호환성과

보안 측면을 필수적으로 고려해야 할 것

 

<statusCode>

서버 응답의 HTTP 상태 코드에

따라 다른 콜백 함수를

실행할 수 있도록 지원하는 기능이다

 

예시로

404 상태 코드에 대해

특정 함수를 실행하도록

설정할 수 있다

 

<beforeSend>

ajax 요청이

서버로 전송되기

이전에 호출되며,

 

해당 콜백을 사용하여

요청을 수정하거나

설정을 추가할 수 있다

 

<success>

ajax 요청이

성공할 경우 호출되며,

 

성공에 대한

후속 작업을 진행한다

 

<error>

ajax 요청이

실패할 경우 호출되며,

 

네트워크 오류,

타임아웃, 서버 오류 등

 

요청 실패의 원인을

처리하거나 에러를

사용자에게 알릴 수 있다

 

<complete>

ajax 요청의

성공 / 실패 여부와 관계없이

요청이 끝난 뒤,

항상 실행되는 부분이다

 

주로 요청의 종료에 대한

정리 작업을 수행하는 데 사용되며,

try - catch 문의 finally와 유사하다

 

<.done .fail .always>

기본적인 특성들은

동일하나 몇가지

차이점이 존재한다

 

1. 콜백의 실행 순서

success, error , complete 은

ajax 호출에 직접정으로 정의되기 때문에

요청의 생명주기와 밀접하게

연결되어 있지만,

 

.done(), .fail(), .always() 의 경우에는

ajax 호출이 반환한

프로미스 객체에 정의되기 때문에

유연성을 제공한다

 

 2. 호환성

기존 sucess, error, complete 은

jQuery 의 초기 버전부터 지원되나,

.done(), .fail(), .always() 는

jQuery 1.5 이상부터 도입되었다

따라서 오래된 버전의 jQuery에서는

사용이 불가하다는 특징이 있다

 

3. 에러 핸들링과 다중 요청 처리

에러와 관련하여

더욱 직관적으로 다룰 수 있으며,

 

여러 ajax 요청을

쉽게 조합하고 관리할 수 있다

 

 

 

 

 

추가적인 설정을 희망하시는 경우

아래 링크를 참고 바랍니다

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