[SpringBoot] ajax 에서 사용하는 속성 살펴보기!

# ajax - settings example code

Spring Boot Thymeleaf(html) 에서 jQuery Ajax settings option코드 예시

# 환경

/**
 * tool: STS 4.13.0
 * version: 2.7.3-SNAPSHOT
 * java: 1.8
 * type: MAVEN
 * view: THYMELEAF
 * jQuery: 3.6.0
 */

# jQuery Load

<!-- 파일 -->
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.6.0.min.js}"></script>
<!-- jQuery URL -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

# ajax example code

// Ajax Send
function send(url, method, input, isAsync, type, cbSuccess, cbError, cbComplate) {
    const ajaxObj = 
    $.ajax(url,
    // #1. settings
        {
            method      : method,
            async       : isAsync,
            data        : input,
            contentType : type,
            processData : true,
            dataType    : 'json',
            beforeSend  : function(jqXHR, settings) {
                jqXHR.setRequestHeader('header-name', 'header-value');
                if(url === undefined) {
                    throw 'URL은 필수 입력 값 입니다.';
                    // return false;
                } else if(typeof cbSuccess !== 'function') {
                    throw 'CALLBACK 함수는 필수 입력 값 입니다.';
                    // return false;
                }
                console.log("INPUT: ", settings.data);
            }
    // #2. success
        }).done(function(data, textStatus, jqXHR) {
            cbSuccess(data);
    // #3. error	
        }).fail(function(jqXHR, textStatus, errorThrown) {
            let error = jqXHR.responseJSON;
            let message = '요청 중 알수 없는 오류가 발생했습니다.';
            if(error != null) {
                if(error.message != null && error.message !== undefined && error.message !== "") {
                    message = error.message;
                }
                switch(error.status) {
                    case 403: alert("권한이 없습니다."); break;
                    case 404: alert("존재하지 않은 페이지입니다."); break;
                    case 500:
                    default : alert(message); break;
                }
            } 
            if(typeof cbError === 'function') {
                cbError(jqXHR.responseJSON);
            }
    // #4. complete
        }).always(function(_, _, _) {// 1:data|jqXHR, 2:textStatus, 3:jqXHR|errorThrown
            if(typeof cbComplate === 'function') {
                cbComplate(jqXHR.responseJSON);
            }
        }
    );
    // #5. then complete
    ajaxObj.always(function(output, _, _) {// 1:textStatus, 2:jqXHR
        if(typeof cbComplateThen === 'function') {
            cbComplateThen(output);
        }
    });
}

#1. Settings

• url: 요청하는 URL.
• method: http method 속성 정의.
  • default: GET
  • 요청하고자 하는 http method 방식을 적는다. (get, post, put, patch, delete)
• async: 동작 방식 설정.
  • default: true
  • false일 경우, 동기 이므로 ajax 처리가 끝난 후에 다음 코드를 실행.
• data: 서버로 보낼 데이터
  • String 이나 Object 타입.
  • GET이면  URL 에 추가 되고, 본문을 사용하는 http method는 BODY에 추가 됨.
• contentType: 서버로 보낼 데이터의 타입을 정의.
  • default: 'application/x-www-form-urlencoded; charset=UTF-8'
  • json형식으로 보낸다면, 'application/json; charset=UTF-8'
  • file을 보낸다면, false(=multipart/form-data)
  • 예시) data가 {code:1001, test:"테스트"} 로 Object형식이라면,
  • urlencoded: code=1001&test=%ED%85%8C%EC%8A%A4%ED%8A%B8
  • json: {"code":1001,"test":"테스트"}
  • false: {code:1001, test:"테스트"}
• processData: 서버로 보낼 데이터를 serialize(=직렬화) 처리 설정.
  • default: true
  • 예시) data가 {code:1001, test:"테스트"} 로 Object형식이라면,
  • true일 경우,  code=1001&test=%ED%85%8C%EC%8A%A4%ED%8A%B8 로 직렬화가 된다.(인코딩처리)
  • false일 경우, {code:1001, test:"테스트"} 로 직렬화가 이루어 지지않는다.
  • contentType이 urlencoded, json 이라면 true
  • contentType이 false(=multipart/form-data) 이라면 false
• dataType: 서버에서 전달받은 데이터의 형식.
  • default: 데이터의 형식을 추측하여 xml, json, script, or html 등으로 설정 됨.
  • 일반적으로 응답데이터는 'json'을 많이 사용하는 듯 하다.(={"code":1001,"test":"테스트"})
• beforeSend: 서버로 ajax 요청 전 처리 설정.
  • arg1(=jqXHR) 요청 전 사용자 정의 헤더를 설정. jqXHR.setRequestHeader('header-name', 'header-value')
  • arg2(=settings) 요청 전 직렬화처리된 입력값 확인. settings.data
  • 해당 함수의 return이 false일 경우, 요청하지 않음.
  • 해당 함수에서 throw '메시지' 에러가 발생할 경우에도 요청하지 않음.

#2. Success (=done)

• jQuery 3.0 부터 success 함수가 done으로 바뀜.
• ajax 요청이 성공 했을 때, 호출되는 함수.
• arg1(=data): 서버에서 응답받는 데이터
• arg2(=textStatus): ajax 통신의 상태 메시지. (="success")
• arg3(=jqXHR): ajax의 객체임.

#3. Error (=fail)

• jQuery 3.0 부터 error함수가 fail으로 바뀜.
• ajax 요청이 실패 했을 때, 호출되는 함수.
• arg1(=jqXHR): ajax의 객체임.
• arg2(=textStatus): ajax 통신의 상태 메시지. (="error","notmodified","nocontent","timeout","abort","parsererror")
• arg3(=errorThrown): "Not Found" or "Internal Server Error." 같은 HTTP 상태의 텍스트 부분을 수신함.

#4. Complete (=always)

• jQuery 3.0 부터 complete 함수가 always 으로 바뀜.
• ajax 요청이 성공 또는 실패 이후 호출되는 함수.
• arg1(=data | jqXHR): 성공 시, 서버 응답데이터 | 실패 시, ajax 객체
• arg2(=textStatus): ajax 통신의 상태 메시지. (="success","error","timeout","parsererror")
• arg3(=jqXHR | errorThrown): 성공 시, ajax객체 | 실패 시, "Not Found" or "Internal Server Error." 같은 HTTP 상태의 텍스트 부분을 수신

#5. Then complete (=always)

• ajax 의 통신이 완료되고, 해당 ajax 객체의 always 함수를 이용하여 한번 더 함수를 호출 할 수 있다.
• 통신이 완전히 종료 된후의 후처리 느낌이 남.

# 후기

• 예전(3.0 이전)에 사용하던 ajax 의 방식이 조금 달라져서 한번 정리 해봄.
• 그 김에 얼추 알고있던 내용을 document 찾아가면서 한번 더 확실하게 정리.
• jQuery에서 ajax 요청은 확실하게 알고 있는게 좋은 것 같다.
• contentType이 urlencoded, json, multipart 로 요청하는 실습 코드는 아래 참조 확인!!

# ajax 요청 방식에 따른 파라미터 맵핑 방법.

https://hjho95.tistory.com/14 ajax settings
https://hjho95.tistory.com/7 application/x-www-form-urlencoded
https://hjho95.tistory.com/8 application/json
https://hjho95.tistory.com/9 form tag
https://hjho95.tistory.com/10 multipart/form-data
https://hjho95.tistory.com/12 PUT, PATCH, DELETE
https://hjho95.tistory.com/11 POST 방식으로 PUT, PATCH, DELETE 사용하기

# ajax 시리즈의 참조 페이지.

ajax settings: https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings