반응형

Servlet

- 웹 서비스를 위한 자바 클래스를 말하며 자바를 사용하여 웹을 만들기 위해 필요한 기술 

- 사용자의 요청을 받아 처리하고 그에 해당하는 응답페이지를 만들어 다시 사용자에게 전송하는 역할을 하는

  자바 클래스(Controller의 기능)

- 즉, 웹에서 동적인 페이지를 JAVA로 구현할 수 있도록 도와주는 서버측 프로그램(WAS서버에서 구동)

  JAVA 클래스에섯 웹페이지 구현을 위한 HTML이 들어간 구조라고 할 수 있다(java코드로 html 구현)

 

JSP

- HTML 형식 내에서 자바코드를 쓸 수 있는 자바언어로 서블릿에서 응답화면을 구현했던 복잡함을 보다 간결하게 해결

- Servlet에서는 비즈니스 로직 처리(컨트롤러 역할)에만 집중하고, 

  프로젠테이션 로직 처리(응답화면을 만들어내는 뷰 역할)은 JSP에서 구현하도록 분리

 

Servlet과 JSP 차이

Servlet : Java 코드 내에 html을 작성하는 형태
JSP(Java Server Page) : html 내에 java 코드를 작성하는 형태

반응형

'Servlet/JSP' 카테고리의 다른 글

[JSP] getAttribute  (0) 2022.05.02
[JSP] JSP 기초 - 스크립팅원소, 지시어, 주석  (0) 2022.05.02
[Servlet] POST 방식 요청  (0) 2022.05.01
[Servlet] GET 방식 요청  (0) 2022.05.01
기본환경구축  (0) 2022.04.28
반응형

POST 방식의 특징

1. POST 방식으로 요청 시 URL의 Body 영역에 데이터를 포함하여 요청

   -> 사용자가 입력한 값(데이터)들이 URL에 노출되지 않음

   -> 로그인이나 회원가입의 경우 POST방식 적합

2. Body영역의 전송 길이 제한 없음

   -> 게시판 작성의 경우 POST방식 적합

3. 즐겨찾기는 가능하지만 전달되는 데이터가 URL에 노출되어있지 않아 GET방식과 같이 기존의 검색결과를 볼수없음

POST 방식으로 요청 하여 응답페이지 받기

@index.html

<h3><a href="views\requestTest_POST.html">POST방식 테스트</a></h3>

@views/requestTest_POST.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POST 방식 테스트 요청 페이지</title>
</head>
<body>
<h1>POST 방식으로 요청 후 응답페이지 받아보기</h1>

<h2>개인 정보 입력 - POST</h2>

<!-- 상대경로 -->
<form action="../test2.do" method="post">
	<ul>
		<li>
			이름 : <input type="text" name="name"> 
			<!-- input태그 사용시 key값은 name으로 선택되니 반드시 만들어 넘겨야한다 -->
		</li>
		<li>
			성별 : <label for="gender">남자</label>
			<input type="radio" name="gender" id="gender" value="M">
			<label for="gender">여자</label>
			<input type="radio" name="gender" id="gender" value="W">
		</li>
		<li>
			나이 : <input type="number" name="age" id="">
		</li>
		<li>
			사는 지역 :
			<select name="city" id="">
				<option>서울</option>
                <option>경기</option>
                <option>강원</option>
                <option>부산</option>
                <option>대구</option>
                <option>대전</option>
                <option>울산</option>
                <option>인천</option>
				<!-- 텍스트값을 value로 넣기위해 별도 value 지정안함 -->
			</select>
		</li>
		<li>
			키 : <input type="range" name="height" min="100" max="300" id="">
		</li>
		<li>
			좋아하는 음식(다중선택 가능) :
            한식<input type="checkbox" name="food" value="한식"> /
            중식<input type="checkbox" name="food" value="중식"> /
            일식<input type="checkbox" name="food" value="일식"> /
            양식<input type="checkbox" name="food" value="양식"> /
            분식<input type="checkbox" name="food" value="분식">
            <!-- checkbox 사용시 같은 묶음으로 묶어줄 경우 
            radio버튼과 마찬가지로 key값을 동일하게 지정한다
            단, 한개의 key값에 여러개의 value가 묶여 넘겨진다-->
		</li>
		<li>
            <input type="submit" value="전송">
            <input type="reset" value="리셋">
        </li>
	</ul>
</form>
</body>
</html>

 

@controller/RequestPostServlet.java

- POST 방식 요청은 기본 인코딩이 iso 설정 되어있어 한글 값이 깨지기 때문에 별도로 UTF-8로 맞춰야함
  값을 꺼내오기 전에 인코딩 설정!

- 응답페이지 구성을 jsp에게 넘기는데, 이때 응답페이지에서 필요로하는 데이터들을 request 객체에 담아서 보내야함
  request에 attribute 영역에 (키-밸류)형태로 담아서 보냄

request.setAttribute("키", "밸류"); 

- RequestDispatcher : JSP로 응답페이지를 위임하기 위해 필요한 객체

//객체생성(메소드 이용)
RequestDispatcher 변수명 = request.getRequestDispatcher("응답페이지보낼JSP경로");

//포워딩 : JSP에 응답페이지 위임 요청
view.forward(request, response);
package com.kh.controller;

import java.io.IOException;

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

/**
 * Servlet implementation class RequestPostServlet
 */
@WebServlet("/test2.do")
public class RequestPostServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public RequestPostServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// 인코딩 설정
		request.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		String gender = request.getParameter("gender");
		int age = Integer.parseInt(request.getParameter("age"));
		String city = request.getParameter("city");
		double height = Double.parseDouble(request.getParameter("height"));
		String[] foods = request.getParameterValues("food");
		
		System.out.println("name : "+name);
		System.out.println("gender : "+gender);
		System.out.println("age : "+age);
		System.out.println("city : "+city);
		System.out.println("height : "+height);
		System.out.println("foods : "+foods);
		
		// service - dao - db 처리완료 후 반환 처리를 마치고 사용자에게 응답화면 출력
		// JSP에 보낼 객체 담기
		request.setAttribute("name", name);
		request.setAttribute("gender", gender);
		request.setAttribute("age", age);
		request.setAttribute("city", city);
		request.setAttribute("height", height);
		request.setAttribute("foods", foods);	
		
		// RequestDispatcher
		// 1) 응답하고자 하는 뷰 (jsp)를 선택하면서 생성
		RequestDispatcher view = request.getRequestDispatcher("views/responsePage.jsp");
		// 2) 포워딩(jsp에게 위임)
		view.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		System.out.println("doPost 작동되나?");
		doGet(request, response);
	}
}
반응형

'Servlet/JSP' 카테고리의 다른 글

[JSP] getAttribute  (0) 2022.05.02
[JSP] JSP 기초 - 스크립팅원소, 지시어, 주석  (0) 2022.05.02
[Servlet/JSP] Servlet과 JSP 기본 정의  (0) 2022.05.02
[Servlet] GET 방식 요청  (0) 2022.05.01
기본환경구축  (0) 2022.04.28
반응형

GET 방식의 특징

  1. GET 방식으로 요청하는건 URL의 Header 영역에 데이터들을 포함시켜 요청
    -> 사용자가 입력한 값(데이터)들이 URL에 노출
    -> 보안유지가 불가능
    -> 로그인, 회원가입의 경우 부적합
  2. Header 영역은 전송하는 길이에 제한이 있음
    -> 방대한 데이터를 담았을 경우 초과된 데이터는 절단되어 넘어감
    -> 게시판 작성의 경우 부적합
  3. 장점은 URL에 입력데이터가 노출되지 때문에 즐겨찾기(북마크) 가능=>재요청가능
    -> 검색 기능의 경우 적합

GET 방식으로 요청하여 응답페이지 받기

@index.html

<h3><a href="views\requestTest_GET.html">GET방식 테스트</a></h3>

@views-requestTest_GET.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>GET 방식으로 요청 후 응답페이지 받아보기</h1>
	
	<h2>개인 정보 입력 - GET</h2>
	
	<!-- 절대경로 -->
	 <form action="/1_Servlet/test.do" method="get">
		<ul>
			<li>
				이름 : <input type="text" name="name"> 
                <!-- input태그 사용시 key값은 name으로 선택되니 반드시 만들어 넘겨야한다 -->
			</li>
			<li>
				성별 : 
				<label for="gender">남자</label>
                <input type="radio" name="gender" id="gender" value="M">
				<label for="gender">여자</label>
                <input type="radio" name="gender" id="gender" value="W">
			</li>
			<li>
				나이 : <input type="number" name="age" id="">
			</li>
			<li>
				사는 지역 :
				<select name="city" id="">
					<option>서울</option>
					<option>경기</option>
					<option>강원</option>
					<option>부산</option>
					<option>대구</option>
					<option>대전</option>
					<option>울산</option>
					<option>인천</option>
					<!-- 텍스트값을 value로 넣을거라 value 지정안함(삭제) -->
				</select>
			</li>
			<li>
				키 : <input type="range" name="height" min="100" max="300" id="">
			</li>
			<li>
				좋아하는 음식(다중선택 가능) :
				<!-- input[name="food"]*5 -->
				한식<input type="checkbox" name="food" value="한식"> /
				중식<input type="checkbox" name="food" value="중식"> /
				일식<input type="checkbox" name="food" value="일식"> /
				양식<input type="checkbox" name="food" value="양식"> /
				분식<input type="checkbox" name="food" value="분식">
				<!-- checkbox 사용시 같은 묶음으로 묶어줄 경우 radio버튼과 마찬가지로 
					key값을 동일하게 지정한다
					단, 한개의 key값에 여러개의 value가 묶여 넘겨진다-->
			</li>
			<li>
				<input type="submit" value="전송">
				<input type="reset" value="리셋">
			</li>
		</ul>
	 </form>
</body>
</html>

 

서블릿 코드

new-servlet

자동완성 코드

위의 <form action="/1_Servlet/test.do" method="get"> 코드를 통해 폼태그 값을 가지고

아래 서블릿 코드 중 @WebServlet("/test.do")로 연결되어 값이 담긴다

 

doGet method

- Get방식 사용하여 서블릿 호출 될 경우, doGet 메소드 바로 호출

HttpServletRequest : 요청 처리 객체, 사용자가 입력한 값, 요청 전송방식, 사용자 ip 등 전달된 데이터가 담긴다

HttpServletResponse : 응답 처리 객체

 

- 요청 처리 시 요청 시 전달된 값(사용자가 입력한값)을 꺼내야한다

  (key-value 형태로 이루어져 있으며 여기서 key는 속성의 name)

  request의 parameter 영역으로 부터 전달된 데이터를 꺼내는 메소드

request.getParameter("키값") => value값이 1개 일 때, 반환타입 String(자료형 변환시 형변환 필요)

request.getParameterValues("키값") => value값이 2개 이상일때, 반환타입 String[]

- response 객체를 통해 사용자에게 html(응답화면) 전달
  이 출력내용은 html형식이고 인코딩은 utf-8이다 라고 전달

response.setContentType("text/html; charset=UTF-8");

@controller-RequestGetServlet.java

package com.kh.controller;

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class RequestGetServlet
 */
@WebServlet("/test.do")
public class RequestGetServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public RequestGetServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String name = request.getParameter("name");
		String gender = request.getParameter("gender");
		int age = Integer.parseInt(request.getParameter("age"));
		String city = request.getParameter("city");
		double height = Double.parseDouble(request.getParameter("height"));
		// 체크박스와 같이 복수개의 정보를 받을떈 배열로 받는다
		String[] foods = request.getParameterValues("food");
		
		System.out.println(name);
		System.out.println(gender);
		System.out.println(age);
		System.out.println(city);
		System.out.println(height);
		System.out.println(foods);
		
		if(foods==null) {
			System.out.println("foods : " + "없음");
		}else {
			System.out.println("foods : " + String.join(",", foods));
			// 배열에 있는 모든값들을 구분자를 통해서 하나의 문자열로 반환시켜주는 메소드 String.join("구분자",배열);
		}
        
	response.setContentType("text/html; charset=UTF-8");
	
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
    

}
반응형

'Servlet/JSP' 카테고리의 다른 글

[JSP] getAttribute  (0) 2022.05.02
[JSP] JSP 기초 - 스크립팅원소, 지시어, 주석  (0) 2022.05.02
[Servlet/JSP] Servlet과 JSP 기본 정의  (0) 2022.05.02
[Servlet] POST 방식 요청  (0) 2022.05.01
기본환경구축  (0) 2022.04.28
반응형

내가 원하는 요소 자유자재로 가져오기(선택자 활용)

document.querySelector("선택자"); -> 선택된 요소 하나만 반환
document.querySelectorAll("선택자"); -> 선택된 요소 객체들을 배열에 담아서 반환
</script>

<h3>5) 내가 원하는 요소 자유자재로 가져오기(선택자 활용)</h3>

<div id="test1">테스트입니다.</div>
<div class="test">
    <h2>하이</h2>
    <h2>바이</h2>
</div>
<span>Hello</span>
<h2>Byebye</h2>

<button onclick="accessSelector();">클릭</button>
<script>
    function accessSelector(){
        var divEl = document.querySelector("#test1"); // div요소객체
        var h2El = document.querySelectorAll(".test>h2"); // [h2요소객체, h2요소객체]
        var spanEl = document.querySelector(".test+span"); // span 요소객체

        console.log(divEl);
        console.log(h2El);
        console.log(spanEl);
    }
</script>

 

반응형
반응형

클래스 속성 값으로 요소에 접근하기

배열형태로 반환

document.getElementseByClassName("class속성값");
<h3>4) 클래스명으로 접근하기</h3>
<div class="test"></div>
<p class="test"></p>
<ul class="test">
    <li></li>
    <li></li>
</ul>
<pre class="test test1"></pre>

<button onclick="accessClass();">클래스로 접근</button>

<script>
    function accessClass(){
        var arr = document.getElementsByClassName("test");
        console.log(arr);

        for(var i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }
    }
</script>

반응형
반응형

네임 속성값으로 요소에 접근하기

document.getElementsByName("name속성값");
<h3>3) name속성 값으로 접근하기</h3>
<form action="">
    <fieldset>
        <legend>취미</legend>
        <input type="checkbox" name="hobby" id="sing" value="sing">
        <label for="sing">노래부르기</label>

        <input type="checkbox" name="hobby" id="game" value="game">
        <label for="game">게임하기</label>

        <input type="checkbox" name="hobby" id="walk" value="walk">
        <label for="walk">산책하기</label>
    </fieldset>
</form>

<div class="area" id="area3"></div>
<button onclick="accessName()">이름으로 접근</button>

<script>
    function accessName(){
        var hobby=document.getElementsByName("hobby");

        console.log(hobby);
        var checkedoption="";

        for(var i=0; i<hobby.length; i++){
            if(hobby[i].checked){
                checkedoption+=hobby[i].value+"<br>";
            }
        }

        var div3 = document.getElementById("area3");
        div3.innerHTML=checkedoption;

        // 한줄로한다면
        // document.getElementById("area3").innerHTML=checkedoption;
    }
</script>

반응형
반응형

태그명으로 요소에 접근하기

document.getElementByTagName("태그명");
<h3>2) 태그명으로 접근하기</h3>
<ul>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
    <li>목록4</li>
    <li>목록5</li>
</ul>

<button onclick="accessTag()">태그로 접근</button>

<script>
    function accessTag(){
        // 태그는 중복이 가능하기 때문에 배열에 담겨서 반환된다 ( [] )
        var list = document.getElementsByTagName("li"); // [li요소객체, li요소객체, ...]

        console.log(list);
        console.log(list.length); // 배열의 크기

        list[0].innerHTML="안녕하세요";
        list[3].innerHTML="반갑습니다";

        for(var i=0; i<list.length; i++){
            list[i].innerHTML = "안녕하세요"+(i+1);
        }
    }
</script>

좌) 원본 화면 / 중) 태그로 접근 버튼 클릭 후 / 우) 콘솔창 

반응형

+ Recent posts