인프런 나프_2탄 10일차 : MVC07_01~02 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>