[05]REST & Ajax_개념
*프로젝트 실습*
https://exploreryun.tistory.com/manage/newpost/319?type=post&returnURL=https%3A%2F%2Fexploreryun.tistory.com%2F319
1. AJAX
서버측 Script와 통신하기 위해 XMLHttpRequest 객체 사용. 서버와 데이터 교환.
페이지 전체를 리프레쉬(Refresh)하지 않고서도 수행. 비동기적으로 전체 페이지가 아니라 일부분만 업데이트.
(*TCP-SCHOOL.COM [ http://www.tcpschool.com/ajax/ajax_intro_basic ] 참고)
(*https://exploreryun.tistory.com/283?category=1001611)
(1) AJAX 문법 - jQuery
//비동기 AJAX 요청 수행
$.ajax({name:value, name:value, ...})
//향후 AJAX 요청에 대한 기본 값 설정
$.ajaxSetup({name:value, name:value, ...})
-name이 매개변수로 주어지는 영역 역할
url | data | type | dataType |
request 요청할 URL (필수) |
서버에 전송할 데이터 | GET, POST | 응답받을 데이터 형식 (text, html, js, json) |
success | error | complete | async |
request 응답 정상일 때 동작하는 콜백 함수 |
request 응답 비정상일 때 동작하는 콜백 함수 |
콜백 함수 완료 후 실행할 함수 |
동기 | 비동기 지정 (Boolean) |
-success(data, status, xhr) : ajax 성공 이벤트 리스터 지정(function, array)
-error(error, status, xhr)
-complete(xhr, status)
(1-1) 기존 문법
$.ajax({
type : 'post', //다양한 통신 메소드 타입 - post, get, put 등등
url : '/test', //전송할 데이터를 요청할 서버 url
async : true, //동기화 여부(default : true)
header : { //Http header - 헤더에 필요한 정보를 넣어줌
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "POST"
},
dataType : 'text', //리턴 데이터 타입(돌려받을 데이터타입) - html, xml, json, text ...
data : JSON.stringify({ //보낼 데이터형(object, String, Array)
"no" : no,
"name" : name,
"nick" : nick
}),
success : function(result){ //결과 성공 콜백함수
console.log(result);
},
error : function(result){ //결과 에러 콜백 함수
console.log(result);
}
})
└dataType : 게시물이면 BoardVO, 메시지일 때 text
(1-2) 최신 AJAX 문법
$ajax( "/text",
{
method : 'get',
data : {name : "chan"},
dataType : 'json'
}
)
.done(function(){ //서버요청이 성공했을때 콜백 함수
alert("success");
});
.fail(function(){ // 서버 요청이 실패했을때 콜백 함수
alert("error");
});
.always(function(){ //항상 실행(try/catch의 finally 느낌)
alert("complete");
});
2. REST 개념
컨트롤러와 response 합친 것.
하나의 URI는 하나의 고유한 리소스(Resource)를 대표 + 전송 방식 결합 = 원하는 작업 지정
스프링4부터는 @Controller외에 @RestController라는 Annotation을 추가해서 해당 Controller의 모든 메소드의 리턴 타입을 기존과 다르게 처리한다는 것을 명시.
@RestController는 메소드 리턴 타입으로 사용자가 정의한 클래스 타입을 사용할 수 있고 이를 JSON이나 XML로 자동 처리
(2-1) 웹 서비스
과거 | 현재 | |
전송방식 | get, post | get, post, put, delete |
고정된 브라우저 주소창 | URI + 식별 데이터 |
(2-2) Annotaion
@RestController | Controller와 ResponseBody 합친 것. 뷰 필요없이 값만 리턴할 때 사용. |
@PathVariable | URL 경로에 리소스를 직접 넣어주는 방법 |
@RequestBody | JSON 데이터를 객체로 변환. <form> 방식으로 처리된 데이터. |
@ResponseBody | 데이터 자체를 전달(일반적 JSP와 같은 뷰로 전달되는 것 아님) |
@CrossOrigin | react랑 spring 연결 또는 안드로이드와 스프링 연결할 때 볼 수 있음. 스프링에서 어떤 URI를 가진 것을 통과시켜주는 것. 서버를 톰캣, 노드.js냐에 따라 URI 허용 |
(2-3) 반환 타입
String | Integer 등의 타입 | 사용자 정의 타입 | responseEntity<> 타입 |
주로 사용 |
(3) JavaScript 모듈
【 REST Controller 】
지금까진 값을 웹브라우저에 던지거나 jsp파일인 뷰로 리턴했는데 오늘은 값을 직접 던지는 작업.
3. REST - 연습
-REST Controller 사용해서 해볼 것.
-리턴 타입 : xml(기본), json, list, map 등등
(0) 연습용
(0-1) VO 생성
-위치 : com.wsy.webboard.domain
-클래스 이름 : SampelVO
package com.wsy.webboard.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor //default 생성자
public class SampleVO {
private int mno;
private String firstName;
private String lastName;
}
(0-2) Controller
-위치 : com.wsy.webboard.controller
-이름 : SampleController
(0-3) 프로젝트 실행
>> 웹 브라우저에서 출력
>> postman
(json, xml, gson 코드를 pom.xml에 넣어두었기 때문에 처리가능)
(2) ArrayList<> 타입 리턴
(2-1) SampleController
@GetMapping("getSampleList") //uri
public List<SampleVO> getList(){
List<SampleVO> list = new ArrayList<SampleVO>();
for(int i=0; i<10; i++) {
list.add(new SampleVO(i, "first_"+i, "last_"+i));
}
return list;
}
(2-2) postman 출력
(3) Map 타입 리턴
(3-1) SampleController -
@GetMapping("getSampleMap")
public Map<String, SampleVO> getSampleVO(){
Map<String, SampleVO> map = new HashMap<String, SampleVO>();
map.put("first", new SampleVO(1, "GilDong", "Hong"));
map.put("second", new SampleVO(2, "GilDong", "Kim"));
return map;
}
(3-2) postman
(4) ResponseEntity
데이터 + HTTP 상태 코드 등을 브라우저에 전달
HTTP 상태 정보를 보내야 하는 이유(REST)를 쓰 이유. 웹이 정상적으로 작동하는지 확인하기 위해.
(4-1) SampleController
@GetMapping(value="check", params={"height", "weight"})
public ResponseEntity<SampleVO> check(Double height, Double weight){
SampleVO vo = new SampleVO(1, "aaaa", "bbb");
ResponseEntity<SampleVO> result = null;
if(height < 150) {
result = ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(vo);
}else{
result = ResponseEntity.status(HttpStatus.OK).body(vo);
}
return result;
}
(4-2) 웹 브라우저에서 실행
웹 브라우저에서 [f12]눌러서 '네트워크'에서 확인. 상태 200이면 정상
*빅데이터할 때
데이터 분석 : 파이썬, 장고로 하고, 웹 출력 : 스프링을 함. 각 프로그램이 잘하는 것이라.
그래서 데이터를 프로그램끼리 데이터를 주고받아야 함.
(5) @PathVarible
(5-1) sampleController
@GetMapping("product/{cat}/{pid}")
public String[] getPath(@PathVariable("cat") String cat, @PathVariable("pid") String pid) {
return new String[] {"category: "+ cat, "productID: "+pid};
}
(5-2) 웹 브라우저 실행
(6) @RequestBody
전송된 데이터가 JSON이고, 이를 컨트롤러에서는 사용자 정의 타입의 객체로 변환할 때 사용
- 코드 -
댓글 기능 추가 안 된 버전
END