복잡한 XML(데이터 교환할 때 데이터보다 태그가 더 많음)보다 사용하기 더 편함
HTTP가 TEXT기반 프로토콜이기 때문에 "전송"하려고 직렬화하는 것이다.
기본적으로 동기 이지만 비동기로 하여 효율을 높인다
웹페이지 전체를 업데이트하는 것은 비효율적이기 때문에 일부 데이터만 업데이트 하는 것을 비동기라고 한다.
우리는 게시판 덧글 달때, 바뀐 덧글만 가져오기 위해 사용할 것이다.
왼쪽 그림이 동기 통신 / 오른쪽 그림이 비동기 통신
동기 통신은 요청을 하면(함수 호출) 서버가 처리하고, 응답 올 때까지 계속 기다려야 한다. 응답이 와야 다른 작업을 할 수 있다.
비동기 통신은 요청을 보내놓고 다른 작업을 할 수 있다. 언제 처리가 끝났는지 알 수 있는 방법은 콜백함수를 사용한다.
jQuery로 비동기통신을 하는 방법
success와 error함수가 콜백함수이다.
비동기함수 호출이라서, click을 보낸 뒤 바로 alert가 뜬다.
실습
package com.fastcampus.ch4.controller;
import com.fastcampus.ch4.domain.*;
import org.springframework.stereotype.*;
import org.springframework.web.bind.annotation.*;
@Controller
public class SimpleRestController {
@GetMapping("/ajax")
public String ajax() {
return "ajax";
}
@PostMapping("/send") //person객체를 stringify한 것을 send함수가 받는다.
@ResponseBody
public Person test(@RequestBody Person p) { //자바스크립트 객체로 보낸 것이 자바 객체로 바뀌어서 들어온다
System.out.println("p = " + p); //객체 출력
p.setName("ABC"); //객체 이름 바꾸기
p.setAge(p.getAge() + 10); //객체 나이 바꾸기
return p; //결과 반환
}
}package com.fastcampus.ch4.domain;
public class Person {
private String name;
private int age;
public Person(){}
public Person(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", age=" + age +
'}';
}
}
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: '/ch4/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>
서버에서 응답이 옴
서버한테 전송하려면 그냥 객체를 전송하지 못하니까 문자열로 바꿔서 요청을 전송한다
요청을 POST로 보내면
서버가 받아서 jackson-databind가 문자열을 자바 객체로 변환해서 준다.
우리는 컨트롤러에서 받는다.
컨트롤러에서 처리를 하고
객체를 반환할 때 jackson-databind가 json 문자열로 바꿔서 클라이언트한테 전송한다.
클라이언트는 문자열을 받아서 JSON.parse()메소드로 JS객체로 받는다.
json으로 데이터를 주고 받을때는 받을때는 객체 앞에다 @RequestBody를 붙이고,
결과를 줄 때도 @RequestBody를 붙인다.
뷰 이름을 반환하는 것이 아니라 객체를 반환한다. (p)
객체를 반환할때 JSON으로 바꿔주는 것이 @ResponseBody인데,
메소드가 여러 개 있을 때마다 계속 붙어야하므로
클래스 앞에 @Controller가 아니라 @RestController로 바꿔서 붙이면 @ResponseBody를 생략할 수 있다.
@RestController //@ResponseBody를 편리하게 메소드 앞에다 붙여준다
public class SimpleRestController {
// @GetMapping("/ajax")
// public String ajax() {
// return "ajax";
// }
@PostMapping("/send") //person객체를 stringify한 것을 send함수가 받는다.
// @ResponseBody
public Person test(@RequestBody Person p) { //자바스크립트 객체로 보낸 것이 자바 객체로 바뀌어서 들어온다
System.out.println("p = " + p); //객체 출력
p.setName("ABC"); //객체 이름 바꾸기
p.setAge(p.getAge() + 10); //객체 나이 바꾸기
return p; //결과 반환
}
@PostMapping("/send") //person객체를 stringify한 것을 send함수가 받는다.
// @ResponseBody
public Person test2(@RequestBody Person p) { //자바스크립트 객체로 보낸 것이 자바 객체로 바뀌어서 들어온다
System.out.println("p = " + p); //객체 출력
p.setName("ABC"); //객체 이름 바꾸기
p.setAge(p.getAge() + 10); //객체 나이 바꾸기
return p; //결과 반환
}
}
URI를 리소스 중심으로 설계
수행할 작업을 HTTP 메서드를 사용 (GET/POST...)
웹서비스의 API를 디자인 하는 것을 REST방식이라고 한다.
REST에서 정한 규약을 잘 지키는 API
규칙을 정의해놓은 것이 REST, 제안한대로 API를 설계하면 그것이 REST API
API
프로그래밍 인터페이스
서비스를 제공하는 쪽과 사용하는 쪽 간의 약속
REST에서 제공한 규약을 잘 지킨 API를 RESTful하다고 한다.
위 표에서 아래표로
URI에 동사를 남기지말고, 명사만 남긴다 (동사는 HTTP메서드가 담당한다)
URI를 명사위주로, 서버에 있는 리소스에 대해 무슨 작업을 할 것인지에 대해서는 HTTP메서드가 담당하도록 설계한 것
'패캠 챌린지' 카테고리의 다른 글
| 댓글 기능 구현 - front (1) | 2023.06.16 |
|---|---|
| 댓글 기능 구현 - back (0) | 2023.06.15 |
| 게시판 검색 기능 만들기 (0) | 2023.06.12 |
| 게시판 CRUD 기능 구현_읽기, 삭제 (0) | 2023.06.05 |
| 게시판 목록 만들기와 페이징 - TDD(2) (1) | 2023.05.24 |
