본문 바로가기
Sever

2. JSP? + AJAX?

Davin1221 2023. 3. 28. 01:11

JSP(Java Server Page) 

Java 코드가 들어가 있는 HTML 코드로, Java의 웹 서버 프로그램 (서블릿)으로 변환되어 서비스 됨. 

 

 

Servlet과 JSP의 차이점? 

Servlet

 - 웹 서비스 기능을 해주는 자바의 클래스를 말하는 것으로, Java 소스코드 속에 HTML 코드가 들어가는 형태 

   -> HTML 문서 작성 시 복잡하고 번거로움 

 

JSP

 - 복잡한 Servlet을 좀 더 간단히 사용 가능하며, HTML 소스코드 속에 Java의 소스코드(<%%>, <%=%>)가 들어간 형태 

   -> HTML 코드와 Java 코드를 혼합하여 동적인 웹 페이지를 생성

   -> 컴파일을 통해 클래스  파일로 변환되어 웹 서버(WAS)에서 실행 

 

 

Servlet/JSP 동작 순서 

1. 웹 서버가 사용자로부터 서블릿에 대한 요청을 받으면 서블릿 컨테이너에 그 요청을 넘김 

2. 요청을 받은 컨테이너는 HTTPRequest와 HTTPResponse 객체를 만들어 doPost(), doGet() 메소드 중 하나 호출 

3. 클라이언트가 요청에 대한 응답 페이지를 보여줄 때, 기존 Servlet에서 출력 객체를 이용하여 HTML 문서를 작성하는 부분을 JSP로 분리 

4. JSP에서 넘겨진 프레젠테이션 로직을 수행한 후 컨테이너에게 Responese 전달 

5. 전달 받은 JSP 프레젠테이션 로직 수행 결과와 Servlet 결합되어 .class 파일 만들어짐 

 

장점

 - Servlet보다 쉽고 작성이 빠름 

 - 디자인 부분(html)과 로직 부분(java)으로 이루어져 있으며 분리를 시킬 수도 있음

 - 웹 애플리케이션 상에서 변수의 사용 가능한 범위(Scope)의 설정이 쉬움 

 

JSP로 응답하기 

  1) index.html

<!-- action: /프로젝트명/서비스 요청 주소 -->
<form action="/JSPProject1/login" method="post">
       ID: <input type="text" name="inputId">
       PW: <input type="password" name="inputPw">
       <button>로그인</button>
</form>

 

2) Servlet.java

package edu.kh.jsp.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;

@WebServlet("/login") 
// web.xml에 작성하던 <servlet>, <servlet-mapping> 태그 대체 어노테이션
public class LoginServlet extends HttpServlet {
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
		
		// post 방식 요청 데이터 문자 인코딩 처리 
		req.setCharacterEncoding("UTF-8");
		
		// 전달 받은 파라미터 얻어와 변수에 저장 
		String id = req.getParameter("inputId");
		String pw = req.getParameter("inputPw");
		
		System.out.println(id);
		System.out.println(pw);
		
		String result = null; 
		
		if(id.equals("user01") && pw.equals("pass01")) {
			result = "로그인 성공";
		} else {
			result = "아이디 혹은 비밀번호 불일치";
		}
	
		RequestDispatcher dispatcher 
        	= req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
		
		//req.setAttribute(String key, Object value) // 모든 타입 가능
		req.setAttribute("r", result);  // -> 업캐스팅 되어있는 상태 
		
		dispatcher.forward(req, resp);
		
	}

}

* JSP로 응답하기 

 1) Dispatcher: 발송자, 필요한 정보를 제공하는 자 

 2) RequestDispatcher: 요청(에 대한 응답화면을 만들어 클라이언트에게 출력하는 역할)을 위임하는 역할의 객차 

 3) req.getRequestDispatcher("JSP경로"); 

     - HttpServletRequest 객체가 생성될 때 내부에 요청을 위임하는 객체를 생성하는 방법을 포함하고 있음 

     - JSP 경로 작성: webapp폴더를 기준으로 작성 

 4) forward(보내다, 전달하다, 전송하다) 

     - 역할: 페이지 이동이 아닌, JSP에게 req, resp를 전달만 하는 것(JSP의 응답만을 대신하는 것 뿐임)

     → 페이지 이동을 하지 않으니 주소창의 요청 주소도 변하지 않음 

 

* 업캐스팅? 

더보기

Java에서 업캐스팅은 상위 클래스 타입으로 하위 클래스의 객체를 참조하는 것.

즉, 자식 클래스가 부모 클래스의 타입으로 변환되는 것입니다. 업캐스팅은 다형성을 구현하는데 사용된다.

 

위 코드에서 setAttribute() 메서드는 HttpServletRequest 인터페이스에 제공하며, Object 타입의 데이터를 전달할 수 있다. 

"r"이라는 key와 함께 String 타입인 result를 전달할 때, result는 Object타입으로 자동 형 변환이 되어 전달된다. 이를 업캐스팅이라 한다. 

따라서, req.setAttribute("r", result)에서 result 변수는 String 타입이나, Object타입으로 업캐스팅 되어 전달되고 있다. 이렇게 하면, Object 타입으로 업캐스팅하여 전달하면 다운캐스팅 없이도 HttpServletRequest 인터페이스에 제공하는 getAttribute()메서드를 사용하여 값을 꺼내 사용할 수 있어 편리하다. 

 

* 다형성(Polymorphism)

객체 지향 프로그래밍에서 하나의 코드가 여러 가지 형태의 객체에서 사용될 수 있는 능력.

즉, 동일한 코드를 여러 가지 객체에 적용할 수 있도록 하는 것. → 오버로딩, 오버라이딩

 

 3) .jsp

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
</head>
<body>

	<h1>로그인 결과</h1>
    
	<!-- JSP에서 자바코드의 값을 출력하는 방법 -->
	<%= request.getParameter("inputId") %>
	
	<br>
	
	<%= request.getParameter("inputPw") %>
	
	<br>
	
    <!-- 표현식 샘플 -->
	<%= 2 * 5 + 10 %>
	
	<%
		// JSP에서는 req, resp를 request, response 처럼 풀네임으로 작성해야 함 
		
		String res = (String)request.getAttribute("r"); // 다운캐스팅
	%>
	
	<!-- res변수에 저장된 값이 출력 -->
	<h3 style='color:green;'><%= res %></h3> 
	
	<button type='button' onclick='history.back()'>돌아가기</button>
    
</body>
</html>

<%-- JSP 주석 --> : HTML 요소 + JSP 전용 태그 

 

<%@  지시자 %> : 알려주거나 지시하는 속성 기입 

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

     → charset=UTF-8 : 현재 문서를 해석할 때 UTF-8 이용하여 해석(해석 방법 안내) 

     → pageEncoding="UTF-8 : 현재 문서가 UTF-8 인코딩으로 작성되어 있음 

 

<% 스크립틀릿(Scriptlet) %> : JSP에서 자바 코드 작성할 수 있는 영역

    → JSTL 라이브러리 이용하여 태그 형식 변경 
         ex: <c:if>JSTL</c:if>

<%= 표현식(Expression) %> : Java 코드의 값을 HTML 형식으로 출력(Java의 값을 화면에 보이게 함) 
 → EL(Expression Language,표현언어)로 변경 
       ex: ${EL}



AJAX(Asynchronous JavaScript and XML) 

- JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터를 주고받는 방식

  (데이터는 XML뿐만 아닌 Text, HTML, JSON, CSV 등 다양한 형식 사용 가능) 

- AJAX를 사용하면 브라우저에서 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있음

 ex) 검색어 입력 시 입력한 단어에 맞는 검색 결과를 보여주거나, 사용자가 동작을 수행할 때마다 서버에서 데이터를 가져와 실시간으로 업데이트 가능

 

 

* 동기와 비동기 

- 동기

   클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기 

 

- 비동기 

   클라이언트가 서버로 데이터를 요청 후, 응답을 기다리지 않고 다른 작업 수행 가능. 추후에 요청에 대한 응답이 오면 응답에 관련된 작업 진행

 

* 특징

 1. 전체 페이지를 갱신하지 않고 일부분만 업데이트 가능 

 2. 사용자에게 즉각적인 반응과 풍부한 UI 제공 가능

 3. 별도의 설치 없이 이용 가능 

 4. JavaScript, jQuery 방식으로 구현 가능 

저작자표시 (새창열림)

'Sever' 카테고리의 다른 글

6. 이메일 중복 검사 및 인증번호 이메일 보내기 기능 구현하기  (0) 2023.04.05
5. 로그인 기능 구현하기  (1) 2023.04.05
4. JDBC - 연결 생성부터 자원반환까지  (0) 2023.04.04
3. JDBC의 흐름 및 JDBC Tamplate  (0) 2023.04.04
1. Sevlet?  (0) 2023.03.27

'Sever' Related Articles

티스토리툴바