22-09-13_jsp(2)

main 2022. 9. 13. 18:32

-====

의사코드 작성..

1. request 전송(front-end)
1) 버튿(generate 버튼 제외, 동적 버튼 포함 ) click 이벤트 처리
2) 비동기 요청 발생
- 조건1)클릭이 발생한 버튼으로부터 data(dataType) 속성 확보 dataType
- 조건2)laguage 라디오 버튼의 값으로 파라미터 형성

2. response 생성( back-end)
1) 메세지 번들 로딩(ResourceBundle api)
2) "hello"코드 메세지 확보
3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)

3. response 수신 후 처리 (front-end) : success function

-----------------

이벤트는 발생했는데 handler는 동작하지 않는...

	$(document).on("click","button:not(.generator)" ,function(){
		console.log(this);
	});

이릏게 동적.. document에다가 걸어서 해줘여ㅑ...

$("[]") ==> attribute selector

language : $("[name='language']:checked").val()

==> language라는 property를 가진 객체로 만들었다...

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06/messageBundle.jsp</title>
<jsp:include page="/includee/preScript.jsp" />

	<!-- 미션이 아마, xml, json, html? 방식으로 message의 hello를 span[id=resultArea]에 출력하기?임 -->

</head>
<body>
	<input type="radio" name="language" value="ko" checked/>한글
	<input type="radio" name="language" value="en" />영문
	
	<button class="generate">버튼 생성</button>
	
		<!-- (1)이것들을 불러오려면...id를줘야할거같고요 -->
	<button type="button" data-data-type="json" id="json">JSON</button>
	<button type="button" data-data-type="xml" id="xml">XML</button>
	
	<span id="resultArea"></span>
	
	<script type="text/javascript">
	$(".generate").on("click",function(){
		let newBtn = $("<button>").text("HTML")
								 .data("dataType","html");
		//마지막 버튼을 선택해라	, after 그 다음에 추가할거다 newBtn을	 
		$("button:last").after(newBtn);
	});
	
	
//	1. request 전송(front-end)
//		1) 버튿(generate 버튼 제외, 동적 버튼 포함 ) click 이벤트 처리
//		2) 비동기 요청 발생
//			- 조건1)클릭이 발생한 버튼으로부터 data(dataType) 속성 확보 dataType
//			- 조건2)laguage 라디오 버튼의 값으로 파라미터 형성
	$(document).on("click","button:not(.generator)" ,function(){
		let dataType = $(this).data('dataType');
		let settings = {
				url : "<%=request.getContextPath()%>/getMessage",
				success : function(resp) {

				},
				error : function(errorResp) {
					console.log(errorResp.status);
				}
			};
								//3항연산자 dataType을 기본으로 쓰되 없으면 json써라
		settings['dataType'] = dataType ? dataType : "json";
						//check가 된 radio버튼만 가져오기..
		settings.data = {language : $("[name='language']:checked").val()
								
						};
		$.ajax(settings);
	});
//	2. response 생성( back-end)
//		1) 메세지 번들 로딩(ResourceBundle api)
//		2) "hello"코드 메세지 확보
//		3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)
		
//	3. response 수신 후 처리 (front-end) : success function
	
	
	
	</script>
</body>
</html>

1단계완료

---

servlet

----

필드에 가면 vo아예 없는데도 있는데, map이 그 역할 다 하고 있음.

-> 장점 : 굉장히 유연함

//json으로 만들건지, xml로 만들건지...

이거는

dataType는 Accept라는 header와 Content-Type을 결정함

package kr.or.ddit.servlet06;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collections;
import java.util.Map;
import java.util.ResourceBundle;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.dataformat.xml.XmlMapper;

/**
 * Servlet implementation class MessageBundleResadServlet
 */
@WebServlet(name = "MessageBundleReadServlet", urlPatterns = { "/getMessage" })
public class MessageBundleResadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		1) 메세지 번들 로딩(ResourceBundle api)
//		2) "hello"코드 메세지 확보
//		3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)
		
		//번들 로딩
		String baseName ="egovframework/message/com/message-common";
		ResourceBundle bundle = ResourceBundle.getBundle(baseName);

		//hello꺼내기
		String value = bundle.getString("hello");
		
		//이걸... json데이터로 만들려면 객체화 해야 하는데 우리는 '안녕하세요'라는 값만 가짐..
		//이걸 먼저 객체화 시켜야 함
		//map이라는 collection이 필요하다고...
		Map<String, Object> model = Collections.singletonMap("hello", value);
		//이게 가공된 information, 이게 xml이나 json이되면 그게 content
		
		//json으로 만들건지, xml로 만들건지...
		String accept = request.getHeader("Accept");
		String contentType = null;
		
		if(accept.contains("json")) {
			contentType = "application/json;charset=UTF-8";
			//받을 content가 있으면 header에 이게 필요하죠
			response.setContentType(contentType);
			
			try (
					PrintWriter out = response.getWriter();
				){
					//marshalling 하려면 write해야..
					//model이 information이니까 이걸 넘겨야지
					new ObjectMapper().writeValue(out, model);
				} 
			
		}else if(accept.contains("xml")) {
			contentType = "application/xml;charset=UTF-8";
			try (
					PrintWriter out = response.getWriter();
				){
					//여기는 xml mapper로 바뀌겠죠. 같은 내용인데
					new XmlMapper().writeValue(out, model);
				} 
		}else {
			contentType = "text/html;charset=UTF-8";
			//일단 여기는 비워놓을 거예요. html은 아직은 처리가 안 되는 거지
		}
		
		
	}



}

2단계 완료

---

$(resp).find("hello");

이거랑

resultArea.html(resp.hello);

이거는 같은건데... content의 종류에 따라서 다르게 적은 거지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06/messageBundle.jsp</title>
<jsp:include page="/includee/preScript.jsp" />

	<!-- 미션이 아마, xml, json, html? 방식으로 message의 hello를 span[id=resultArea]에 출력하기?임 -->

</head>
<body>
	<input type="radio" name="language" value="ko" checked/>한글
	<input type="radio" name="language" value="en" />영문
	
	<button class="generate">버튼 생성</button>
	
		<!-- (1)이것들을 불러오려면...id를줘야할거같고요 -->
	<button type="button" data-data-type="json" id="json">JSON</button>
	<button type="button" data-data-type="xml" id="xml">XML</button>
	
	<span id="resultArea"></span>
	
	<script type="text/javascript">
	$(".generate").on("click",function(){
		let newBtn = $("<button>").text("HTML")
								 .data("dataType","html");
		//마지막 버튼을 선택해라	, after 그 다음에 추가할거다 newBtn을	 
		$("button:last").after(newBtn);
	});
	
	
//	1. request 전송(front-end)
//		1) 버튿(generate 버튼 제외, 동적 버튼 포함 ) click 이벤트 처리
//		2) 비동기 요청 발생
//			- 조건1)클릭이 발생한 버튼으로부터 data(dataType) 속성 확보 dataType
//			- 조건2)laguage 라디오 버튼의 값으로 파라미터 형성


	let resultArea = $("#resultArea");
	//function이 하나가 아니라 세개니까 그거를 묶으려면 필요한게? 
	//	- 배열은 index가 숫자뿐임 식별성이 없음. 아래와 같이 적어보자	
	let successFunctions = {
		//함수가 되고, json이라는 이름이 생김
		//함수 안에서 각 content에 맞게 가지고 놀면 됨
		json : function(resp){
			//resultArea에 resp안에있는 hello라는 property를 넣어 주어야 함
			resultArea.html(resp.hello);
		},
		xml : function(resp){
			//어떻게 돌아오는지 알아야 하니까 일단 출력해보자
			//console.log(resp);
			let text = $(resp).find("hello").text();
			resultArea.html(text);
		},
		html : function(resp){
			resultArea.html(resp);
		}
} 
	$(document).on("click","button:not(.generator)" ,function(){
		//clear시켜줄거임 두가지 방법이 있음. 
//		resultArea.html("");
		resultArea.empty();
		let dataType = $(this).data('dataType');
		let settings = {
				url : "<%=request.getContextPath()%>/getMessage",
				success : function(resp) {
					resp.hello
				},	
				error : function(errorResp) {
					console.log(errorResp.status);
				}
			};
								//3항연산자 dataType을 기본으로 쓰되 없으면 json써라
		settings['dataType'] = dataType ? dataType : "json";
						//check가 된 radio버튼만 가져오기..
		//dataType에 따라 successFunctions에서 원하는 함수를 가져올 수 있다,..
//		successFunctions['json']
//		settings.success = successFunctions[settings['dataType']]
		settings.success = successFunctions[settings.dataType]
		
		settings.data = {language : $("[name='language']:checked").val()
								
						};
		$.ajax(settings);
	});
//	2. response 생성( back-end)
//		1) 메세지 번들 로딩(ResourceBundle api)
//		2) "hello"코드 메세지 확보
//		3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)
		
//	3. response 수신 후 처리 (front-end) : success function
	
	
	
	</script>
</body>
</html>

package kr.or.ddit.servlet06;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collections;
import java.util.Locale;
import java.util.Map;
import java.util.ResourceBundle;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.dataformat.xml.XmlMapper;

/**
 * Servlet implementation class MessageBundleResadServlet
 */
@WebServlet(name = "MessageBundleReadServlet", urlPatterns = { "/getMessage" })
public class MessageBundleResadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		1) 메세지 번들 로딩(ResourceBundle api)
//		2) "hello"코드 메세지 확보
//		3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)
		
		//Locale 통해서 한/영 선택했을떄 다르게 나오게 설정하는거임
		Locale locale = request.getLocale();
		//뭘 꺼내올거면 encording 해줘야 함.
		//Overrides the name of the character encoding used in the body of thisrequest.
		//body있을때만이라서 body없는 get에서는 안됨
		
	
		request.setCharacterEncoding("UTF-8");
		String languageTag = request.getParameter("language");
		if(languageTag!=null && !languageTag.isEmpty()) {
			locale = Locale.forLanguageTag(languageTag);
		}
		
		
		//번들 로딩
		String baseName ="egovframework/message/com/message-common";
		ResourceBundle bundle = ResourceBundle.getBundle(baseName, locale);

		//hello꺼내기
		String value = bundle.getString("hello");
		
		//이걸... json데이터로 만들려면 객체화 해야 하는데 우리는 '안녕하세요'라는 값만 가짐..
		//이걸 먼저 객체화 시켜야 함
		//map이라는 collection이 필요하다고...
		Map<String, Object> model = Collections.singletonMap("hello", value);
		//이게 가공된 information, 이게 xml이나 json이되면 그게 content
		
		//json으로 만들건지, xml로 만들건지...
		String accept = request.getHeader("Accept");
		String contentType = null;
		
		if(accept.contains("json")) {
			contentType = "application/json;charset=UTF-8";
			//받을 content가 있으면 header에 이게 필요하죠
			response.setContentType(contentType);
			
			try (
					PrintWriter out = response.getWriter();
				){
					//marshalling 하려면 write해야..
					//model이 information이니까 이걸 넘겨야지
					new ObjectMapper().writeValue(out, model);
				} 
			
		}else if(accept.contains("xml")) {
			contentType = "application/xml;charset=UTF-8";
			response.setContentType(contentType);
			try (
					PrintWriter out = response.getWriter();
				){
					//여기는 xml mapper로 바뀌겠죠. 같은 내용인데
					new XmlMapper().writeValue(out, model);
				} 
		}else {
			contentType = "text/html;charset=UTF-8";
			//일단 여기는 비워놓을 거예요. html은 아직은 처리가 안 되는 거지
		}
		
		
	}



}

이렇게 하면 실행이

한영/xml/json 잘처리됩니다.

3단계가 되었고요

이제 html을 할거예요....

view를 만들건데요,,,,.

<%@ 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>
</head>
<body>
	<!-- 이거는 model1으로는 운용을 못하는상태죠.. -->
	<div>hello : <%=request.getAttribute("hello") %></div>

</body>
</html>

-> 왜 운용안되는지 까먹음

===

servlet 아래에서

if(accept.contains("json")) {
			contentType = "application/json;charset=UTF-8";
			//받을 content가 있으면 header에 이게 필요하죠
			response.setContentType(contentType);
			
			try (
					PrintWriter out = response.getWriter();
				){
					//marshalling 하려면 write해야..
					//model이 information이니까 이걸 넘겨야지
					new ObjectMapper().writeValue(out, model);
				} 
			
		}else if(accept.contains("xml")) {
			contentType = "application/xml;charset=UTF-8";
			response.setContentType(contentType);
			try (
					PrintWriter out = response.getWriter();
				){
					//여기는 xml mapper로 바뀌겠죠. 같은 내용인데
					new XmlMapper().writeValue(out, model);
				} 
		}else {
			contentType = "text/html;charset=UTF-8";
			//일단 여기는 비워놓을 거예요. html은 아직은 처리가 안 되는 거지
			
			//여기서 redirect 방식으로는 못하고요 forward냐 include냐인데요
			//forward를 쓸거예요.  
			//여기서 만들어지는 응답이 없으니까 include 할 필요가 없으니까요
			String viewName	="/WEB-INF/views/messageView.jsp";
			
			//dispatcher로 ...forward방식으로 request와 response를 넘겨요
			request.getRequestDispatcher(viewName).forward(request, response);
		}

이렇게 하면

잘 나오지만 근데 보면 span tag 안에 title tag 등이 들어있쬬

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div>hello : <%=request.getAttribute("hello") %></div>
<script type="text/javascript">

</script>

이 코드를 이렇게 간결하게 적어주고요

else {
			
			request.setAttribute("hello", value);
			
			//여기서 redirect 방식으로는 못하고요 forward냐 include냐인데요
			//forward를 쓸거예요.  
			//여기서 만들어지는 응답이 없으니까 include 할 필요가 없으니까요
			String viewName	="/WEB-INF/views/messageView.jsp";
			
			//dispatcher로 ...forward방식으로 request와 response를 넘겨요
			request.getRequestDispatcher(viewName).forward(request, response);
		}

else 아래를 이렇게 적어줘요

근데 지금까지 우리가 한게 model2...?....

	if(accept.contains("json")) {
//			contentType = "application/json;charset=UTF-8";
//			//받을 content가 있으면 header에 이게 필요하죠
//			response.setContentType(contentType);
//			
//			try (
//					PrintWriter out = response.getWriter();
//				){
//					//marshalling 하려면 write해야..
//					//model이 information이니까 이걸 넘겨야지
//					new ObjectMapper().writeValue(out, model);
//				} 
			
		}else if(accept.contains("xml")) {
//			contentType = "application/xml;charset=UTF-8";
//			response.setContentType(contentType);
//			try (
//					PrintWriter out = response.getWriter();
//				){
//					//여기는 xml mapper로 바뀌겠죠. 같은 내용인데
//					new XmlMapper().writeValue(out, model);
//				} 
		}else {
			
			request.setAttribute("hello", value);
			
			//여기서 redirect 방식으로는 못하고요 forward냐 include냐인데요
			//forward를 쓸거예요.  
			//여기서 만들어지는 응답이 없으니까 include 할 필요가 없으니까요
			String viewName	="/WEB-INF/views/messageView.jsp";
			
			//dispatcher로 ...forward방식으로 request와 response를 넘겨요
			request.getRequestDispatcher(viewName).forward(request, response);
		}

if, elseif문의 내용을 날린다면..?..... 순수하게 controller의 역할만 남는거죠...?

저기 else에도 content 타입은 view에 넘어가서 거기서 처리해주죠...

똑같이

controller의 역할은... ???가 끝이예요 못들음

- data 만들고

- information만들고

- view로 보내주고

이런게 일반적인 controller의 역할이예요

---

이거저거 다 날려~`~~~~~~~~ㅎ..ㅎ...

view를 일반적으로 jsp로 만드는데요..

지금은 왜때문인지 꼭 그럴 필요는 없대요

-------

request에 따라서 response..서버에서 작동하는 method가 결정됨..(post, get)

----

content에 대한 책임은 view,..servlet쪽으로 넘어가는 거예요 이제 그러면 model2 아키텍쳐가 되는거죠...

아악

[JsonViewServlet.java]

package kr.or.ddit.commons;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/jsonView.do")
public class JsonViewServlet extends HttpServlet{
	
	@Override
	protected void service(HttpServletRequest requeset, HttpServletResponse response) throws ServletException, IOException {
		Map<String, Object> model = new HashMap<>();
		Enumeration<String> attributeNames = requeset.getAttributeNames();
		while (attributeNames.hasMoreElements()) {
			String name = (String) attributeNames.nextElement();
			Object value = requeset.getAttribute(name);
			model.put(name, value);
		}
		
		String contentType = "application/json;charset=UTF-8";
		response.setContentType(contentType);
		
		try (
				PrintWriter out = response.getWriter();
			){
				new ObjectMapper().writeValue(out, model);
			} 
	}
}

[XmlViewServlet.java]

package kr.or.ddit.commons;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.dataformat.xml.XmlMapper;

@WebServlet("/xmlView.do")
public class XmlViewServlet extends HttpServlet{
	
	@Override
	protected void service(HttpServletRequest requeset, HttpServletResponse response) throws ServletException, IOException {
		Map<String, Object> model = new HashMap<>();
		Enumeration<String> attributeNames = requeset.getAttributeNames();
		while (attributeNames.hasMoreElements()) {
			String name = (String) attributeNames.nextElement();
			Object value = requeset.getAttribute(name);
			model.put(name, value);
		}
		
		String contentType = "application/xml;charset=UTF-8";
		response.setContentType(contentType);
		
		try (
				PrintWriter out = response.getWriter();
			){
				new XmlMapper().writeValue(out, model);
			} 
	}
}

[messageBundleReadServlet] 최종..

package kr.or.ddit.servlet06;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collections;
import java.util.Locale;
import java.util.Map;
import java.util.ResourceBundle;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.dataformat.xml.XmlMapper;

/**
 * Servlet implementation class MessageBundleResadServlet
 */
@WebServlet(name = "MessageBundleReadServlet", urlPatterns = { "/getMessage" })
public class MessageBundleResadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		1) 메세지 번들 로딩(ResourceBundle api)
//		2) "hello"코드 메세지 확보
//		3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)
		
		//Locale 통해서 한/영 선택했을떄 다르게 나오게 설정하는거임
		Locale locale = request.getLocale();
		//뭘 꺼내올거면 encording 해줘야 함.
		//Overrides the name of the character encoding used in the body of thisrequest.
		//body있을때만이라서 body없는 get에서는 안됨
		
	
		request.setCharacterEncoding("UTF-8");
		String languageTag = request.getParameter("language");
		if(languageTag!=null && !languageTag.isEmpty()) {
			locale = Locale.forLanguageTag(languageTag);
		}
		
		
		//번들 로딩
		String baseName ="egovframework/message/com/message-common";
		ResourceBundle bundle = ResourceBundle.getBundle(baseName, locale);

		//hello꺼내기
		String value = bundle.getString("hello");
		
		//이걸... json데이터로 만들려면 객체화 해야 하는데 우리는 '안녕하세요'라는 값만 가짐..
		//이걸 먼저 객체화 시켜야 함
		//map이라는 collection이 필요하다고...
//		Map<String, Object> model = Collections.singletonMap("hello", value);
		//이게 가공된 information, 이게 xml이나 json이되면 그게 content
		
		//json으로 만들건지, xml로 만들건지...
		String accept = request.getHeader("Accept");
//		String contentType = null;
		
		request.setAttribute("hello", value);
		String viewName = null;
		
		if(accept.contains("json")) {
			viewName = "/jsonView.do";
			
		}else if(accept.contains("xml")) {
			viewName = "/xmlView.do";
		}else {
			
			
			
			//여기서 redirect 방식으로는 못하고요 forward냐 include냐인데요
			//forward를 쓸거예요.  
			//여기서 만들어지는 응답이 없으니까 include 할 필요가 없으니까요
			viewName	="/WEB-INF/views/messageView.jsp";
			
			//dispatcher로 ...forward방식으로 request와 response를 넘겨요
			
		}
		//view로 이동하는 코드
		request.getRequestDispatcher(viewName).forward(request, response);
		
	}



}

[messageBundle.jsp 최종..]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06/messageBundle.jsp</title>
<jsp:include page="/includee/preScript.jsp" />

	<!-- 미션이 아마, xml, json, html? 방식으로 message의 hello를 span[id=resultArea]에 출력하기?임 -->

</head>
<body>
	<input type="radio" name="language" value="ko" checked/>한글
	<input type="radio" name="language" value="en" />영문
	
	<button class="generate">버튼 생성</button>
	
		<!-- (1)이것들을 불러오려면...id를줘야할거같고요 -->
	<button type="button" data-data-type="json" id="json">JSON</button>
	<button type="button" data-data-type="xml" id="xml">XML</button>
	
	<span id="resultArea"></span>
	
	<script type="text/javascript">
	$(".generate").on("click",function(){
		let newBtn = $("<button>").text("HTML")
								 .data("dataType","html");
		//마지막 버튼을 선택해라	, after 그 다음에 추가할거다 newBtn을	 
		$("button:last").after(newBtn);
	});
	
	
//	1. request 전송(front-end)
//		1) 버튿(generate 버튼 제외, 동적 버튼 포함 ) click 이벤트 처리
//		2) 비동기 요청 발생
//			- 조건1)클릭이 발생한 버튼으로부터 data(dataType) 속성 확보 dataType
//			- 조건2)laguage 라디오 버튼의 값으로 파라미터 형성


	let resultArea = $("#resultArea");
	//function이 하나가 아니라 세개니까 그거를 묶으려면 필요한게? 
	//	- 배열은 index가 숫자뿐임 식별성이 없음. 아래와 같이 적어보자	
	let successFunctions = {
		//함수가 되고, json이라는 이름이 생김
		//함수 안에서 각 content에 맞게 가지고 놀면 됨
		json : function(resp){
			//resultArea에 resp안에있는 hello라는 property를 넣어 주어야 함
			resultArea.html(resp.hello);
		},
		xml : function(resp){
			//어떻게 돌아오는지 알아야 하니까 일단 출력해보자
			//console.log(resp);
			let text = $(resp).find("hello").text();
			resultArea.html(text);
		},
		html : function(resp){
			resultArea.html(resp);
		}
} 
	$(document).on("click","button:not(.generator)" ,function(){
		//clear시켜줄거임 두가지 방법이 있음. 
//		resultArea.html("");
		resultArea.empty();
		let dataType = $(this).data('dataType');
		let settings = {
				url : "<%=request.getContextPath()%>/getMessage",
				success : function(resp) {
					resp.hello
				},	
				error : function(errorResp) {
					console.log(errorResp.status);
				}
			};
								//3항연산자 dataType을 기본으로 쓰되 없으면 json써라
		settings['dataType'] = dataType ? dataType : "json";
						//check가 된 radio버튼만 가져오기..
		//dataType에 따라 successFunctions에서 원하는 함수를 가져올 수 있다,..
//		successFunctions['json']
//		settings.success = successFunctions[settings['dataType']]
		settings.success = successFunctions[settings.dataType]
		
		settings.data = {language : $("[name='language']:checked").val()
								
						};
		$.ajax(settings);
	});
//	2. response 생성( back-end)
//		1) 메세지 번들 로딩(ResourceBundle api)
//		2) "hello"코드 메세지 확보
//		3) 확보한 메세지를 컨텐츠화(Accept 헤더에 따라 Content-Type 결정)
		
//	3. response 수신 후 처리 (front-end) : success function
	
	
	
	</script>
</body>
</html>

[messageView.jsp]최종...

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div>hello : <%=request.getAttribute("hello") %></div>
<script type="text/javascript">

</script>

jsp....얘네는 뭔지 모르지만 tomcat이 넣어주는 property에요 우리는 신경쓸 필요가 없어요

===

내일 수업에서 핵심...??

Attribute를 넣을 수 있는 게 4가지 객체???가 있는데... 그거를...

내일의 핵심 키워드

1) 기본객체

2) 스코프...?????

내일은 여유가 되면 여기서 한번 더 바꿔볼거ㄹ애요...

DAO나 SERVICE구조..

layered화 시키는 구조...중프 구조와 비슷해지게 되 ㄹ거라고..

오늘의 수업... 지난시간의 리뷰였어요... 안해도 되는 수업이었어요..

1)??

2) request, reponse가 어떻게 포장이 되는지..

3) Accept와 Conent의 중요성....

-- 의사코드 작성이 제일 중요해요.. 문제 해결의 핵심은 이거고요... 이거를 안써봐버릇하니까 해결이 어려운거예요

습관을 들여봅시다.../

'main' 카테고리의 다른 글

22-09-14_jsp (1)	2022.09.14
22-09-14_python (1)	2022.09.14
22-09-13_python (0)	2022.09.13
22-09-08_jsp(4) (0)	2022.09.08
22-09-08_jsp(3) (0)	2022.09.08

ABOUT ME

fight with code wrote myself fight with code wrote myself

'main' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'main' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바