서블릿 기초 2

서블릿 응답 처리 방법 

1. doGet()이나 doPost() 메서드 안에서 처리

2. javax.servlet.http.HttpServletResponse 객체를 이용

3. setContentType()을 이용해 클라이언트에게 전송할 데이터 종류(MIME-TYPE)를 지정

4. 클라이언트(웹 브라우저)와 서블릿의 통신은 자바 I/O의 스트림을 이용

 

 

+ content-type : 모든 페이지에 존재한다. 

 

 

 

 

MIME - TYPE 

- 미리 설정해 놓은 데이터 종류, 

- 서버(서블릿)에서 웹 브라우저로 데이터를 전송할 때는 어떤 종류의 데이터를 전송하는지

  웹 브라우저에 알려줘야 한다.

- 웹 브라우저가 받을 데이터 종류를 미리 알고 있도록 처리하며, 

  전송 데이터 종류 중 하나를 지정하여 웹 브라우저에 전송 

- 예시 ) 

           • HTML로 전송 시: text/html

           • 일반 텍스트로 전송 시: text/plain

           • json 데이터로 전송 시: application/json

 

 

 

 

응답 과정 

 

 

 

 

 

 

 

 

	response.setContentType("text/html;charset=utf-8");
	PrintWriter out = response.getWriter();
	out.print("<h1> 아이디" + id + "</h1>");
	out.print("<h1> 패스워드" + pw + "</h1>");
	out.flush();

- setContentType() 을 작성하여, 웹 브라우저에서 전송될 데이터의 인코딩 설정을 한다. 

  (text/html → html로 전송한다는 뜻 ) 

- getWriter()를 이용해 PrintWriter의 객체 값을 받아 온다. 

- print() 를 사용하여 출력이 될 수 있도록 한 후, flush() 로 닫아준다. 

 

 

 

계산기 작성으로 알아보기 

- 새로고침을 하면 입력 값은 사라지지만, 계산은 완료되는 것 

 

private void process(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
		res.setContentType("text/html;charset=UTF-8"); // 전송된 파라미터들의 타입을 작성
		// 연산 실행 설정 
		String num = req.getParameter("num"); 
		String ber = req.getParameter("ber");
		String mark = req.getParameter("mark");
		String result = "";
		if (num != null && ber != null) { // mark 는 select 이므로, null일 수 없다. 
			if("+".equals(mark)) { // 비교가 되는 값을 앞으로 넣어야 한다. 
				result = (Integer.parseInt(num) + Integer.parseInt(ber))+"";
			} else if("-".equals(mark)) { 
				result = (Integer.parseInt(num) - Integer.parseInt(ber))+"";
			}else if("/".equals(mark)) { 
				result = (Double.parseDouble(num) / Double.parseDouble(ber))+"";
			}else if("*".equals(mark)) {
				result = (Integer.parseInt(num) * Integer.parseInt(ber))+"";
			}
		}
		
		
		// 계산기 형태 작성 
		PrintWriter pw = res.getWriter();
		pw.println("<h1>계산기</h1>");
		pw.println("<form action = 'calculator' method = 'get'>");
		//pw.println("<input type = 'text' name='num' size = 3>"); 
		pw.println("<input type = 'text' name='num' size = 3 value='"+num+"'>");
		pw.println("<select name = 'mark'>");
		pw.println("<option value = '+'>+</option>");
		pw.println("<option value = '-'>-</option>");
		pw.println("<option value = '*'>*</option>");
		pw.println("<option value = '/'>/</option>");
		pw.println("</select>");
		pw.println("<input type = 'text' name='ber' size = 3>");
		pw.println("<input type = 'submit' value = '=' name='submit'>");
		pw.println("<input type='text' size=3 value='"+result+"'>");
		pw.println("</form>");
	}

 

 

해당 부분에 입력한 값들을 전부 보일 수 있도록 작성하는 방식 

@WebServlet("/calculator")
public class Calculator extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private void process(HttpServletRequest req, 
						HttpServletResponse res) throws IOException {
		res.setContentType("text/html;charset=UTF-8");
		// 연산
		String v1 = req.getParameter("v1") == null ? "" : req.getParameter("v1");
		String v2 = req.getParameter("v2") == null ? "" : req.getParameter("v2");
		String op = req.getParameter("op");
		String result = "";
		if (!"".equals(v1) && !"".equals(v2)) {
			if ("+".equals(op)) {
				result = Integer.parseInt(v1) + Integer.parseInt(v2)+"";
			} else if ("-".equals(op)) {
				result = Integer.parseInt(v1) - Integer.parseInt(v2)+"";
			} else if ("*".equals(op)) {
				result = Integer.parseInt(v1) * Integer.parseInt(v2)+"";
			} else if ("/".equals(op)) {
				result = Double.parseDouble(v1) / Integer.parseInt(v2)+"";
			}
		}
		
		
		PrintWriter pw = res.getWriter();
		pw.println("<h1>계산기</h1>");
		pw.println("<form action='calculator' method='post'>");
		pw.println("<input type='text' name='v1' size=3 value='"+v1+"'>");
		pw.println("<select name='op'>");
		pw.println("<option value='+' "+("+".equals(req.getParameter("op")) ? "selected" : "")+">+</option>");
		pw.println("<option value='-' "+("-".equals(req.getParameter("op")) ? "selected" : "")+">-</option>");
		pw.println("<option value='*' "+("*".equals(req.getParameter("op")) ? "selected" : "")+">*</option>");
		pw.println("<option value='/' "+("/".equals(req.getParameter("op")) ? "selected" : "")+">/</option>");
		pw.println("</select>");
		pw.println("<input type='text' name='v2' size=3 value='"+v2+"'>");
		pw.println("<input type='submit' value='='>");
		pw.println("<input type='text' size=3 value='"+result+"'>");
		pw.println("</form>");
	}

 

 

 

 

 

GET / POST 전송방식

- GET : 서블릿에 데이터를 전송할 때는 데이터가 URL 뒤에 name=value 형태로 전송됩니다.

- POST : 주소창에 보이지 않아서, 보안에 유리

 

 

- 동시에 처리하는 것은 위에 작성 완료 

 

 

 

자바스크립트로 서블릿에 요청하기 ( 유효성 체크 ) 

<script>
	function validate(){
		var user_id = document.querySelector("input[name = 'user_id']").value;
		var user_pw = document.querySelector("input[name = 'user_pw']").value;
		console.log(user_id);
		if(user_id == '') {
			alert('아이디를 입력하세요');
			return false;
		}
		if(user_pw == ''){
			alert ('비밀번호를 입력하세요');
			return false;
		}
		//전송 코드(submit())를 넣어서 작성하면 폼 전달이 된다. 
		document.querySelector("form").submit();		
}	
</script>
</head>
<body>
	<form method="get" action = "login">
		아이디 : <input type = "text" name = "user_id"> <br>
		비밀번호 : <input type = "password" name = "user_pw"> <br>
		<input type = "button" value = "로그인" onclick = "validate();">
	</form>
</body>

 

- 오류 발생 가능성이 생길 때는 항상 입력이 되지 않게 하기 위해서,

   return false 를 사용하는 습관을 들여도 괜찮다. 

 

 

form 자체에 해당 내역을 정리하여 작성하는 경우. 

- script의 함수 부분에 return true 를 작성하여 onsubmit = 'return validate();' 를 통해

  폼 내용이 오류가 없다면 전달될 수 있도록 작성이 된다. 

<script>
	function validate(){
		var user_id = document.querySelector("input[name = 'user_id']").value;
		var user_pw = document.querySelector("input[name = 'user_pw']").value;
		console.log(user_id);
		if(user_id == '') {
			alert('아이디를 입력하세요');
			return false;
		}
		if(user_pw == ''){
			alert ('비밀번호를 입력하세요');
			return false;
		}
		//document.querySelector("form").submit();		
		return true;
}	
		// 전송 코드 넣어서 작성하면 폼까지 전달 가능 
</script>
</head>
<body>
	<form method="get" action = "login" onsubmit = "return validate();">
		아이디 : <input type = "text" name = "user_id"> <br>
		비밀번호 : <input type = "password" name = "user_pw"> <br>
		<input type= "checkbox" name = "subject" value = "java" checked> java
		<input type= "checkbox" name = "subject" value = "c언어" > c언어
		<input type= "checkbox" name = "subject" value = "JSP" > JSP
		<input type= "checkbox" name = "subject" value = "안드로이드" > 안드로이드
		<br>
		<input type = "submit" value = "로그인"> <input type = "reset" value = "다시입력">