Ajax 비동기형식 통신

비동기형식의 통신 방법을 배움.
jsp에 JQuery를 이용해 브라우저에서 요청할 수 있게 코딩하고, controller에서 그 요청을 처리할 수 있는 여러가지 방법에 대한 예제를 작성함.

데이터 전달방식의 차이점

동기형식 : jsp에 DB에서 가져온 정보를 집어넣고, 브라우저의 요청이 있을 때, jsp 틀에 맞춰 html을 만들어 보낸다. >> 페이지 전체의 갱신
비동기형식 : 브라우저에서 자바스크립트를 이용해 요청할 때, 서버에서 text, json, xml 형태로 데이터를 보낸다. >> 페이지의 부분 갱신

또한, 동기형식은 브라우저에서 요청에 대한 반응을 받기전까지 다른 요청이 블락된다. 비동기형식은 블락되지 않는다.

비동기통신 코드작성

jsp에서

자바스크립트로 Ajax 사용 > 반복되는 고정 코드
JQuery(자바스크립트의 프레임워크?)의 메소드를 사용하여 비동기형식의 요청을 할 수 있다.
$.load(), $.get(), $.post(), $.ajax()

1. JQuery import
2. $.ajax(
   success: function(서버에서받은JSON){
   ....
   }
   ) 사용

controller에서

JSON이란 데이터 포맷(형식) 이다.
{ "키1":"밸류", "키2":"밸류", "키3":"밸류",....}
JSON 밸류의 타입은 6가지이다.

JSON 만드는 방법(String 객체로 만들어준다. 위에 형식처럼)

1. 수동으로 써주기
2. ObjectMapper 사용
3. @ResponseBody 사용
4. @RestController 사용: 모든 메소드가 비동기형식으로 데이터를 전달할 때. > RESTful API Server >> 클라우드 컴퓨팅 >> ...

JS 객체와 JSON, XML

JS의 6가지데이터타입 : 글자, 숫자, 객체, 배열, 불린, 널

서버에서 브라우저로 데이터를 보낼 때, 객체와 배열의 형태를 주로 사용한다.

객체형태는 {키1:"밸류", 키2:"밸류", 키3:"밸류", .... }
키는 멤버, 밸류는 멤버변수의 값.

배열은 [ , , , ,......]
배열 안에 6가지 타입이 다 들어갈 수 있는데, 주로 사용하는 것은 객체이다. [ { }, { }, { }, { },......]

JS객체와 JSON의 차이점 : 따옴표

JS 객체 : {키1:"밸류", 키2:"밸류", 키3:"밸류", .... }
JSON : {"키1":"밸류", "키2":"밸류", "키3":"밸류", .... }

jsObj = JSON.parse(Obj) : 따옴표를 벗긴다.
Obj = JSON.stringify(jsObj) : 따옴표를 씌운다.

XML은 태그로 JS객체를 표현한 것

RESTful API server(비동기통신의 여러가지 특징)

1. 클래스 위에 @RestController

2. 모든 메소드가 비동기형식으로 데이터(text, json, xml의 형태로)를 전달한다.

3. 스프링의 일반 컨트롤러에서 String 반환은 jsp의 이름을 의미하지만, 이 컨트롤러에서는 text를 브라우저에 전달한다.

4. List타입과 Map타입, JSON으로 전달할 때 차이점

5. 통신상태(200, 404, 502 ....) 를 전달하는 방법은 ResponseEntity 타입을 이용한다.

6. url에서 값을 뽑아낼 수 있다.

7. 브라우저에서 json으로 전달할 수도 있다.(별로 없다)