코드와이
[웹] Rest API 본문
REST API
AJAX(Asynchronous Javascript And Xml)
- JavaScript의 라이브러리중 하나이며, 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다. JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
$.ajax({
url:'${root}/product/list',
type:'GET',
contentType:'application/json;charset=utf-8',
dataType:'json',
success:function(list){
make(list);
},
error:function(xhr, status, msg){
console.log("상태값 : " + status + "Http에러메시지 : " + msg);
}
});
<AJAX 예시>
Rest Controller에 필요한 annotation
@RestController
- Data를 반환하기 위해서는 viewResolver(@Controller 가 data를 반환하기 위해 거쳐가는 것) 대신에 HttpMessageConverter가 동작합니다.
@RequestMapping("/list")
- DefaultAnnotationHandlerMapping에서 컨트롤러를 선택할 때 사용됩니다. 예시에선 url에 "list"를 적용하면 해당 컨트롤러가 작동합니다.
@CrossOrigin("*")
- 웹 페이지의 제한된 자원을 외부 도메인에서 접근을 허용해줍니다. 예시에선 "*"를 적용시켰기 때문에 모든 도메인에서 접근이 가능합니다.
[간단한 예시]
AJAX -> REST controller(value="product")
productList 함수 작동
@RequestMapping(value="/list", method=RequestMethod.GET, headers={"Content-tpye=application/json"})
public List<ProductDto> productList(){
return productService.productList();
}
ajax에선 json 형태의 객체를 받아야 하는데 위의 productList 반환 객체는 List<ProductDto> 형식이므로 오류가 납니다.
이때 Jackson-databind 라이브러리가 객체를 JSON 포맷의 문자열로 변환시켜서 브라우저로 전송시켜 줄 수 있습니다.
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<atrifactId>jackson-databind</artifactId>
<version>${jackson-databind-version}</version>
</dependency>
위의 dependency를 pom.xml에 추가
또 다른 케이스로 jackson-dataformat-xml 라이브러리는 xml로 브라우저로 전송합니다.
@RequestMapping(value="/findProduct/{pId}", method=RequestMethod.GET, headers={"Content-tpye=application/json"})
public List<ProductDto> findProduct(@PathVariable("pID" String id){
return productService.findProduct(id);
}
변수값을 url에 포함시켜 REST controller로 넘겨주면 @PathVariable annotation을 통해 받을 수 있습니다.
'웹' 카테고리의 다른 글
[웹] Vue.js(2) (0) | 2021.05.13 |
---|---|
[웹] Vue.js (0) | 2021.05.10 |
[웹] MyBatis (0) | 2021.05.01 |
[웹] Spring(2) (0) | 2021.04.27 |
[웹] Spring (0) | 2021.04.27 |