Spring - REST, Ajax

REST

브라우저에서 페이지 요청 시 PC에서는 페이지 전체를 다시 전송해서 표시해도 문제 없지만 스마트폰 등의 모바일 기기에서는 기존 화면은 그대로 유지하면서 필요한 내용만 추가해서 화면에 표시한다,

모바일 기기가 유선 기기보다 네트워크 전송량이 떨어지므로 현재 화면은 그대로 유지하면서 필요한 데이터만 전송받아 빠르게 표시하기 위해 데이터만 전송하는 기능의 표준화의 필요성이 대두 되었다. 이 방식을 REST라고 하며 대표적인 예로는 Ajax가 있다.

REST (Representational State Transfer)

• URI가 고유한 리소스를 처리하는 공통 방식
• ex. /board/112로 요청할 경우 -> 게시글 112번째 글만 응답 처리
• REST 방식으로 제공되는 API를 REST API(또는 RESTful API)라고 함
• Twitter와 같은 Open API에서 많이 사용됨
• 전송방식을 나타내는 메소드 속성의 값에 따라 리소스에 대한 추가 작업 요청

REST 방식의 데이터 처리

• 스프링 3버전
  • @ResponseBody 어노테이션 지원
• 스프링 4버전 (권장)
  • @RestController 어노테이션 이용

Ajax (Asynchronous Javascript and XML)

Ajax란, 클라이언트에서 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버측에 데이터를 요청하고 응답받을 때 사용하는 방식. HTML, XML, JSON, 텍스트 등의 데이터 처리가 가능하며 웹 서버 환경에서 실행한다.

Synchronous(동기식) Vs. Asynchronous(비동기식) 통신

Synchronous(동기식)

• Request 보낸 후 Request에 대한 Response를 받아서 두 통신 간의 트랜잭션을 맞추는 통신 방식
• Request를 보낸 Thread는 Response가 도착하기 전까지는 다른 일을 처리하지 못하고 Block 상태로 대기
• 요청과 응답 값의 순서를 보장하고, 보낸 Request에 대한 처리 결과 값을 보장받을 수 있음
• Response에 대한 처리 결과를 보장받고 처리해야 되는 서비스에 적합
• 신뢰성 보장

Asynchronous(비동기식)

• Request를 보내고 Request에 대한 Response를 받지 않고도 다른 일 처리가 가능한 통신 방식
• 처리 속도가 빠르다
• Response에 대한 처리 결과를 보장받고 처리해야 되는 서비스에는 적합하지 않음
• 신뢰성 보장되지 않음

비동기 통신을 하기 위해서는

• 클라이언트에서 서버로 요청 메시지를 보낼 때, 서버에서 클라이언트로 응답을 보낼 때
  • 본문(body)에 데이터를 포함시켜서 보냄
• 요청 본문 : RequestBody
  • @RequestBody
  • HTTP 요청 바디를 자바 객체로 변환
  • 일반적인 GET/POST 방식의 요청 파라미터인 경우 필요
• 응답 본문 : ResponseBody
  • @ResponseBody
  • 자바 객체를 HTTP 응답 바디로 변환

Ajax 메소드

• $.ajax()

  • 데이터를 서버에 HTTP POST, GET 방식으로 전송 가능
  • HTML, XML, JSON, 텍스트 유형의 데이터를 요청할 수 있는 통합적인 메소드
  • $.get(), $.post(), $.getJSON() 메소드의 기능을 하나로 합쳐놓은 기능
  • 지정한 url 경로에 있는 파일의 데이터를 전송하고 입력한 url 경로의 파일(url 매핑 이름)로부터 요청한 데이터를 불러오는데 사용

• serialize()

  • 폼에 입력된 값을 퀴리 스트링 방식의 데이터로 변환하여 액션 페이지에 전송
  • ex. 'id=abcd&pass=1234...'

$.ajax({
    url:"전송되는 요청 url 매핑 이름",
    type: "데이터 전송 방식(get/post)",
    data: "전송할 데이터",
    dataType: "요청하는 데이터의 타입(html/xml/json)",
    success:function(result){
        // 서버로부터 응답(return 값)을 result로 받음
        전송 및 요청 성공 시 실행 부분
    },
    error:function(){
        오류 발생 시 실행 부분
    },
    complete:function(){
        전송 및 요청 완료 시 실행 부분
    }
});