Ajax 통신

 

 

장바구니에 제품을 추가하는 addCart 사례를 통해 ajax로 정보를 전송하는 방법을 알아보겠습니다.

function addCart(){
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");

    var url = "/cart";
    var paramData = {
        itemId : $("#itemId").val(),
        count : $("#count").val()
    };

    var param = JSON.stringify(paramData);

    $.ajax({
        url      : url,
        type     : "POST",
        contentType : "application/json",
        data     : param,
        beforeSend : function(xhr){
            /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
            xhr.setRequestHeader(header, token);
        },
        dataType : "json",
        cache   : false,
        success  : function(result, status){
            alert("상품을 장바구니에 담았습니다.");
            location.href='/';
        },
        error : function(jqXHR, status, error){

            if(jqXHR.status == '401'){
                alert('로그인 후 이용해주세요');
                location.href='/members/login';
            } else{
                alert(jqXHR.responseText);
            }

        }
    });
}

 

CSRF)

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

함수는 HTML 문서의 해당 메타태그에서 CSRF(Cross-Site Request Forgery) 토큰과 헤더를 검색하여 시작합니다.

 

경로 설정)

var url = "/cart";
var paramData = {
    itemId : $("#itemId").val(),
    count : $("#count").val()

URL을 AJAX 요청이 전송 될 엔드포인트로 지정합니다.

그 다음 해당 ID를 가진 HTML 요소에서 itemId 및 count 값을 검색하여 paramData 개체를 구성합니다.

이런 값은 요청 페이로드에 포함됩니다.

 

var param = JSON.stringify(paramData);

paramData 객체는 JSON.stringfy()를 사용해 JSON 문자열로 변환되어 param 변수에 저장됩니다.

 

 

AJAX 옵션

$.ajax({
    url      : url,
    type     : "POST",
    contentType : "application/json",
    data     : param,
    beforeSend : function(xhr){
        /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
        xhr.setRequestHeader(header, token);
    },
    dataType : "json",
    cache   : false,
    success  : function(result, status){
        alert("상품을 장바구니에 담았습니다.");
        location.href='/';
    },

url : 요청이 전송될 URL(이 경우 "/cart")

type : 요청에 사용되는 HTTP 메서드

contentType : 요청 페이로드의 콘텐츠 유형("application/json")

data: JSON 문자열 paramData인 요청 페이로드

beforeSend : 요청을 보내기 전에 실행되는 함수, 요청 헤더에 CSRF 토큰과 헤더를 설정한다.

dataType : 응답의 예상 데이터 유형(JSON)

cache: 요청을 캐시해야 하는지 여부를 나타내는 경우

 

콜백 함수(Success, Error)

success  : function(result, status){
    alert("상품을 장바구니에 담았습니다.");
    location.href='/';
},

요청이 성공하면(HTTP 상태코드 2xx) success 콜백 함수가 실행됩니다. 장바구니에 추가 했다는 알림을 표시한 

다음 사용자를 홈페이지("/")로 리디렉션합니다.

 

error : function(jqXHR, status, error){

    if(jqXHR.status == '401'){
        alert('로그인 후 이용해주세요');
        location.href='/members/login';
    } else{
        alert(jqXHR.responseText);
    }

}

요청에 오류가 발생하면 error 콜백 함수가 실행됩니다. 오류 응답의 HTTP 상태코드를 확인하고

401(권한 없음)인 경우 "로그인하여 사용하십시오"라는 경고가 표시되고 사용자는 로그인 페이지로 리디렉션됩니다.

그렇지 않으면 오류 응답 텍스트가 경고에 표시됩니다.

 

 

그럼 여기서 한가지 의문이 듭니다. 

success인지 error인지는 어떻게 판단하는 것일까?

 

Ajax 통신 Success or Error 판단

위에서 url로 경로 설정을 완료하면 경로에 해당하는 값으로 이동합니다.

CartController의 order 메소드로 이동해보겠습니다.

 

위 코드를 보면 에러가 발생할 경우 HttpStatus.BAD_REQUEST

에러가 발생하지 않을 경우 HttpStatus.OK를 반환하는 것을 확인 할 수 있습니다

 

new ResponseEntity<String>(sb.toString(), HttpStatus.BAD_REQUEST)를 반환하는 경우 응답이 잘못된 요청(HTTP 상태 코드 400)을 나타내고 있음을 의미합니다.

 

반면에 new ResponseEntity<Long>(cartItemId, HttpStatus.OK)를 반환하면 응답이 성공적인 요청(HTTP 상태 코드 200)을 나타내고 있음을 의미하며, 이는 AJAX에서 success 함수를 트리거합니다.

 

요약하면 ResponseEntity에 설정한 HttpStatus가 AJAX 통신의 성공 또는 실패를 결정하는 것을 확인할 수 있습니다.