[Spring] REST(Representational State Transfer), JSON(JavaScript Object Notation), Ajax(jQuery)

1. REST란?

"하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다."

• REST(Representational State Transfer) 란 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미하며 자원의 표현과 상태(정보) 전달을 하는 것
• URI를 통해 자원을 명시하고, HTTP Method(GET, POST, DELETE, PUT...)를 통해 자원에 대한 행위(CRUD Operation)를 적용하고 자원을 JSON, XML, TEXT ... 들 여러 형태의 표현으로 나타내어 데이터를 주고 받는다.
• CRUD Operation
  • Create : 생성(POST)
  • Read : 조회(GET)
  • Update : 수정(PUT, PATCH)
  • Delete : 삭제(DELETE)
• 회원가입이나 게시판 생성 등은 POST 방식
  데이터 조회나 게시판 조회는 GET 방식
  회원 탈퇴나 게시판 삭제는 DELETE 방식
  회원 정보 수정이나 게시판 수정은 PUT 또는 PATCH 방식
• 일반 : /board/get?boardnum=10
  REST 방식 : /board/get/10

2. JSON(JavaScript Object Notation)

• 자바스크립트에 있는 객체의 형태대로 서로 다른 언어들끼리 데이터를 주고받을 수 있도록 해주는 공용어
• Key-Value 구조로 이루어진 텍스트를 이용하는 개방형 표준 포맷
• {key:value} 형태
• List<BoardDTO> list
  "[
         {boardnum:1, boardtitle:제목, boardcontents:내용},
         ...
  ]"
• 즉, Ajax를 이용해서 서버에서 데이터를 가져올 때 객체의 형태로는 가져올 수 없기 때문에 공용어인 JSON 형태로 만들어 가져와서 반복문을 이용해서 데이터를 뿌려준다.

3. Ajax(Asynchronous Javascript and XML) - jQuery

- 이전의 썼던 Ajax랑 같은 것이지만 이전 것은 JavaScript를 기반으로 Ajax를 작성했다면 여기서의 Ajax는 jQuery를 기반으로 해서 REST랑 연관한 Ajax이다.

- 그래서 기본적으로 Ajax의 정의와 의미는 전에 쓰였던 Ajax와 동일하다.

https://tadaktadak-it.tistory.com/93

[JSP] Ajax(Asynchronous Javascript and XML), GET/POST 방식

- 기본적인 jQuery 기반의 Ajax 이용

$.ajax({
    type:"데이터 방식",
    url:"요청을 보낼 URI",
    data:"URI로 보낼 데이터", 		// 보낼 데이터가 있을 때만 작성 
    contentType:"보낼 데이터의 타입"   // 보낼 데이터가 있을 때만 작성
    success:function(result, status) {
    	// 성공할 시 수행할 함수
        // result:성공시 결과 객체
        // status:상태 객체
    },
    error:function(status, err) {
    	// 실패할 시 수행할 함수
        // status:실패시 상태 객체
        // err:실패시 결과 객체
    }
})

- 결과의 응답을 JSON 객체로 받기 위한 jQuery 기반의 Ajax 이용

// ajax이면서 결과로 JSON을 받는 것은 따로 있다.
// $.ajax가 아니라 $.getJSON으로 한다.
// $.getJSON(요청URI, 성공시 호출할 함수).fail(실패시 호출할 함수)
$.getJSON(
    "요청할 URI.json", // 요청의 응답을 JSON 객체로 받아온다는 것으로 마지막에 .json을 붙여준다.
    function(data) {
    	// data:읽어온 JSON 객체
    }
).fail(function() {})