반응형

# MVC07_03 Ajax (Asynchronous JavaScript and XML) 기술이란? (비동기 통신)

## 동기식, 비 동기식

1. 동기식 일처리 방식

  • 클라이언트가 서버에 요청, 요청에 대한 처리가 될 때 까지 대기. 서버는 해당 요청을 처리 후 응답.
  • 이 과정에서 응답이 처리될 때까지의 대기 시간 발생.
  • 응답 시간 예측 불가능. 대기 시간동안 다른 일 처리 불 가능.

2. 비 동기식 일처리 방식 (Ajax)

  • 클라이언트가 서버에 요청, 대기 시간 없이 다른 일 처리 진행. (요청에 대한 응답이 올 경우에 대비하여 콜백 함수가 존재.)
  • 클라이언트의 요청에 대한 응답이 올때까지 기다릴 필요가 없다.

## 실제 소스코드를 바탕 Ajax

반응형
반응형

# MVC07_01~02 Ajax 기능을 이용한 아이디 중복체크

## MVC07 프로젝트 계획

  • Ajax 적용
  • 파일 업로드 & 다운로드

## MVC07 프로젝트 생성

  • 기존에 작업한 MVC06 바탕으로 작업 진행

MVC06.war
2.67MB

  • MVC06 WAR file 다운로드 후 이클립스 실행 > Project Explorer 빈 공간 우 클릭 > Import > WAR file > 다운로드 받은 WAR file 찾고, Web project이름을 MVC07로 변경 후 Finish.

## Context 등록

  • Servers 탭 > 톰캣 우 클릭 > Add and Remove 클릭 후 Available에 있는 MVC07을 선택 후 Add 클릭하여 Configured로 이동 후 Finish.

## Ajax (Asynchronous Javascript And Xml)

  • Jquery에서 제공해주는 $.ajax() 를 이용, 클라이언트와 서버간의 통신 시 비동기 전송으로 데이터를 주고 받는 방법
  • 페이지 이동 없이 데이터 처리 가능

## 아이디 중복확인 기능 작업

  • 회원 가입 시 화면 이동 없이 중복확인 버튼을 클릭하여 중복여부 확인

1. memberRegister.jsp

  • 아이디 중복확인 버튼 추가.
  • 중복확인 버튼 클릭에 따른 스크립트 구현.
// 아이디 중복체크 버튼 클릭 시 실행
function doubleCheck() {
  if ( $("#id").val()=='' ) {
    alert("아이디를 입력하세요.");
    $("#id").focus();
    return;
  }

	var id = $("#id").val();

  $.ajax({
    url : "<c:url value='/memberDbcheck.do'/>", 	// 서버 경로(요청 url)
    type : "POST", 			// GET, POST
    data : {"id" : id}, 	// 서버 요청 시 넘기는 값
    success : dbCheck,		// callback 함수
    error : function() {	// 실패 시.
    	alert("error");
    }
  });
}

// 아이디 중복체크 ajax 성공 시 실행.
function dbCheck(data) {
  if ( data != "null" ) {
    alert("중복된 아이디 입니다.");
    $("#id").focus();
  } else {
    alert("사용 가능한 아이디 입니다.");
    $("#id").focus();
  }
}

2. HandlerMapping

package kr.bit.frontcontroller;

import java.util.HashMap;

import kr.bit.controller.Controller;
import kr.bit.controller.*;

public class HandlerMapping {
  private HashMap<String, Controller> mappings;
  public HandlerMapping() {
	  mappings=new HashMap<String, Controller>();
	  mappings.put("/memberList.do", new MemberListController());
	  mappings.put("/memberInsert.do", new MemberInsertController());
	  mappings.put("/memberRegister.do", new MemberRegisterController());
	  mappings.put("/memberContent.do", new MemberContentController());
	  mappings.put("/memberUpdate.do", new MemberUpdateController());
	  mappings.put("/memberDelete.do", new MemberDeleteController());
	  mappings.put("/memberLogin.do", new MemberLoginController());
	  mappings.put("/memberLogout.do", new MemberLogoutController());
	  mappings.put("/memberDbcheck.do", new MemberDbcheckController());
  }
  public Controller getController(String key) { // key=>/memberList.do
	  return mappings.get(key);
  }
}

3. MemberDbcheckController 생성

  • 프로젝트 > src > kr.bit.controller > class 클릭 후 MemberDbcheckController 이름으로 생성
package kr.bit.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;

public class MemberDbcheckController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		// $.ajax(); 에서 온 요청 처리.
		String id = request.getParameter("id");		// {"id" : id}	
		MemberDAO dao = new MemberDAO();	
		String dbDouble = dao.memberDbcheck(id);
		
		response.getWriter().print(dbDouble);
		
		return null;
	}

}

4. MemberDAO

  • 중복 확인 관련 메서드 추가.
// 아이디 중복 확인
	public String memberDbcheck(String id) {
		SqlSession session = sqlSessionFactory.openSession();
		String dbId = session.selectOne("memberDbcheck", id);
		
		String idDouble = "NO";
		
		if ( dbId != null ) {
			idDouble = "YES";
		}
		
		session.close();
		return idDouble;		// YES(중복), NO(중복아님)
	}

5. MemberMapper

<!-- 아이디 중복확인 -->
    <select id="memberDbcheck" parameterType="memberVO" resultType="String">
        SELECT id
        FROM member
        WHERE id = #{id}
    </select>

 

반응형
반응형

# MVC06_08 마무리_개선작업

## 상세보기 페이지 개선 작업

  • memberContent.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>    
<%
  // MemberVO vo=(MemberVO)request.getAttribute("vo");
%>    
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<script type="text/javascript">
	function update() {
		document.form1.action="<c:url value='/memberUpdate.do'/>";
		document.form1.submit();
	}
	
	function frmreset() {
		document.form1.reset();
	}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>

<div class="container">
	<h2>상세 화면</h2>
	<div class="panel panel-default">
		<div class="panel-heading">
			<c:if test="${sessionScope.userId != null && sessionScope != '' }">
				<label>${sessionScope.userName}님이 로그인 하셨습니다.</label>
			</c:if>
			<c:if test="${sessionScope.userId == null || sessionScope == '' }">
				<label>안녕하세요.</label>
			</c:if>	
		</div>
		<div class="panel-body">
		<form id="form1" name="form1" class="form-horizontal" method="post">
		<input type="hidden" name="num" value="${vo.num}"/>
			<div class="form-group">
				<label class="control-Label col-sm-2">번호 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.num}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">아이디 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.id}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">비밀번호 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.pass}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">이름 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.name}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">나이 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" name="age" value="${vo.age}" style="width:10%;"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">이메일 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="email" name="email" value="${vo.email}" style="width:30%;"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">전화번호 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="phone" name="phone" value="${vo.phone}" style="width:30%;"/>
				</div>
			</div>
		</form>
		</div>
		<div class="panel-footer" style="text-align: center;">
			<c:if test="${!empty sessionScope.userId}">
				<c:if test="${sessionScope.userId == vo.id}">
					<input type="button" value="수정하기" class='btn btn-primary' onclick="update()"/>
				</c:if>
				<c:if test="${sessionScope.userId != vo.id}">
					<input type="button" value="수정하기" class='btn btn-primary' onclick="update()" disabled="disabled"/>
				</c:if>
			</c:if>
			<input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/>
			<input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn'/>
		</div>
	</div>
</div>
</body>
</html>

## 회원가입 페이지 개선 작업

<div class="container">
	<h2>회원가입 화면</h2>
	<div class="panel panel-default">
	<div class="panel-heading">Panel Heading</div>
	<div class="panel-body">Panel Content</div>
	<div class="panel-footer">Panel Footer</div>
	</div>
</div>
  • 부트 스트랩 > BS Forms > Bootstrap Horizontal Form
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>      
<c:set var="ctx" value="${pageContext.request.contextPath}"/>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function add() {
			// form의 데이터 유효성 체크
			
			
			document.form1.action="<c:url value='/memberInsert.do'/>";
			document.form1.submit();
		}
		
		function frmreset() {
			document.form1.reset();
		}
	</script>
</head>
<body>
<div class="container">
	<h2>회원가입 화면</h2>
	<div class="panel panel-default">
	<div class="panel-heading">
		<c:if test="${sessionScope.userId != null && sessionScope != '' }">
			<label>${sessionScope.userName}님이 로그인 하셨습니다.</label>
		</c:if>
		<c:if test="${sessionScope.userId == null || sessionScope == '' }">
			<label>안녕하세요.</label>
		</c:if>	
	</div>
	<div class="panel-body">
	<form id="form1" name="form1" class="form-horizontal" method="post">
		<div class="form-group">
			<label class="control-label col-sm-2" for="id">아이디:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="pass">패스워드:</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="pass" name="pass" placeholder="비밀번호를 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="name">이름:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="name" name="name" placeholder="이름을 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="age">나이:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="age" name="age" placeholder="나이입력" style="width:12%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="email">이메일:</label>
			<div class="col-sm-10">
				<input type="email" class="form-control" id="email" name="email" placeholder="이메일을 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="phone">전화번호:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="phone" name="phone" placeholder="전화번호를 입력하세요." style="width:30%;">
			</div>
		</div>
	</form>
	</div>
	<div class="panel-footer" style="text-align: center;">
		
		<c:if test="${sessionScope.userId == null || sessionScope.userId == ''}">
			<input type="button" value="등록" class='btn btn-primary' onclick="add()"/>
		</c:if>
		<c:if test="${sessionScope.userId != null && sessionScope.userId != ''}">
			<input type="button" value="등록" class='btn btn-primary' onclick="add()" disabled="disabled"/>
		</c:if>
		<input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/>
		<input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn'/>
	</div>
</div>
</div>
</body>
</html>
반응형
반응형

# MVC06_08 회원 로그인 후 상세보기 페이지

## memberContent

<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>
  • 수정하기 버튼의 경우 로그인한 대상의 정보와 일치할 때만 버튼 활성화, 아닐 경우 버튼 비 활성화 처리.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>    
<%
  // MemberVO vo=(MemberVO)request.getAttribute("vo");
%>    
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<script type="text/javascript">
	function update() {
		document.form1.action="<c:url value='/memberUpdate.do'/>";
		document.form1.submit();
	}
	
	function frmreset() {
		document.form1.reset();
	}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>

<div class="container">
	<h3>회원관리 시스템</h3>
	<div class="panel panel-default">
		<div class="panel-heading">
			<c:if test="${sessionScope.userId != null && sessionScope != '' }">
				<h2>${sessionScope.userName}님 환영합니다.</h2>
			</c:if>
			<c:if test="${sessionScope.userId == null || sessionScope == '' }">
				<h2>안녕하세요.</h2>
			</c:if>	
		</div>
		<div class="panel-body">
		<form id="form1" name="form1" class="form-horizontal" method="post">
		<input type="hidden" name="num" value="${vo.num}"/>
			<div class="form-group">
				<label class="control-Label col-sm-2">번호 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.num}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">아이디 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.id}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">비밀번호 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.pass}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">이름 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.name}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">나이 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" name="age" value="${vo.age}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">이메일 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="email" name="email" value="${vo.email}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">전화번호 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="phone" name="phone" value="${vo.phone}"/>
				</div>
			</div>
		</form>
		</div>
		<div class="panel-footer" style="text-align: center;">
			<c:if test="${!empty sessionScope.userId}">
				<c:if test="${sessionScope.userId == vo.id}">
					<input type="button" value="수정하기" class='btn btn-primary' onclick="update()"/>
				</c:if>
				<c:if test="${sessionScope.userId != vo.id}">
					<input type="button" value="수정하기" class='btn btn-primary' onclick="update()" disabled="disabled"/>
				</c:if>
			</c:if>
			<input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/>
			<input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn'/>
		</div>
	</div>
</div>
</body>
</html>
반응형

+ Recent posts