Ch. 04 REST API와 Ajax

1. JSON 이란?

- Java Script Object Notation : 자바 스크립트 객체 표기
- XML은 너무 복잡함, JSON으로 데이터 교환

- {속성명1:속성값1, 속성명2:속성값2,...} 이런 형식
- [{속성명:속성값,...}, {속성명:속성값,...}, ...]  : 객체 배열
- {키1:{속성명:속성값,...}, 키2:{속성명:속성값,...}, ...} : Map

 

2. stringify()와 parse()

- JS객체를 서버로 전송하려면, 직렬화(문자열로 변환)가 필요함
- 서버가 보낸 데이터(JSON 문자열)를 JS 객체로 변환할 때, 역직렬화가  필요

- JSON.stringify() : 객체를 JSON 문자열로 변환
- JSON.parse() : JSON 문자열을 객체로 변환

 

3. Ajax란?

- Asynchronous javascript and XML : 요즘은 JSON을 주로 사용
- 비동기 통신으로 데이터를 주고 받기 위한 기술
- 웹페이지 전체(data+UI)가 아닌 일부(data)만 업데이트 가능 

 

[참고]

1. JS 객체를 stringify()로 문자열로 변환하여 서버에 요청을 보낸다.
2. 서버가 해당 문자열을 jackson-databind를 이용해 Java 객체로 만들고 해당 요청을 수행한다.
3. @ResponseBody랑 @RequestBody 필요 
4. 그리고 객체 결과를 jackson-databind를 사용하여 다시 문자열로 바꾼다
5. 문자열을 보내주면 JSON.parse()를 통해 다시 JS 객체로 변환이 가능하다. 

 

<ajax.jsp>

<script>
  $(document).ready(function(){
    let person = {name:"abc", age:10};
    let person2 = {};
    $("#sendBtn").click(function(){
      $.ajax({
        type:'POST',       // 요청 메서드
        url: '/ch4/send',  // 요청 URI
        headers : { "content-type": "application/json"}, // 요청 헤더
        dataType : 'text', // 전송받을 데이터의 타입
        data : JSON.stringify(person),  // 서버로 전송할 데이터. stringify()로 직렬화 필요.
        success : function(result){
          person2 = JSON.parse(result);    // 서버로부터 응답이 도착하면 호출될 함수
          alert("received="+result);       // result는 서버가 전송한 데이터
          $("#data").html("name="+person2.name+", age="+person2.age);
        },
        error   : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
      }); // $.ajax()
      alert("the request is sent")
    });
  });
</script>

 

<SimpleRestController.java>

    @PostMapping("/send")
    @ResponseBody
    public Person test(@RequestBody Person p) {
        System.out.println("p = " + p);
        p.setName("ABC");
        p.setAge(p.getAge() + 10);

        return p;
    }

 

4. @RestController

- @Controller 대신 @RestController를 사용하면 @ResponseBody를 안써도  

@RestController
public class SimpleRestController {

    @PostMapping("/send")
//    @ResponseBody
    public Person test(@RequestBody Person p) {
        System.out.println("p = " + p);
        p.setName("ABC");
        p.setAge(p.getAge() + 10);

        return p;
    }
    ...

 

5. REST란?

- Roy Fielding이 제안한 웹서비스 디자인 아키텍쳐 접근 방식
- 프로토콜에 독립적이며, 주로 HTTP를 사용해서 구현
- **리소스 중심의 API 디자인 : HTTP 메서드로 수행할 작업을 정

[출처] https://docs.microsoft.com/ko-kr/azure/architecture/best-practices/api-design

 

6. REST API란?

- Representational State Transfer API : REST 규약을 준수하는 API
- API (Application Programming Interface)

 

7. RESTful API 설계

<예시 - 이전>

작업	URI	HTTP메서드	설명
읽기	/comment/read?cno=번호	GET	지정된 번호의 댓글을 보여준다.
쓰기	/comment/write	POST	작성한 게시물을 저장한다.
삭제	/comment/remove	POST	댓글을 삭제한다.
수정	/comment/modify	POST	수정된 게시물을 저장한다.

 

<RESTful API 적용> - URI가 더 간단 

작업	URI	HTTP메서드	설명
읽기	/comments	GET	모든 댓글을 보여준다.
읽기	/comments/{cno}	GET	지정된 번호의 댓글을 보여준다.
쓰기	/comments	POST	새로운 댓글을 저장한다.
삭제	/comments/{cno}	DELETE	지정된 번호의 댓글을 삭제한다.
수정	/comments/{cno}	PUT / PATCH	수정된 댓글을 저장한다.