[ KOSTA 교육 31일차 ] REST와 비동기 | Ajax | 서버에서 JSON을 뿌려주기 위한 Gson Lib (cf. Jackson & SimpleJSON ) | 기초 JS & jQuery | a href="#" | REST 통신 - 클라이언트: Str, JSONStr, JSON <-> 서버 : String, JSON

junjun·2024년 5월 28일
RESTSimpleJSONajaxgsonjacksonjqueryjs
0

KOSTA

목록 보기
28/48

REST 서비스를 개발한다는 것

  • 다른 서비스 (프로바이더)에서 데이터를 가져올 줄 안다.
  • 비동기 통신을 할 줄 안다.
    - 통신에 사용되는 데이터 형식은 JSON / XML ( 95% : 5% )을 통해 가능하다.
  • 웹 개발을 할 줄 안다.
  • REST : 웹 서비스를 위한 분산 시스템 아키텍처

클라이언트 (브라우저)에서 데이터를 주고받을 수 있는 기능

  • <a href>
    - GET 요청
    - Query String을 통해 클라이언트 -> 서버로 데이터 전송됨.
  • <form method>
    - POST 요청
    - Request Body를 통해 클라이언트 -> 서버로 데이터 전송됨.
  • <script>
    - 비동기 통신
    • 순수 JavaScript의 Callbac 또는 jQuery의 AJAX를 통해 비동기적으로 데이터를 가져올 수 있다.

AJAX ( Asynchronous JavaScript And XML )

  • XMLHttpRequest을 사용하여 서버와 비동기 통신 가능

  • 원래 jQuery와 무관한 기술이나,
    jQuery를 통해 쉽게 사용할 수 있는 비동기 통신

JSP에서 간단한 AJAX Call Test

$("#AjaxBtn").click( function(){
		//alert("초간단AJAX");
		var sg = $("#searchGubun").val();
		var ss = $("#searchStr").val();
		$.ajax({
			method    : "GET",
	       url    : "/RestServlet",
	      data 	  : "searchGubun="+sg+"&searchStr="+ss ,
	  	 error 	  : function(myval){console.log("이건에러:" + myval);},
	   success    : function(myval){ 
										console.log("이건성공:" + myval);
										var myval_obj = JSON.parse(myval);
										console.log("성공변환: " + myval_obj[0]["regId"])
										$("#resultDIV").html("<b>"+myval+"</b>")
										// https://api.jquery.com/jQuery.map ( map API )
										var htmlStr = "<table border=1 width=50%><tr><th>제목</th><th>글쓴이</th></tr>";
										$.map(myval_obj, function(myVal, myIdx){
											htmlStr += ("<tr><td>" + myVal["title"] + "</td><td>" + myVal["regId"] + "</td></tr>");
										});
										htmlStr += "</table>";
										$("#resultDIV").empty();
										$("#resultDIV").html("1, <b>" + htmlStr + "</b>");
  							 }
		});
	});
  • jQuery의 AJAX를 통해 서버에게 요청을 보낸다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
// 순수 JS - for문
var arr = [{"empno" : "7733", "ename" : "smith"},
			 {"empno" : "7799", "ename" : "king"}];

for(var i = 0; i < arr.length; i++){
	console.log(arr[i]["empno"]);
}

var arr2 = [["7733", "smith"], ["7799", "king"]];
for(var i = 0; i < arr2.length; i++){
	console.log(arr2[i][0]);
}

// 순수 JS - forEach문
var arr3 = [["7733", "smith"], ["7799", "king"]];
arr3.forEach(function(val, idx){
	console.log((idx+1) + "번 째 : " + val[0]);
});

</script>

<script>
//jQuery each문
	$(function(){
		var arr4 = [["7733", "smith"], ["7799", "king"]];
		$.each(arr4, function(idx, val){
			console.log(idx + "," + val[1]);
		});
	});
</script>

<script>
// jQuery map문
	$(function() {
		var arr5 = [{"empno" : "7733", "ename" : "smith"},
			 {"empno" : "7799", "ename" : "king"}];
		
		$.map(arr5, function(val, idx){
			console.log(idx + "," + val["ename"]);
		});
		
		myPrint("홍길동");
		
		$("#myBtn").click(function(){
			myPrint("홍홍홍");
		});
		
		$("#myDiv").click(function(){
			myPrint("홍홍홍홍");
		});
	});
	
	// $(document.ready()) 의 밖에 있어도 됨.
	// Document가 Ready되지 않아도 실행 가능함.
	// 이렇게 하면 jQuery의 기능이 여러개인 것
	
</script>

<script>
	function myPrint(prm){
		console.log("myprint() 호출 " + prm);
	}
</script>


</head>
<body>
스크립트 반복문 연습<br>

<a href="#" onClick="myPrint('홍길동')">스크립트 호출</a>

<table border=1 width=100><tr><td onClick="myPrint('홍길동')" style="cursor:pointer">스크립트 호출</td></tr></table>

<input type="button" id="myBtn" value="버튼 클릭">

<div id="myDiv">디브 클릭</div>

</body>
</html>

WebServlet

@WebServlet("/RestServlet")
public class RestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public RestServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		Gson gson = new Gson();
		String pagecode = request.getParameter("pagecode");
		
		//-------------------- #AjaxBtn 또는 #1__Str_Str_Btn --------------------
		if (pagecode.equals("R001")) {
			String searchGubun = request.getParameter("searchGubun");
			String searchStr   = request.getParameter("searchStr");
			System.out.println(searchGubun + "," + searchStr);
			
			//String responseStr = "이건 서버가 보낸 메세지";
			ArrayList<BoardVO> list = new ArrayList<BoardVO>();
			BoardVO bvo = new BoardVO(); 
			bvo.setTitle("aaa");
			bvo.setRegId("kim");    //[ {"title"="aaa" , "regid"="kim"} ]
			list.add(bvo);
			bvo = new BoardVO(); 
			bvo.setTitle("bbb");
			bvo.setRegId("hong");		
			list.add(bvo);			//[ {"title"="aaa" , "regid"="kim"}, {"title"="bbb" , "regid"="hong"} ]
            
			String gsonString = gson.toJson(list);    //"[ {"title":"aaa" , "regid":"kim"}, {"title":"bbb" , "regid":"hong"} ]"
			System.out.println(gsonString + "," + gsonString.getClass());
			
			PrintWriter out = response.getWriter();
			out.print(gsonString);
		}
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");		
		Gson gson = new Gson();
		String pagecode = request.getParameter("pagecode");
		//-------------------- #2__JsonStr_Str_Btn --------------------
		//data : "MY_JSONKEY=" + JSON.stringify(objData) ,
		if (pagecode.equals("R002")) {
			response.setContentType("text/html;charset=UTF-8");
			String jsonStr = request.getParameter("MY_JSONKEY");
			System.out.println(jsonStr + "," + jsonStr.getClass());
			PrintWriter out = response.getWriter();
			out.print("R002 응답 ok");
		
		//-------------------- #3__Json_Str_Btn --------------------
        //contentType : "application/json; charset=UTF-8",			
		//data 		  : JSON.stringify(objData)
		} else if (pagecode.equals("R003")) {
			response.setContentType("text/html;charset=UTF-8");
			String jsonStr = request.getReader().lines().collect(Collectors.joining());
			System.out.println(jsonStr + "," + jsonStr.getClass());
			
			// obj  : JSON.stringify({"title":"aaaaatitle","regid":"hong"});
			// str  : "{"title":"aaaaatitle","regid":"hong"}"
			// fromjson : {"title":"aaaaatitle","regid":"hong"}
			BoardVO bvo = gson.fromJson(jsonStr, BoardVO.class);
			System.out.println(bvo.getTitle()); 
			
			PrintWriter out = response.getWriter();
			out.print("R003 응답 ok");
			
		//-------------------- #4__Str_Json_Btn --------------------
		} else if (pagecode.equals("R004")) {
			response.setContentType("application/json;charset=UTF-8");
			
			HashMap<String, String> map = new HashMap<String, String>();
			map.put("status", "200");
			map.put("message", "R004 응답 ok");
			String jsonStr = gson.toJson(map);
			//String jsonStr = "{\"status\":\"200\", \"message\":\"R004 응답 ok\"}";
			PrintWriter out = response.getWriter();
			out.print(jsonStr);
		//-------------------- #5__JsonStr_Json_Btn --------------------
		//data : "MY_JSONKEY=" + JSON.stringify(objData) ,	
		} else if (pagecode.equals("R005")) {
			response.setContentType("application/json;charset=UTF-8");
			String jsonStrParam = request.getParameter("MY_JSONKEY");
			System.out.println(jsonStrParam + "," + jsonStrParam.getClass());
				
				
			HashMap<String, String> map = new HashMap<String, String>();
			map.put("status", "200");
			map.put("message", "R005 응답 ok");
			String jsonStr = gson.toJson(map);
			//String jsonStr = "{\"status\":\"200\", \"message\":\"R004 응답 ok\"}";
			PrintWriter out = response.getWriter();
			out.print(jsonStr);
		//-------------------- #6__Json_Json_Btn --------------------
		} else if (pagecode.equals("R006")) {
			response.setContentType("application/json;charset=UTF-8");
			
			HashMap<String, String> map = new HashMap<String, String>();
			map.put("status", "200");
			map.put("message", "R006 응답 ok");
			String jsonStr = gson.toJson(map);
			//String jsonStr = "{\"status\":\"200\", \"message\":\"R004 응답 ok\"}";
			PrintWriter out = response.getWriter();
			out.print(jsonStr);
		}
	}
}
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
	//$(function() {});
	
	$("#AjaxBtn").click(  function(){
		//alert("초간단AJAX");
		var sg = $("#searchGubun").val();
		var ss = $("#searchStr").val();
		$.ajax({
			method      : "GET",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R001",
	        data 		: "searchGubun="+sg+"&searchStr="+ss ,
	  		error 	    : function(myval){ console.log("에러:" + myval);   },
	  		success     : function(myval){ 
	  										console.log("성공:" + myval);   
	  										$("#resultDIV").html("<b>"+myval+"</b>")
	  									 }
		});
	});
	$("#1__Str_Str_Btn").click(  function(){
		//alert("1");
		var sendFormData = $("#Str_Str_Form1").serialize();  //searchGubun=contents&searchStr=11111
		console.log(sendFormData);
		$.ajax({
			method      : "GET",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R001",
	        data 		: sendFormData ,   //searchGubun=contents&searchStr=11111
	  		error 	    : function(myval){  console.log("에러:" + myval);   },
	  		success     : function(myval){ 
	  										//JSON모양의 글자가 들어옴
	  										console.log("성공:" + myval);
	  										
	  										//obj = JSON.parse(str);
	  										//JSON모양의 글자를 객체 JSON으로 변환
	  										var myval_obj = JSON.parse(myval);
	  										console.log("성공변환:" + myval_obj);
	  										console.log("성공변환:" + myval_obj[0]["regid"]);
	  			 							
	  										
	  										//https://api.jquery.com/jQuery.map/
	  										//[{"seq":0,"title":"aaa","regid":"kim"},{"seq":0,"title":"bbb","regid":"hong"}]
	  										var htmlStr = "<table border=1 width=50%><tr><th>제목</th><th>글쓴이</th></tr>";
	  										$.map( myval_obj, function( MYval, MYidx ) {
	  											htmlStr += "<tr><td>" +MYval["title"] + "</td><td>"+MYval["regid"] +"</td></tr>"
	  											//console.log(MYval["title"] + "," + MYval["regid"] + "," + MYidx);
											});
	  										htmlStr += "</table>";
	  										$("#resultDIV").empty();
	  										$("#resultDIV").html("1. <b>"+htmlStr+"</b>");
	  									 }
		});
		
	});
	
	$("#2__JsonStr_Str_Btn").click(  function(){
		var objData = {"name":"kim","pw":"123"};
		console.log(objData);
		
		var strData  = JSON.stringify(objData)
		console.log(strData);
		
		$.ajax({
			method      : "POST",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R002",
	        contentType : "application/x-www-form-urlencoded; charset=UTF-8",
	        data 		: "MY_JSONKEY=" + JSON.stringify(objData) ,   
	  		error 	    : function(myval){ console.log("에러:" + myval);   },
	  		success     : function(myval){ console.log("성공:" + myval);    }
		});
	});
	
	$("#3__Json_Str_Btn").click(  function(){
		var objData = {"title":"aaaaatitle","regid":"hong"};
		$.ajax({
			method      : "POST",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R003",
	        contentType : "application/json; charset=UTF-8",
	        data 		: JSON.stringify(objData),   
	  		error 	    : function(myval){ console.log("에러:" + myval);   },
	  		success     : function(myval){ console.log("성공:" + myval);    }
		});
	});
	
	$("#4__Str_Json_Btn").click(  function(){
		var sendFormData = $("#Str_Json_Form").serialize();  //searchGubun=contents&searchStr=11111
		$.ajax({
			method      : "POST",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R004",
	        data 		: sendFormData,   
	        dataType    : "json",    //생략가능
	  		error 	    : function(myval){ console.log("에러:" + myval);   },
	  		success     : function(myval){ //{"status":"200", "message":"R004 응답 ok"}
	  									  console.log("성공:" + myval);   
	  									  console.log(myval['status'] + "," + myval['message']);   
	  									 }
		});
	});
	$("#5__JsonStr_Json_Btn").click(  function(){
		var objData = {"name":"kim","pw":"123"};
		console.log(objData);
		
		var strData  = JSON.stringify(objData)
		console.log(strData);
		
		$.ajax({
			method      : "POST",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R005",
	        contentType : "application/x-www-form-urlencoded; charset=UTF-8",
	        data 		: "MY_JSONKEY=" + JSON.stringify(objData) ,   
	        dataType    : "json",    //생략가능
	  		error 	    : function(myval){ console.log("에러:" + myval);   },
	  		success     : function(myval){ //{"status":"200", "message":"R004 응답 ok"}
	  									  console.log("성공:" + myval);   
	  									  console.log(myval['status'] + "," + myval['message']);   
	  									 }
		});
	});
	
	
	$("#6__Json_Json_Btn").click(  function(){
		var objData = {"title":"aaaaatitle","regid":"hong"};
		$.ajax({
			method      : "POST",
	        url         : "<%=request.getContextPath()%>/RestServlet?pagecode=R006",
	        contentType : "application/json; charset=UTF-8",
	        data 		: JSON.stringify(objData),   
	        dataType    : "json",    //생략가능
	  		error 	    : function(myval){ console.log("에러:" + myval);   },
	  		success     : function(myval){ //{"status":"200", "message":"R004 응답 ok"}
	  									  console.log("성공:" + myval);   
	  									  console.log(myval['status'] + "," + myval['message']);   
	  									 }
		});
	});
	
</script>

REST(Representational State Transfer)

: 웹 서비스를 위한 분산 시스템 아키텍처

  • http 프로토콜 사용
  • 데이터 포맷 : json/xml 주로 사용
  • 개인정보 데이터 접근을 위해서는 토큰(OAuth2) 이용
  • 서버(프로바이더)가 정한 규칙에 맞게 요청을 해야 응답을 받을 수 있다
    ex) kakao 사용자 목록 가져오기
Get https://kapi.kakao.com/v1/user/ids
${SERVICE_APP_ADMIN_KEY}
Content-type: application/x-www-form-urlencoded;charset=utf-8

AJAX : 스크립트에서 비동기 통신을 위한 기술(jQuery 스크립트 라이브러리)

: JSON/XML/TEXT/... 데이터표기를 사용해 데이터 송수신
: https://api.jquery.com/jQuery.ajax/
$.ajax( { settings } );	   
$.ajax({ 
  *method      : "GET",
  *url         : "/BoradServlet?pagecode=B001",
  *data 		 : { "name":"kim" , "pw":"123" },    JSON표기 내부적변환 name=kim&pw=123
  : { "name": ["kim","hong"]    }                     name=kim&name=hong
  : "name=kim&pw=123"
  *error 	     : function(){   },
  *success     : function(){   },

  contentType : "application/x-www-form-urlencoded; charset=UTF-8"   보낼데이터 타입
  : "application/json; charset=UTF-8"
  dataType    : (xml, json, script, or html, text),                  서버로부터온 응답데이터 타입

  beforeSend 	: function(){   },
  complete 	: function(){   },
  crossDomain : false,
  headers     : {k:v},
});
profile
junjun
이전 포스트

[ KOSTA 교육 30일차 ] Redirect vs Forward | PRG | QueryString & ResponseBody | REST | AJAX | XML vs JSON | 동기 vs 비동기 | Query String에 같은 key값이 많은 경우 & 서버에서 처리 | REST에서 보내는 데이터 타입, 받는 데이터 타입

다음 포스트

[ KOSTA 32일차 교육 ] Redirect/Forward vs REST | JSON.stringify & JSON.parse | 차트 그리기 c3.js | 크롤링 (JSoup)

0개의 댓글