REST API와 Ajax(1)

먼저 JSON의 개념부터 소개한다.

1. JSON이란? 
Java Script Object Notation - 자바 스크립트 객체 표기법이다.

Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.

웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다.(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우)

 

자바스크립트에서 객체 문법으로 구조화된 데이터는 다음과 같이 표현한다

 

자바 스크립트에서 객체를 표현하는 방법은
{속성1: 속성값1, 속성2: 속성값2,  .....} 

객체 배열의 경우는
[{속성: 속성값, ....}, {속성: 속성값, .....}, {}, ... ]

Map의 경우는 
{키1: {속성1 : 속성값, ...}, 키2: {속성명: 속성값}...} 
의 방식이다.

 

2. stringify()와 parse()
자바스크립트의 객체를 서버로 전송하려면 직렬화(문자열로 변환)가 필요하다. 
이때 사용하는 것이 stringify() 메서드다.
직렬화는 간단히 설명하면, 객체를 문자열로 변환하는 과정이다.

 

객체는 값들을 묶어놓은 것이며, 메모리에 저장된 값이다. 객체를 생성하면 메모리에 객체가 생성되며 그 저장공간에 값을 저장한다.

객체의 이름은 "kim" 나이는 "20"의 경우, 
따라서 객체의 값을 저장할때

name = "kim", age = 20 과 같은 과정으로 값을 하나씩 하나씩 저장해야 한다. 
객체 상자의 값을 위에서부터 차례대로 문자열 변환하는 과정을 직렬화라고 이해하면 될 듯 하다.

 

그렇게 data를 text로 변환하니, 저장과 전송이 가능하다. HTTP는 텍스트 기반 프로토콜이다. 요청과 응답을 텍스트로 주고받는다. 따라서 JSON 객체를 문자열(텍스트)로 변환한 후, 서버가 보낸 데이터, 즉 문자열(텍스트)을 다시 객체로 변환할 때, 역직렬화가 필요하다.

역직렬화는 객체를 먼저 생성하고, 텍스트 데이터를 채우는 과정이다. 이때 사용하는 메서드가 parse메서드다. 

정리.
JSON.stringify() - 객체를 JSON 문자열로 변환(직렬화, JS객체 --> 문자열, 텍스트)
JSON.parse() - JSON 문자열을 객체로 변환(역직렬화, 문자열 --> JS객체)

 

 

---

 

Ajax: 비동기 통신으로 데이터를 주고받기위한 기술. 요즘은 xml 안쓰고 JSON 쓴다.

웹페이지 전체가 아닌 일부(data)만 업데이트가 가능하다는 장점이 있으며,
ajax는 비동기 통신이므로, 서버에 요청한 후 다른 작업을 처리할 수 있다. 
이후 처리가 끝났음을 알려주는 콜백함수로 응답을 받는다. 

 

Controller

@Controller
//@RestController
public class SimpleRestController {

    @GetMapping("/ajax")
    public String ajax() {
        return "ajax";
    }

    @PostMapping("/send")
    @ResponseBody
    public Person test(@RequestBody Person p) {  // jackson-databind 라이브러리를 pom.xml에 추가. 이 라이브러리는 문자열을 객체로 만들어준다.
//        따라서 이 메서드의 Person p 로 값을 받을 수 있음.
        System.out.println("p = " + p);
        p.setName("ABC");
        p.setAge(p.getAge() + 10);

        return p;   // 객체를 반환한다. jackson-databind 라이브러리가 객체를 JSON 문자열로 변경해주면,
        // ajax.jsp에서 parse메서드를 통해 JS 객체로 변환된다.
    }
}

 

ajax.jsp

<script>
  $(document).ready(function(){
    let person = {name:"abc", age:10};
    let person2 = {};
    $("#sendBtn").click(function(){
      $.ajax({
        type:'POST',       // 요청 메서드
        url: '/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>

태그의 ID가 sendBtn인 버튼을 클릭하여  /send로 post전송을 보낸다.

그러면 /send로 PostMapping된 test메서드가 실행되는데, 메서드의 파라미터로 Person p를 주입받는다.

public Person test(@RequestBody Person p)

에서 Person 객체를 주입받기 위해서는

jackson-databind 라이브러리가 필요해 maven repository에서 다운로드 후 pom.xml에 추가하였다.

jackson-databind 라이브러리는 JSON.stringify()로 문자열 변환된 데이터를 객체로 재조립해준다.

컨트롤러가 객체를 반환한다.
return P;

리턴할때는 jackson-databind 라이브러리가 객체를 JSON 문자열로 변환해준다. 이는 ajax.jsp에서 JSON.parse(result)를 통해 객체로 변환된다.

 

 

++

메서드마다 @ResponseBody를 붙여주는 대신에 클래스에 @RestController로 사용 가능하다. 
@RestController 내부에는 @ResponseBody가 존재하기 때문이다.

참고로 @ResponseBody는 리턴할 경우, view의 이름이 아닌 데이터를 바로 리턴하게된다.