Published 2022. 10. 8. 14:49

중고헌터 - REST API와 Ajax

프로젝트/중고헌터

JSON 이란

Java Script Object Notation - 자바 스크립트 객체 표기법

{ 속성명1 : 속성값1, 속성명2: 속성값2, ... }

[{ 속성명1 : 속성값1, 속성명2: 속성값2, ... }] : 객체 배열

{ 키1:{속성명1 : 속성값1,...}, 키2:{속성명2: 속성값2, ... }, ...} : Map

stringify() 와 parse()

JS 객체를 서버로 전송하려면, 직렬화(문자열로 변환)가 필요

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

JSON.stringify() - 객체를 JSON 문자열로 변환(직렬화 JS객체 -> 문자열)

JSON.parse() - JSON 문자열을 JS 객체로 변환(역직렬화 문자열 -> JS객체)

Ajax 란

Asynchronous javascript and XML - 요즈음은 JSON을 주로 사용

비동기 통신으로 데이터를 주고 받기 위한 기술

웹페이지 전체(data+UI)가 아닌 일부(data)만 업데이트 가능

Ajax 테스트

SimpleRestController.java

package com.jcy.usedhunter.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import com.jcy.usedhunter.domain.Person;

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

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

        return p;
    }
}

ajax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
    <h2>{name:"abc", age:10}</h2>
    <button id="sendBtn" type="button">SEND</button>
    <h2>Data From Server :</h2>
    <div id="data"></div>
    <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>
</body>
</html>

pom.xml 에 코드 추가

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.3</version>
</dependency>

Ajax 요청과 응답 과정

@RestContoller

@ResponseBody 대신 클래스에 @RestController 사용 가능

REST 란?

Representational State Transfer API - REST 규약을 준수하는 API

Roy Fielding 이 제안한 웹 서비스 디자인 아키텍쳐 접근 방식

프로토콜에 독립적이며, 주로 HTTP를 사용해서 구현

리소스 중심의 API 디자인 - HTTP 메서드로 수행할 작업을 정의

RESTful API 설계

기존

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

RESTful

URI 에 명사만 남기기

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

저작자표시 비영리 변경금지

'프로젝트 > 중고헌터' 카테고리의 다른 글

중고헌터 - 댓글 기능 구현 2 - Controller 작성 (0)	2022.10.09
중고헌터 - 댓글 기능 구현 1 - DAO와 Service의 작성 (0)	2022.10.08
중고헌터 - 게시판 검색 기능 구현하기 (1)	2022.10.06
중고헌터 - 게시판 읽기, 쓰기, 수정, 삭제 구현 2 (0)	2022.10.06
중고헌터 - 게시판 읽기, 쓰기, 수정, 삭제 구현 (0)	2022.10.03