Json이란?
Java Script Object Notation - 자바 스크립트 객체 표기법
{속성명1:속성값1,속성명2:속성값2,...}
배열
[{속성명:속성값,..},{속성명:속성값,..},..] //객체배열
맵
{키1:{속성명:속성값,..},키2:{속성명:속성값,..},...}
stringify()와 parse()
JS객체를 서버로 전송하려면,직렬화(JS객체 --> 문자열화)가 필요 // stringify()
서버가 보낸 데이터를 JS객체로 변환할때, 역직렬화가 필요 // parse()
JSON.stringify() - 객체를 JSON 문자열로 변환(직렬화 JS 객체 -> 문자열)
JSON.parse() - JSON 문자열을 객체로 변환(역직렬화, 문자열 -> JS객체)
Ajax란?
Asynchronous Javascript and XML - 요즘은 JSON을 주로 사용
비동기 통신으로 데이터를 주고 받기 위한 기술
웹페이지 전체(data+UI)가 아닌 일부(data)만 업데이트 가능
예를들면, 주식창에서 차트만 실시간으로 변화하게 하기, 댓글창만 업데이트 되게 하기 등등
동기(Synchronous)와 비동기(Asynchronous) 차이
동기 - 클라이언트가 서버에 요청 -> 응답올때까지 대기
비동기 - 클라이언트가 서버에 요청 -> 응답이 오지 않아도 다른일 하고 있을 수 있다.
대신 처리가 언제끝났는지 모른다.(콜백함수 사용해서 알수 있다.)
Ajax 요청과 응답 과정
SimpleRestController.java
@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>- 웹에서 SEND 버튼을 누르면 ajax.jsp에서 서버로 요청을 보낸다
1-1. 요청을 보낼때는 객체로 되어있는 person을 문자열로 바꿔준다.(JSON.stringify(person))
2.javascript와 java는 언어가 다르기때문에 서버에서 알아볼 수 있도록 javascript->java로 바꿔줄 수 있는 라이브러리를 다운 받아줘야 한다. (maven repository에서 jackson databind 다운 -> pom.xml에 추가)
2-1. jackson databind에 의해서 javascript 문자열이 java 객체로 변경되었다.
- 서버에서는 요청받은 person에 값을 넣어준다.
- 서버에서 응답받은 java 객체값이 다시 jackson databind에 의해서 javascript문자열로 바뀐다.
5.응답받은 값은 문자열이기 때문에 다시 javascript 객체로 바꿔준다.(JSON.parse())
여기서 중요한 점은 객체가 응답에 성공해서 실행되는 sucess부분보다 그 밑에 있는 alert가 먼저 실행된다. ajax는 응답을 받지 않아도 다른 거부터 실행하고 응답받으면 응답받았다고 알려준다.
@ResponseBody
- 대신 class 앞에 controller+ResponseBody ->@RestController로 대신할 수 있다.
@controller
public class SimpleRestController{
@PostMapping("/send")
@ResponseBody public Person Test(@RequestBody Person p){
...
}
}대신
@RestController
public class SimpleRestController{
@PostMapping("/send")
public Person test(@RequestBody Person p){
...
}
}이렇게 사용할 수 있다.
@RequestBody - 요청바디를 읽어와라.
REST란?
- Roy Fielding이 제안한 웹서비스 디자인 아키텍쳐 접근 방식
- 프로토콜에 독립적이며, 주로 HTTP를 사용해서 구현
- 리소스 중심의 API 디자인 - HTTP 메서드로 수행할 작업을 정의
- REST API는 REST 규약을 준수하는 API
