71일차 - [Spring] JSON/Ajax/REST

동기 방식(Synchronous)

서버로부터 응답을 받기 전까지 다음 처리는 대기합니다.

일부분만 변경되는 요청이 발생해도 매번 요청에 대해 문서 전체의 html 응답을 생성합니다.

→ 불필요한 서버 처리와 통신이 발생합니다.

 

비동기 방식(Asynchronous)

브라우저는 멀티스레드 방식이므로 비동기 처리가 가능합니다.

이전의 요청 처리와 상관없이 새로운 요청을 처리합니다.

자바스크립트에서 비동기 처리를 수행하는 비동기 함수로 콜백 함수를 사용합니다.

 

JSON(JavaScript Object Notation)

데이터 객체를 '{ }'로 묶고 key와 value로 구성하는 경량 데이터 포맷입니다.

key에도 큰따옴표(") 기호를 사용해야 합니다.

객체 : const obj ={id: 1, name: 'sana', age: 25}

JSON 문자열 : {"id": 1, "name": "sana", "age": 25}

 

JSON.stringfy 메소드

객체를 JSON 타입의 문자열로 변환합니다. (직렬화)

 

JSON.parse 메소드

JSON 타입의 문자열을 객체로 변환합니다. (역직렬화)

 

 

Ajax(Asynchronous Javascript and XML)

웹 서버에 비동기 방식으로 필요한 데이터만을 요청하고 받아서

 웹 페이지의 전체가 아닌 일부를 동적으로 갱신하는 프로그래밍 방식입니다.

응답을 처리하기 위해 자바스크립트를 사용합니다.

Web API인 XMLHttpRequest 객체로 전체 페이지가 아닌 일부를 렌더링합니다.

→ 응답 속도와 성능의 효율이 높아집니다. 

 

XMLHttpRequest 객체

서버로부터 XML 데이터를 전송받아 처리하는데 사용됩니다.

 

- 메소드

open(method,URL) : HTTP 요청을 초기화합니다.

method : 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'

const xhr = new XMLHttpRequest();
xhr.open('GET','/customer');

 

send( ) : HTTP 요청을 전송합니다

xhr.send();
 
xhr.send(JSON.stringify({"id":3,"name":"nahyeon","age":23,"hobby":["노래","수영"]}));

 

setRequestHeader( ) : 특정 HTTP 요청의 헤더값을 설정합니다. (서버로 전송할 MIME 타입 설정)

xhr.setRequestHeader('content-type','application/json');

 

- 프로퍼티

status : HTTP 요청에 대한 응답 상태를 나타냅니다.

→ 200 : 서버에 문서가 존재합니다.

→ 404 : 서버에 문서가 존재하지 않습니다.

 

statusText : HTTP 요청에 대한 응답 메시지를 나타냅니다.

 

- 이벤트 핸들러 프로퍼티

onload : HTTP 요청이 성공적으로 완료되었을 때 동작합니다.

xhr.onload=function(){
                    if(xhr.status==200) {
                          document.querySelector('pre').innerHTML=xhr.response;
                    }else {
                        console.error('Error',xhr.status,xhr.statusText);
                    }
            };

 

HTTP 요청 메소드

GET : 리소스를 반환합니다.

 document.querySelector('#getAll').addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','/customer');      
            xhr.send();         
            xhr.onload=function(){
                    if(xhr.status==200) {
                          document.querySelector('pre').innerHTML=xhr.response;
                    }else {
                        console.error('Error',xhr.status,xhr.statusText);
                    }
            };
        });

document.querySelector("#getOne").addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            const id = document.querySelector('#id').value;

            xhr.open('GET',`/customer/${id}`);
            xhr.send();
            xhr.onload = function() {
                if(xhr.status ==200) {
                    document.querySelector('pre').innerHTML=xhr.response;
                }else {
                    console.error('Error',xhr.status,xhr.statusText);
                }
            };
        });

 

POST : 리소스를 생성합니다.

 document.querySelector('#post').addEventListener('click',function(){
        const xhr = new XMLHttpRequest();

        xhr.open('POST','/customer');
        //request body(요청 몸체)에 담아 서버로 전송할 데이터의 MIME 타입을 지정.
        xhr.setRequestHeader('content-type','application/json');
        xhr.send(JSON.stringify({"id":16,"name":"최사나","age":22,"hobby":["노래","달리기"]}));
        xhr.onload=()=>{   // 201:created
            if(xhr.status==200 || xhr.status==201) {
                document.querySelector('pre').innerHTML=xhr.response;
            }else{
                console.error('Error',xhr.status,xhr.statusText);
            }
        };
    });

 

PUT : 리소스 전체를 바꿉니다.

document.querySelector('#put').addEventListener('click',function(){
        const xhr = new XMLHttpRequest();

        xhr.open('PUT','/customer/3');         
        xhr.setRequestHeader('content-type','application/json');
        xhr.send(JSON.stringify({"id":3,"name":"nahyeon","age":23,"hobby":["노래","수영"]}));
        xhr.onload=()=>{   
            if(xhr.status===200) {
                document.querySelector('pre').innerHTML=xhr.response;
            }else{
                console.error('Error',xhr.status,xhr.statusText);
            }
        };
    });

 

PATCH : 리소스 일부를 수정합니다.

document.querySelector('#patch').addEventListener('click',function(){
        const xhr = new XMLHttpRequest();

        xhr.open('PATCH','/customer/3');
        xhr.setRequestHeader('content-type','application/json');
        xhr.send(JSON.stringify({"age":22}));
        xhr.onload=()=>{   
            if(xhr.status===200) {
                document.querySelector('pre').innerHTML=xhr.response;
            }else{
                console.error('Error',xhr.status,xhr.statusText);
            }
        };
    });

 

DELETE : 특정 리소스를 삭제합니다.

document.querySelector('#delete').addEventListener('click',function(){
        const xhr = new XMLHttpRequest();
        const id = document.querySelector('#id').value;
        xhr.open('DELETE',`/customer/${id}`);
        xhr.send();
        xhr.onload=()=>{  
            if(xhr.status===200) {
                document.querySelector('pre').innerHTML=xhr.response;
            }else{
                console.error('Error',xhr.status,xhr.statusText);
            }
        };
    });

 

 

REST(Representational State Transfer)

 

 

 

 

pom.xml에 jackson-databind 라이브러리를 추가합니다.

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.2.2</version>
</dependency>

객체를 JSON 타입의 문자열로 변환시켜 전송할 때 필요합니다.

 

@RestController

REST방식으로 처리하는 Controller라는 것을 명시합니다.

@ResponseBody

JSP와 같은 뷰로 전달되는 것이 아니라 데이터 자체를 전달하기 위한 용도입니다.

@PathVariable

URL 경로의 일부를 파라미터로 사용합니다.

@RequestBody

JSON 데이터를 원하는 타입의 객체로 변환

 

@RequestMapping의 속성

produces : 해당 메소드가 생성하는 MIME 타입을 정의합니다.

headers : 

 

 

 

postman