Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(7) - ajax를 이용한 아이디 중복검사 하기
이전 게시글은 여기.
https://itstudy-mary.tistory.com/125?category=919831
먼저 ajax를 이용하기 전에 이제부터 jsp를 jstl을 이용하고자 한다.
(그런데 진짜 jsp는 데이터 가져오는 용도로만 쓰고 데이터는 서블릿에서 해결하자...!)
jstl에 대한 정보는 여기있다 <<
https://itstudy-mary.tistory.com/128?category=919831
4. JSTL
앞서 EL을 위해 설치한 라이브러리가 있는데, 이 라이브러리가 JSTL을 제공한다. https://itstudy-mary.tistory.com/127 3. EL EL(Expression Language)는 JSP 스크립트 태그를 좀 더 편하게 해주는 언어이다. 이..
itstudy-mary.tistory.com
그래서 nav.jsp의 값을 바꿔두었다.
-nav.jsp (jstl을 적용한 코드)
<%@page import="com.cos.blog.model.Users"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
Users principal = (Users) session.getAttribute("principal");
%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mary Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="index.jsp">Mary Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<c:choose>
<c:when test="${empty sessionScope.principal }">
<li class="nav-item"><a class="nav-link" href="/blog/user?cmd=login">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user?cmd=join">회원가입</a>
</c:when>
<c:otherwise>
<li class="nav-item"><a class="nav-link" href="/blog/board?cmd=write">글쓰기</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user?cmd=update">회원정보</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user?cmd=logout">로그아웃</a></li>
</c:otherwise>
</c:choose>
</ul>
</div>
</nav>
<br>
이제 진짜 ajax를 이용해 데이터베이스와 통신하고, 최종적으로 데이터베이스에 동일한 아이디가 있는지 확인하고자 한다.
ajax는 XMLHttpRequest를 이용해서 Http 일부만 로드하고, 전체는 로드하지 않는 통신 방식이다. 이런 방식은 전체 페이지만 로드하고 일부만 로드하기 때문에 이들의 로드 시간이 다른 비동기 통신 방식이다.
이 통신에서는 중복확인 버튼에 ajax를 적용해 회원가입 페이지에서 미리 작성해놓은 값은 새로고침 되지 않도록 하기 위함이다.
먼저 코드 예시를 보자.
- join.jsp의 ajax 스크립트 코드
<script>
var isCheckedUsername=false;
function validate(){
if(!isCheckedUsername){
alert("username 중복체크를 해주세요.");
}
return isCheckedUsername;
}
function usernamecheck(){
//성공(ajax)
var tfUsername=$('#username').val();
console.log(tfUsername);
$.ajax({
type: 'get',
url: '/blog/user?cmd=usernameCheck&username='+tfUsername
}).done(function(result){
console.log(result);
if(result==1){
alert("아이디가 중복되었습니다.");
}else if(result==0){
alert("사용하실 수 있는 아이디입니다.");
isCheckedUsername=true;
}else{
console.log('develop : 서버 오류');
}
}).fail(function(error){
console.log(error);
});
}
</script>
이 코드를 짤 때 주의할 점이 있다.
ajax().done().fail() 코드 내의 통신은 동기형으로, ajax 다운로드가 끝나면 서버 연결 성공 시의 로직/ 실패 시의 로직으로 나눈다. 그러나 이 코드 밑의 통신은 비동기형 통신이기 때문에 ajax 내 uri가 많은 데이터를 담고 있다면 그만큼의 다운로드 시간이 걸리고, 비동기 통신이라 ajax가 동작하기 전에 아래에 코드가 실행되어버리기 때문에 로그인, 특히 ajax와 관련된 로직은 괄호 밖으로 빼지 않도록 한다.
이제 url에 걸어둔 액션을 만든다.
- UsersController.java
public Action router(String cmd) {
if(cmd.equals("join")) {
return new UsersJoinAction();
}else if(cmd.equals("joinProc")) {
//회원가입 진행 후 -> index.jsp 이동
return new UsersJoinProcAction();
}else if(cmd.equals("update")) {
//회원 수정 페이지 이동(세션에 user object를 가지고 있을 예정)
}else if(cmd.equals("updateProc")) {
//회원 수정 진행 -> index 이동
}else if(cmd.equals("delete")) {
//회원 삭제 진행 후 -> 로그아웃 -> index.jsp
}else if(cmd.equals("login")) {
//회원 로그인 페이지로 이동
return new UsersLoginAction();
}else if(cmd.equals("loginProc")) {
return new UsersLoginProcAction();
//로그인 수행 -> 세션 등록 -> index.jsp
}else if(cmd.equals("logout")) {
return new UsersLogoutAction();
//로그아웃 수행 -> index.jsp
}else if(cmd.equals("usernameCheck")) {
return new UsersUsernameCheckAction();
//아이디와 일치하는 이름이 있는지, 수행 -> index.jsp
}
return null;
}
이 액션을 수행할 자바 파일을 만들면,
package com.cos.blog.action.user;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.cos.blog.action.Action;
import com.cos.blog.repository.UsersRepository;
public class UsersUsernameCheckAction implements Action{
@Override
public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
UsersRepository usersRepository=UsersRepository.getInstance();
int result=usersRepository.findByUsername(username);
PrintWriter out=response.getWriter();
out.print(result);
}
}
이 액션 중에 데이터베이스에 접근을 해야 아이디가 중복인지 아닌지 비교할 수 있는 로직이 있다. 따라서 repository로 접근을 해 SQL문을 이용하여 아이디의 중복을 찾는다.
-UsersRepository.java 중 findByUsername부분
public int findByUsername(String username) {
final String SQL="select count(*) from users where username=?";
Users user=null;
try {
conn=DBConn.getConnection();
pstmt = conn.prepareStatement(SQL);
//물음표 완성하기
pstmt.setString(1, username);
rs=pstmt.executeQuery();
if(rs.next()) {
return rs.getInt(1); //0 아니면 1
}
} catch (Exception e) {
e.printStackTrace();
System.out.println(TAG+"findByUsername : "+e.getMessage());
}finally {
DBConn.close(conn, pstmt);
}
return -1;
}앞서 username 테이블에 unique 를 걸어서 같은 이름을 가지고 있으므로 1, 없으면 0 딱 이렇게 두개만 뜰 것이다.
1이면 같은 아이디가 있다는 뜻이므로 중복된 아이디, 0이면 아이디가 없다는 뜻이므로 중복되지 않은 아이디라는 뜻일 것이다. -1은 DB접근을 못할 때 반환될 것이다.
이를 통해 ajax 통신이 성공하면 done 내의 함수가 실행되고, 받은 값에 의해 if문 내의 로직이 실행되는 구조이다.