[SpringFramework] RESTFul Web Service Example - GET, POST, PUT, DELETE 예제

jQuery Ajax 비동기 방식을 통해 MVC CRUD방식의 예제를 다뤄볼것이다.

 

1. GET(SELECT)

 

1). 파라미터가없는 단순 SELECT

//@RestController 	
@RequestMapping(value="/register",method=RequestMethod.GET) 	
  public List<MemberVO> register() throws Exception { 		
  return mservice.selectMember(); 	
} 

//Mybatis 	
<select id="selectMember" resultType="MemberVO"> 	
	SELECT id from user_info2; 	
</select> 

//Client 
function test() { 			
	$.ajax({ 				
    	type : 'GET', 				
        url : '/won/register', 				
        success : function(response) { 					
        	alert("CONTROLLER RETURN VALUE : " + response); 				
        }, 				
		error : function(e) { 
			alert("ERROR : " + e.statusText); 			
		} 			
	}); 		
} 

개발자 모드의 Network탭에서 확인한 결과  Return type을 List<Object> type으로 선언했기 때문에 @ResponseBody에 의해 json타입으로 반환된다.

 

2). @Pathvariable을 사용한 특정 값을 SELECT

 

//@RestController 
@RequestMapping(value="/selectTest2/",method=RequestMethod.GET) 
public List<MemberVO> selectTest2(@PathVariable String id) throws Exception { 		
	return mservice.selectTest2(id); 	
} 

//mapper 
<select id="selectTest2" parametertype="String" resulttype="MemberVO"> 	
	SELECT pw, name, num FROM user_info where id=#; 
</select> 

 

//Client 
function test() { 		
	var param=document.getElementById("idds").value; 			
	$.ajax({ 				
		type : 'GET', 				
		url : '/won/selectTest2/'+param, 	
		success : function(response) { 					
			alert("CONTROLLER RETURN VALUE : " + response); 				
		}, 				
		error : function(e) { 
			alert("ERROR : " + e.statusText); 				
		} 			
	}); 	
} 

1번과 같이 json타입으로 반환된다. GET , DELETE는 주로 @PathVariable을 사용해서 특정 값을 매핑한다.  파라미터가 많다면 @RequestBody를 사용해야하겠지만 , GET,DELETE는 데이터를 Body에 담지 않기때문에 @RequestBody는 잘 사용하지 않는것이 좋을것 같다..

 

1, 2번 모두 GET Type으로 SELECT를 하고 , URL요청은 Query String으로 서버에 요청한다. 기존에 알고있던 GET방식으로 요청하는듯.

 

서버에 데이터를 INSERT하거나 PUT하는 것이 아니기때문에 data나 content-type은 명시해주지 않아도된다. data를 body에 넣지 않기때문이다. 응답만 받을경우.

 

3). 요청할 Parameter가 많고 Object에 매핑하기 SELECT할 경우

 

해당 Object에 바인딩해주기 위해서, Client에서 Ajax url 요청시 data는 배열 형식으로 해당 Object에 맞는 변수 명으로 데이터를 넣어주고,

GET 은 Body에 데이터를 담지않기 때문에 컨트롤러에서는 어노테이션없이 Object명만 선언해주면된다.

 

주로 @PathVariable이 쓰이므로 3번의 경우는 잘 없을것 같다.

 

---

 

2. POST(INSERT)

 

 

특정 값을 INSERT할 때 사용되며 , 컨트롤러에서 HTTP Method방식을 POST로 작성하고, 클라이언트에서도 요청시 POST방식으로 해야한다. POST는 값을 Body에 담아서 전송하기때문에 컨트롤러에서는 @RequestBody를 사용해서 클라이언트의 요청 값을 매핑할 수 있다.

Ajax를 통해 값을 서버로 요청해 보겠다.

 

//@RestContorller 	
@RequestMapping(value = "/sdfsdf", method = RequestMethod.POST) 	
public int register2(@RequestBody MemberVO membervo) throws Exception { 	
	int a = mservice.insertMember3(membervo); 
	return a; 	
} 

 

//Client 
function test() { 	
	var param = { 
		'id' : document.getElementById("idds").value, 
		'pw' : document.getElementById("pwws").value 		
	}; 		
	
	$.ajax({ 				
		type : 'POST', 		
		url : '/won/sdfsdf', 	
		data : param, 			
		success : function(response) { 		
			alert("CONTROLLER RETURN VALUE : " + response); 		
		}, 		
		error : function(e) { 	
			alert("ERROR : " + e.statusText); 	
		} 		
	}); 	
} 

 

클라이언트에서 data를 JSON형태로 보내보겠다. 결과는?

 

 

 

데이터 타입이 맞지 않다고 415ERROR가 발생한다. Ajax는 기본적으로 Form Data전송이고 Content-type이 application/x-www-form-urlencoded;이다. 그러므로 Ajax에 Content-type을 application/json 으로 명시해주고, data를 JSON.stringify(param) 형태처럼 한번 더 감싸주어야 한다.

 

<script type="text/javascript"> 	
	function test() { 		
	var param = { 		
		'id' : document.getElementById("idds").value, 	
		'pw' : document.getElementById("pwws").value 	
	}; 			
	$.ajax({ 		
		type : 'POST', 			
		url : '/won/sdfsdf', 		
		contentType : "application/json; charset=utf-8", 
		data : JSON.stringify(param), 			
		success : function(response) { 			
			alert("CONTROLLER RETURN VALUE : " + response); 
		}, 				
		error : function(e) { 
			alert("ERROR : " + e.statusText); 	
		} 		
	}); 	
} 	
</script>  

데이터의 Content-type이 application/json 형태로 전송 되었고, Body인 Request Payload에 JSON데이터가 성공적으로 들어가 전송 되었다!

 

 

---

3.PUT(UPDATE)

 

PUT도 POST와 마찬가지로 Http Method type은 컨트롤러와 클라이언트 에서 PUT으로 명시를 해준다.

전송방식이 POST방식이므로 ,데이터가 Request Payload(Body)에 들어간다. Content-type을 application/json, data도 JSON.stringify로 감싸주면 될것이다.

//@RestContorller 
@RequestMapping(value = "/register4", method = RequestMethod.PUT) 
public int register3(@RequestBody MemberVO membervo) throws Exception {
 		return mservice.updateMember(membervo); 
} 

function test() { 	
	var param = { 	
		'id' : document.getElementById("idds").value, 
		'pw' : document.getElementById("pwws").value 	
	}; 			
	
	$.ajax({ 		
		type : 'PUT', 	
		url : '/won/register4', 	
		contentType : "application/json; 
		charset=utf-8", 			
		data : JSON.stringify(param), 
		success : function(response) { 	
			alert("CONTROLLER RETURN VALUE : " + response); 
		}, 				
		error : function(e) { 	
			alert("ERROR : " + e.statusText); 
		} 			
	}); 		
} 

 

---

 

4.DELETE(DELETE)

 

1번인 GET과 똑같은 방법으로 @PathVariable 어노테이션을 사용하면 되겠다. DELETE는 Body에 데이터가 들어가지 않기 때문에 클라이언트에서도 JSON타입으로 데이터를 보내주지 않아도 된다.

//@RestController 
@RequestMapping(value = "/register/", method = RequestMethod.DELETE) 
public int register(@PathVariable String id) throws Exception { 
	return mservice.deleteTest(id); 
}

//Client 
function test() { 		
	$.ajax({ 				
		type : 'DELETE', 			
		url : '/won/register/'+document.getElementById("idds").value, 	
		success : function(response) { 				
			alert("CONTROLLER RETURN VALUE : " + response); 	
		}, 				
		error : function(e) { 			
			alert("ERROR : " + e.statusText); 			
		} 			
	}); 	
} 

 

그런데

 

 테스트를 하다보니 이상한 점을 발견했는데.. 인터넷에서 찾아보고 공부한 결과로는 HTTP Method Type인 GET 과 DELETE는 data가 Body로 전송되지 않다고 이해를 하고있었다.  그렇게 클라이언트에서 GET type으로 데이터를 강제로 JSON 타입으로 넣어봤었다. 당연히 안되는걸 알면서도 시도해봤지만 역시 전송이 안되었고 400에러가발생했다.

 

그렇게 DELETE도 데이터를 JSON 타입으로 하면 안될거라 생각해서 테스트를 해봤는데.. 결과적으로는 JSON타입으로 클라이언트에서 전송하고, 서버에서는 @RequestBody를 이용해 Object를 받았더니 성공을 해버렸다.. 개발자 모드의 Network 탭으로 확인한 결과 Request Payload(Body)로 데이터가 전송이 됬다.. DELETE사용시 주로 @PathVariable을 사용할거긴한데,,, 나름 혼란이 와서 아직까지도 확실히는 모르겠지만.. DELETE는 GET과 다르게 ajax로 data타입을 바꿔서 전송하면 내부적으로 뭔가 이루어져 통신을 할 수 있는것같다..  

 

---

 

결론은 

• GET, DELETE는 서버에서는 @PathVariable을 사용하고, 클라이언트에서는 Ajax요청시 data를 url로 전송한다.

• INSERT, PUT은 데이터가 Request Payload(Body)에 들어가기 때문에, 서버에서는 @RequestBody를 이용해 Object에 클라이언트 요청값을 담고,  클라이언트에서는 Ajax로 데이터 전송시 content-type을 application/json , data는 JSON.stringify로 감싸서 전송하면 RESTFul api를 사용하는데는 큰 무리가 없을것이다.