SpringMVC - [ REST API와 Ajax ]

1. JSON

JSON(Java Script Object Notation)은 자바 스크립트 객체 표기법으로 아래와 같이 표기한다.

{ 속성명1 : 속성값1,
  속성명2 : 속성값2, ...
}

 

JS객체를 서버로 전송하기 위해선 직렬화(=문자열로 변환)가, 서버가 보낸 데이터(JSON)를 JS객체로 변환할 때는 역직렬화가 필요하다.

데이터를 텍스트 즉 문자열로 바꿀 땐 JSON.stringify()를, JSON 문자열을 객체로 변환할 때는 JSON.parse() 를 사용한다.

JS 객체 -> {name:"John", age:30}

>> JSON.Stringify() >>

String -> '{"name";"John", "age":30}'

 

 

 

---

2. Ajax

Ajax(Asynchronous javascript and XML)란 비동기 통신으로 데이터를 주고 받기 위한 기술로, 웹페이지 전체가 아닌 일부만 업데이트할 수 있다.

 

동기식은 요청을 보낸 후 응답을 받기까지 대기하는 과정이 필요하지만 비동기식은 대기가 필요없고 다른 일을 할 수 있다.

 

Ajax 예시 코드)

$(document).ready(function(){
    let person = {name: "abc", age: 10};
    let person2 = {};
    
    $("#sendBtn").click(function(){
        $.ajax({
            type: 'POST', // 요청 메서드
            urt: '/ch4/send', // 요청 URI
            headers : { "content-type": "appLication/json"}, // 요청 헤더
            datatype : 'text', // 전송할 데이터의 타입
            data : JSON.stringify(person), // 서버로 전송할 데이터. stringify()로 직렬화 필요.
            success: function (result){ person2 = JSON.parse(result); // 서버로부터 응답이 도착하면 호출될 함수
                                        alert (result)              }; // result는 서버가 전송한 데이터

            error: function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
        }); // $.ajax ()	
        
        alert("the request is sent"); // ajax는 비동기식이므로 함수 종료와 상관없이 이 문장이 실행됨
    });
});

 

 

 

 

---

3. REST API

REST API란 REST 규약을 준수하는 API 이다.

다음과 같은 구조를 

RESTful API 설계로 바꿔보면 아래와 같다.

URI의 동사를 없애고 명사만 남기고, 이를 HTTP메서드가 담당하도록 했다.

 

RESTful API 요약해보면 =>

1. URI는 명사 위주로

2. 동작은 HTTP 메서드가 결정

---

참조

https://fastcampus.co.kr/dev_academy_nks

스프링의 정석 : 남궁성과 끝까지 간다 | 패스트캠퍼스