[JSP/Servlet]서블릿을 이용한 요청 방식

Hello_Wendy·2022년 5월 10일
0

JSP/Servlet

목록 보기
1/3
post-thumbnail

클라이언트에서 서블릿으로 요청하는 방식

🐧 GET 방식

  • 단순하게 서버에 존재하는 간단한 페이지를 요청하거나 게시판 글 목록 페이지에서 해당 페이지에 대한 목록 출력을 요청할 때, 페이지 번호와 같이 간단한 파라미터를 전송하는 경우 사용되는 방식

▶ 사용방식 : <a href="list.jsp?pageNo=2">[2]</a>
  • GET 방식으로 요청이 전송되는 경우
    ① 브라우저 주소 표시줄에 주소를 직접 입력해서 요청하는 경우
    ② HTML의 a태그를 사용해서 링크를 걸어서 전송하는 경우
    <a href = "list.jsp">목록보기</a>
    ③HTML 폼 태그에서 method 속성을 GET으로 지정하는 경우
    <form action = "name= " method="GET">

🐤 POST 방식

  • 단순하게 특정한 페이지를 요청하는 것이 아니라 특정 페이지로 많은 양의 파라미터를 전송하여 파라미터에 관한 처리를 할 때 POST 방식으로 요청을 전송.

  • 회원가입 요청, 게시판 글쓰기 요청, 자료실 업로드 등을 처리할 때 사용하는 방식.

  • POST 방식으로 요청을 서버로 전송하려면 반드시 HTML의 form 태그를 사용하여 method속성을 POST로 지정해야 함

▶ 사용방식 : <form name = "action = " method = "POST">

서블릿을 이용한 클라이언트에서 전송되는 요청 처리

🥞 1. 웹 프로젝트 생성하기

① File → [New] → [Dynamic Web Project] 클릭

② Project name 항목에 "Chapter3" 입력 후 Next> 버튼 클릭

③ 다음 화면에서 변경 없이 Next> 버튼 클릭

④ 'Generate web.xml deployment descriptor'체크 후 Finish 버튼 클릭
(체크박스 선택하면 이클립스에서 web.xml 파일이 프로젝트에 자동 생성됨)

⑤ 아래 화면처럼 웹 프로젝트 생성

🧀 2. Form 태그를 사용한 GET 방식의 요청 처리

  • GET 방식으로 요청이 전송되어 올 경우는 최종적으로 doGet(HttpServletRequestrequest,HttpServletResponse response)메소드가 호출되기 때문에 해당 메소드에서 요청을 처리해줌

  • 서블릿에서 제공되는 메스드 중 HttpServletRequest 인터페이스에서 제공되는 String getParameter(String name)메소드가 존재하는데 이 메소드는 name이라는 이름으로 전송되어 온 파라미터 값을 반환해주는 메소드임

① Chapter3 웹 프로젝트의 Webapp 디렉토리에서 마우스 우측 버튼을 클릭하여 [New] → [HTML File] 클릭

② File name 입력 창에 생성할 HTML 파일이름 입력 후(확장자 생략하여 작성), Next> 버튼 클릭하여 생성할 HTML 파일의 버전을 'Html5'로 선택하고 'Finish'버튼 클릭

▶ 클라이언트 페이지 코딩

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style> /*HTML 본문 스타일 정의 부분*/
#loginFormArea {  /*<section>태그 영역의 스타일 지정 부분*/
	text-align: center; /*<section>태그 영역 안에 포함되는 내용들이
  <section>태그 영역 내에서 좌우 가운데 정렬 설정*/
	width: 250px; /*<section> 태그 영역의 폭 설정*/
	margin: auto; /*<section> 태그 영역을 전체 화면의 가운데 정렬 설정*/
	border: 1px solid red /*<section>영역 테두리 설정*/
}

h1 { /*<h1>태그 내용들 좌우 가운데 정렬 설정*/
	text-align: center;
}
</style>
</head>
<body>
	<h1>로그인</h1>   <!-- id값이 loginFormArea를 가지는 <section>태그 영역을 정의한 부분, 
태그에 지정된 id값은 <style>태그 영역에서 해당 아이디를 가지고 있는 
영역의 스타일을 정의하는 용도로 사용 -->
	<section id="loginFormArea"> <!-- 서버로 요청을 보내는 역할을 하는 태그인
<form>태그 영역을 정의한 부분,
action 속성값을 "login"으로 지정하여 "login" URL로 요청을 전송하며,
method속성값을 "get"으로 지정하여 get방식으로 요청을 지정 -->
		<form action="login" method="get"> <!-- <label>태그에 id 속성 값을
"id"로 지정하여 HTML 실행 화면에서 "아이디"레이블을 마우스로 클릭하면 
아이디를 입력하는 입력상자로 커서가 이동하게 연결, <laber>부분과 <input>영역은
id 속상 값으로 연결-->
			<label id="id">아이디 : </label> <input type="text" name="id" id="id" /><br>
			<label id="passwd">비밀번호 : </label> <input type="password"
				name="passwd" id="passwd"><br>
			<br> <input type="submit" value="로그인" /> <!-- submit버튼을 정의하여
													로그인 요청을 할 수 있게 처리 -->
		</form>
	</section>
</body>
</html>

▶ 서블릿 생성하기

① [New] → [Servlet] 클릭 후 생성되는 화면에 <class name> 입력 후 Next> 버튼 클릭
(실질적으로 생성되는 자바 파일명을 지정하는 부분으로 web.xml 설정에서 <servlet-class> 항목에 설정되는 값)

② 다음화면에서 <URL mappings> 항목을 선택하고 <Edit> 버튼 클릭(이 부분은 web.xml 설정 파일에서 <url-pattern> 항목의 내용으로 설정되는 부분). 클라이언트 폼 태그의 요청 경로가 login (<form action="login">)으로 설정되어 있으므로 URL mappings 값을 </login>으로 수정함(이 부분은 web.xml 설정 파일에서 <url-pattern>항목의 내용으로 추가되는 부분)
마지막으로 GET 요청 방식이면, 기본적으로 체크되어진 doPOST의 체크를 해제 후 doGET메소드만 체크 후 <Finish> 버튼 클릭

▶ 서블릿 페이지 코딩

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 LoginServlet
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public LoginServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String id = request.getParameter("id"); 
        //클라이언트에서 전송되어 오는 id라는 이름의 파라미터 값과
		String passwd = request.getParameter("passwd"); 
        //passwd의 파라미터 값을 받는 부분
		response.setContentType("text/html;charset=euc-kr"); 
        //응답하는 데이터 타입이 html 타입이고, 
		//charset=euc-kr로 지정하면서 응답되는 데이터들의 한글 처리를 한 부분
		//서블릿에서 응답하는 데이터 타입은 XML 데이터 일수도 있고 JSON데이터일 수도 있다
		//setContetntType으로 지정해 주는 마임 타입에 따라서 응답하는 데이터의 타입이 결정됨
		PrintWriter out = response.getWriter(); 
        //문자열 단위로 response 객체에 내용을 출력할 수 있는 출력 스트림을 생성한 부분
		out.println("아이디=" + id + "<br>"); //응답에 id변수 값과
		out.println("비밀번호=" + passwd + "<br>"); // passwd 변수값을 출력하는 부분
	}
}

▶ 결과 확인

🍧 3. a 태그를 사용한 GET 방식의 요청 처리

  • HTML의 <a>태그에 의해서 링크가 걸린 부분을 클릭해서 서버로 요청할 경우도 GET 방식으로 요청이 전송됨

▶ 클라이언트 페이지 코딩

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>2페이지 목록 요청하기</h1>
	<a href="boardList?page=2">2page</a> 
<!--<a>태그를 사용하여 GET 방식으로
boardList 서블릿에 요청하는 부분. GET 방식으로 요청시 파라미터 값은 요청 URL뒤에
"?" 문자를 붙이고 "파라미터이름=파라미터값" 형태로 전송함
전송해야할 파라미터 값이 여러개일 경우 "&" 문자로 연결.
"파라미터이름1=파라미터값1&파라미터이름2=파라미터값2" 형태로 파라미터 값 여러개 전송가능
-->
</body>
</html>

▶ 서블릿 페이지 코딩

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 BoardListServlet
 */
@WebServlet("/boardList") //서블릿이 "boardList" URL로 전송되어 오는 요청을 
//처리하도록 설정하는 부분
public class BoardListServlet extends HttpServlet { //상속받는 클래스
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public BoardListServlet() {
		super(); //상속받은 것 처리
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)//메소드 실행
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String page = request.getParameter("page");
        //클라이언트에서 전송된 page라는 이름의 파라미터 값을 받는 부분
		response.setContentType("text/html;charset=euc-kr");
        //서블릿에서 응답할 데이터의 타입을 HTML문서 타입으로 설정하는 부분
		PrintWriter out = response.getWriter();
        //클라이언트에게 보내줄 응답을 출력하는데 사용할 출력 스트림을 생성하는 부분
		out.println(page + "페이지 게시판 목록 출력");
        //page 변수의 값을 응답에 출력하는 부분
	}
}

▶ 결과 확인하기

  • 링크를 사용한 GET 방식으로 요청을 하기 위해서 boardList.html 파일 실행

🍰 4. 주소 표시줄에 URL을 직접 입력하여 요청하는 GET 방식의 요청 방식

  • 주소 표시줄에 직접 URL을 입력하여 요청해도 GET방식으로 요청이 전송됨
  • 'doGet' 메소드를 구현하는 서블릿을 작성한 후 서블릿을 실행하고 파라미터값을 주소 표시줄에 직접 입력하여 파라미터 값을 전송함

▶ 서블릿 페이지 코딩

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 DirectURLServlet
 */
@WebServlet("/directURL")
public class DirectURLServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DirectURLServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 클라이언트에서 전송된 name과 age라는 이름을 가지고 있는 파라미터 값을 받아서
        //응답에 출력하는 부분
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		response.setContentType("text/html;charset=euc-kr");
		PrintWriter out = response.getWriter();
		out.println("이름 : " + name + "<br>");
		out.println("나이 : " + age + "<br>");
	}
}

▶ 결과 확인하기

  • directURL 서블릿을 실했하면 처음에는 파라미터 값이 전송되지 않기 때문에 name값과 age값이 null로 출력
  • URL뒤에 파라미터 값을 "?name=aaa&age=23" 추가한 후 다시 요청하면(Enter 누르기) name과 age 파라미터 값이 GET 방식으로 서블릿에 전송됨

🍬 5. POST방식으로 요청이 전송되어 올 경우

  • POST 방식으로 요청을 처리할 경우도 GET 방식으로 요청을 처리하는 경우와 유사하며, 서블릿 요청 처리를 수행할 때 doPost 메소드 사용

▶ 클라이언트 페이지 코딩

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>회원가입</h1>
	<form action="memReg" method="post"> 
      <!--form태그의 요청 메소드 방식으로 POST로 지정-->
		회원명 : <input type="text" name="name"><br> 
      	주소 : <input	type="text" name="addr"><br> 
      	전화번호 : <input type= "text" name="tel"><br> 
		취미 : <input type="text"	name="hobby"><br> 
		<input type="submit" value="회원가입" />
	</form>
</body>
</html>

▶ 서블릿 페이지 코딩

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 MemRegServlet
 */
@WebServlet("/memReg")
public class MemRegServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public MemRegServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
     //클라이언트에서 요청이 'POST'방식으로 전송되어오므로 'doPost' 메소드 구현
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=euc-kr");
		PrintWriter out = response.getWriter();
		String name = request.getParameter("name");
		String addr = request.getParameter("addr");
		String tel = request.getParameter("tel");
		String hobby = request.getParameter("hobby");

		out.println("이름 = " + name + "<br>");
		out.println("주소 = " + addr + "<br>");
		out.println("전화번호 = " + tel + "<br>");
		out.println("취미 = " + hobby + "<br>");
	}
}

▶ 결과확인

서블릿에서 한글 처리하기

  • 한글처리가 제대로 되기 위해서는 클라이언트 즉, 브라우저에서 문자를 처리하는 방식과 서버에서 문자를 처리하는 방식이 같아야 함

  • 즉, 브라우저에서는 문자를 euc-kr방식으로 처리하는데 서버에서는 ISO-8859-1 방식으로 처리하게 되면 한글이 깨지게 됨

  • 기본적으로 톰캣 서버에서 사용하는 캐릭터셋은 UTF-8 방식이므로 캐릭터셋을 변경해주어야 함

🍹 GET 방식으로 요청이 전송되어 올 경우

  • 링크가 걸려서 요청 처리가 되는 경우 form 태그의 method 속성이 GET 방식인 경우는 페이지에서 사용하고 있는 캐릭터셋으로 인코딩 되어 파라미터가 전송됨

  • 주소 표시줄에 파라미터를 직접 입력해서 전송하는 경우는 해당 블라우저에서 사용하고 있는 캐릭터셋을 이용해서 인코딩을 처리함

  • 톰캣의 URL 인코딩 방식이 UTF-8 방식이므로 GET 방식으로 요청 시 클라이언트 페이지 인코딩 방식도 UTF-8 방식으로 변경해야 함

  • 이클립스를 이용해서 html 페이지나 jsp 페이지를 생성할 때 이클립스에 지정된 기본 인코딩 방식이 euc-kr 방식이므로, UTF-8 인코딩 방식으로 변경하는 것이 편리


▶ 인코딩 방식 변경

  • 이클립스의 [window] → [Preferences] → Preferences 대화상자에서 [Web] → [CSS Files] → Encoding : ISO 10646/Unicode(UTF-8)로 선택 → <Apple>버튼 클릭

  • HTML Files, JSP Files 메뉴도 각각 동일하게 작업

▶ 한글 처리용 클라이언트 페이지 작성

<!DOCTYPE html>
<html>
<head>
<!--서버로 전송되는 한글파라미터 값을 제대로 처리하기 위해 페이지지 인코딩 방식 지정한 부분-->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--GET방식으로 파라미터 값 전송을 테스트하기 위해 form 태그의 method 속성값을 get으로 설정-->  
	<form action="hangul" method="get">
		한글이름: <input type="text" name="name" /><br> 
		<input type="submit" value="확인" />
	</form>
</body>
</html>

▶ 한글 처리용 서블릿 페이지 작성


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 HangulServlet
 */
@WebServlet("/hangul") //'hangul' URL요청 처리하도록 설정하는 부분
public class HangulServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public HangulServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
     /*클라이언트에서 GET 방식으로 전송되어 오는 요청을 처리하기 위해 doGET 메소드 재정의*/
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name = request.getParameter("name");
        /*클라이언트로 응답되는 데이터의 타입을 Html 타입으로 지정하는 부분*/
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.println("hangul Process = " + name);
	}

}

▶ 결과 확인

🍸 POST 방식으로 요청이 전송되어 올 경우

▶ 한글 처리용 클라이언트 페이지 작성

  • form 태그의 method 속성을 POST로 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="hangul2" method="post">
		한글이름: <input type="text" name="name" /><br> 
		<input type="submit" value="확인" />
	</form>
</body>
</html>
  • 클라이언트의 요청이 POST 방식으로 전송되어 오기 때문에 doGet메소드에 정의되어 있는 코드들을 doPost 메소드로 그대로 복사함
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 HangulServlet
 */
@WebServlet("/hangul")
public class HangulServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public HangulServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name = request.getParameter("name");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.println("hangul Process = " + name);
	}
}
  • 클라이언트에서 POST 방식으로 전송되어온 한글 파라미터 값을 제대로 처리하려면 request 객체의 setCharacterEncoding 메소드를 사용하여 request 객체의 body 영역의 인코딩 방식을 변경해야함

  • doPost 메소드 부분을 다음과 같이 수정하고 POST 방식으로 다시 한글 파라미터ㅓ 값을 서블릿으로 전송하면 한글이 제대로 처리됨

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.println("hangul Process = " + name);
	}

하나의 파라미터 이름으로 여러 개의 파라미터 값이 전송되어 올 경우 처리하기

  • HttpServletRequest 인터페이스에서 제공되는 String[ ] getParameterValues(String paramName)메소드 사용해서 처리

▶ 클라이언트 페이지

같은 이름으로 여러개의 파라미터 값을 전송하기 위해서 체크박스 사용. 
체크박스 name속성 값은 공통적으로 dog로 지정.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>당신이 좋아하는 강아지를 선택하세요</h1>
	<form action="choiceDog" method="post">
		 <input type="checkbox" name="dog" value=siba.jpg "/>푸들
		 <input type="checkbox" name="dog" value=hi.jpg "/>진돗개
		 <input type="checkbox" name="dog" value=jindo.jpg "/>풍산개
		 <input type="checkbox" name="dog" value=sigor.jpg "/>삽살개 
		 <input type="submit" value="선택" />
	</form>
</body>
</html>

▶ 서블릿 페이지

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 ChoiceDogServlet
 */
@WebServlet("/choiceDog")
public class ChoiceDogServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChoiceDogServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=euc-kr");
		PrintWriter out = response.getWriter();
		String[] dog = request.getParameterValues("dog");
		out.println("<html>");
		out.println("<head>");
		out.println("</head>");
		out.println("<body bgcolor = 'black'>");
		out.println("<table align = 'center' bgcolor = 'yellow'>");
		out.print("<tr>");
		for(int i = 0; i < dog.length; i++) {
			out.println("<td>");
			out.println("<img src = ' "+dog[i]+"' width = '200px' height='200px'/>"); //이미지 사이즈 조절
			out.println("</td>");
		}
		out.println("</tr>");
		out.println("</table>");
		out.println("</body>");
		out.println("</html>");
	}
}

▶ 결과 확인

profile
안녕 나의 새로운 세상

0개의 댓글