[ AJAX ] REST API / JSON / ResponseBody

[ 1. HTTP 프로토콜 방식 ]
: Synchronous 동기적 처리 방식

클라요청1 => 응답1
클라요청2 => 응답2
클라요청3 => 응답3 ...

- 응답이 나오기 전에는 다른 요청을 받지 못한다
- 응답이 나온 후에 다음 요청을 받는 방식

- <form action > + < submit > = > @GetMapping => return JSP (새로운 페이지) 방식
=> 요청에 대해 새로운 페이지로 응답
- 코드 반복
- 2개의 개별적 페이지
=> Multi Page Application ( MPA )



[ 2. REST API 방식 ] REpresentational State Transfer
: Asynchronous 비동기적 처리 방식

클라요청1/요청2 => 여러개 동시에 들어오고 처리 가능 => 응답2/ 응답1

=> 1개의 현재 페이지 내에서, 서버의 응답에 따라 변동되는 부분만 JSON 방식으로 응답
=> Single Page Application ( SPA )

- 코드 반복 줄이고
- 속도 빨라짐
- 사용자 입장에서 화면의 재시작 없이, 화면이 부드럽게 전환됨


ex) 포털사이트 로그인 전 / 로그인 후 => 바뀌는 화면은 로그인 부분 뿐

=> 로그인폼에서 <div>변동부분만 REST 방식으로 응답처리
( 그 외의 부분은 변동없이 그대로 )


이 SPA 방식을 구현하기 위해 사용하는 기술이 바로 AJAX 다.
[ [ AJAX ] ]
: Asynchronous JavaScript And Xml
- REST API 방식을 사용하는 대표적 기술
- SPA 방식
- Servlet + JSP / Spring MVC 모두 사용 가능
- button 사용 / form 태그 action 필요 없음
=> $.ajax({ }); 문법 이용해서 url 맵핑

- HTTP 프로토콜 방식은 Synchronous 방식만 제공 가능
=> REST API 사용



[[ AJAX 순서 ]]

- SinglePage 하나의 JSP 페이지

@GetMapping("/ajaxlogin")
public String ajaxloginform( ){
return "loginform"; }

아이디 : <input type="text" id="id"><br>
비번 : <input type="text" id="pw"><br>
<input id="ajaxbtn" type="button" value="ajax로그인"> <br>


- button + JavaScript 이벤트 사용 ( submit 사용 X )
1. input 입력값을 $.ajax({ }); 에서 JSON 타입으로 담아서, 현재페이지 URL 로 보냄 ( = action )

$("#ajaxbtn") .on("click", function( ){
$.ajax({

url : "ajaxlogin",
data : { "id" : $("#id").val(), "pw" : $("#pw").val() },
type : "POST",
dataType : "json",

success : function(resp){ }

}); // ajax
}) // onclick


- type : 생략시 기본 get



2. 현재 페이지에서 @Mapping 으로 JSON 받고,
=> JSON 데이터로 응답 => $.ajax({}) 여기로 다시 보냄

@ResponseBody
@PostMapping ( value="/ajaxlogin", produces = {"application/json;charset=utf-8"} )
public String ajaxloginProcess (String id, String pw) {

String condition = "";
if(id.equals("ajax") && pw.equals("1111")) {
condition = "정상 로그인 입니다. success";
} else { condition = "로그인 할 수 없습니다.fail"; }

return "{\"process\" : \"" + condition + "\" }";
}


- @ResoponseBody
: 이 맵핑은 새로운 PAGE 전체로 응답하는게 아니라, Body 일부에 대한 응답만 보내는 거다.
- return "{ A : B }"
: return 값도 JSON { "Name" : "Value" } 형태로 보내겠다.
( ? id : june )

- "{\"name\" : \"" + value + "\" }"
== { "name" : "value" }



- produces = {"application/json;charset=utf-8"})
: AJAX 방식 한글 encoding 설정
( JSP 일땐 page 지시자로 했었던거 )



3. 서버로부터 JSON 응답이 정상적으로 오면, 즉 success 하면
=> 콜백함수 실행 ( resp ) <= 매개변수로, 서버로부터 받은 JSON 응답 자동 맵핑해서 받음

$("#ajaxbtn").on("click", function(){
$.ajax({
url : "ajaxlogin",
data : {"id":$("#id").val(), "pw":$("#pw").val()},
type : "POST",
dataType:"json",
--------------------------------------------
success : function( resp ){
$("#ajaxresult").html( resp.name );
if( resp.name.indexOf("success")>=0){
$("#ajaxresult").css("color", "green");
}else if( resp.name.indexOf("fail")>=0){
$("#ajaxresult").css("color", "red"); }
} //success
}); // ajax
}) // onclick


(기본)
JSON { Name : Value } 에서
서버응답.Name => Value 값
- 뽑아서 사용


( 객체일떄 )
[ JSON 형식으로 객체 보내기 ]

{"id" : dto.getId( ),
"pw" : dto.getPw( ),
... }
이렇게 해야하는데
자바단에서는 따옴표처리 다 해야하고 불편하다

=> 객체를 자동으로 위의 형태로 변환해주는 라이브러리 이용하자


[ Jackson DataBind ] ( pom.xml )

- return 값을 { a : b } JSON 형태가 아니라,
그냥 객체 자체로 return => Jackson 라이브러리 => JSON 형태로 변환 => 응답

retrun memberdto;

=> 웹클라이언트 단에서 꺼내 쓸 때는,
예를들어,
객체 dto 안에 변수 id , name 이 있다면
success : function( resp ){
resp.id / resp.name ... }

=> 바로 프로퍼티 명으로 꺼내어 사용!

( - Jackson DataBind 라이브러리가 있어야 가능함을 기억하자 )
( - Boot  환경에서는 default 로 깔려있음 )


[ Array 객체 받기 ]

원래 JSON 이 꼴이다.
[ { id: " " , pw: " "}, { id: " " , pw: " "}, { id: " " , pw: " "},... ]

=> Jackson 사용 + for 반복문

success : function(resp){

for(var i =0; i<resp.length; i++){
var onemember = '<h3>' + resp[i].id + " : " + resp[i].name + " : " + resp[i].pw + '</h3>';
$("#ajaxresult2").append(onemember);
}
}


=====================

[ 개발자 도구 이용 ]

1. 개발자도구
- Network
Headers => HTTP 요청 내용을 확인
Response => JSON 내용 확인



=====================