#1 JSP Project 05(Blog) - Ajax(회원가입 계속)

210628~29 유투버 '데어프로그래밍'님 강의 참조

 

 

Ajax란?

• JS의 라이브러리중 하나, XMLHttpRequest객체를 이용해서 전체페이지를 새로고침없이도 페이지 일부만을 위한 데이터 로드 기업
• 비동기 통신중 하나이며 클라이언트와 서버간에 JS  XML을 주고 받는 기술
• 웹 HTML기반은 항상 'stateless' 상태이기 때문에 resquest/response 이후에는 항상 연결이 끊기는데 이때 페이지의 일부분만 갱신을 하고싶은데 페이지 전체를 다시 로드해야하면 많은 자원과 시간이 낭비된다. 이를 보완한게 'Ajax'
• 최근에는 비동기 요청시에는 XML보다 JSON/TEXT 두개를 많이 쓴다
• Ajax는 동기적/비동기적 둘다 가능하다

 

Ajax를 이용하여 아이디 중복검사 만들기

-joinForm.jsp에 조건 추가 및 버튼 만들기

- " 에 함수 추가

- 반드시 ischecking() 통해서 중복이면 가입이 안되도록 true/false 를 잘 써야한다. 

<script>
	var isChecking = false;
	function valid(){
		if(isChecking == false){
			alert("Check your username");
		}
		return isChecking;
	}
	function usernameCheck(){
		// DB에서 확인해서 정상이면 isChecking = true
		var username = $("#username").val();
		$.ajax({
			type: "POST",
			url: "/blog/user?cmd=usernameCheck",
			data: username,
			contentType: "text/plain; charset=utf-8",
			dataType: "text"  // 응답 받을 데이터의 타입을 적으면 자바스크립트 오브젝트로 파싱해줌.
		}).done(function(data){
			if(data === 'ok'){ // 유저네임 있다는 것
				isChecking = false;
				alert('Duplicated')
			}else{
				isChecking = true;
				$("#username").attr("readonly", "readonly");
				alert('Not duplicated')
			}
		});
	}

-UserController에 usernameCheck() 함수 생성

@WebServlet("/user")
public class UserController extends HttpServlet {
....
      } else if (cmd.equals("usernameCheck")) {
                  BufferedReader br = request.getReader(); // text는 버퍼로!
                  String username = br.readLine();
                  System.out.println(username);
                  int result = userSerivce.유저네임중복체크(username);
                  PrintWriter out = response.getWriter();
                  if(result==1) {
                      out.print("ok");
                  } else {
                      out.print("fail");
                  }
                  out.flush();
              }
          }
      }

-UserService 에 유저네임중복체크() 수정

public class UserService {
...
	public int 유저네임중복체크(String username) {
		int result=userDao.findByUsername(username);
		return result;
	}
}

-UserDao에 findByUsername() 함수 추가

(DBconn에 rs.close() 함수 추가)

public class UserDao {
	public int findByUsername(String username) { //회원가입
		//Admin은 DB에서 따로 변경하면 쉽다. 
		//1) 쿼리문 준비
		String sql = "SELECT * FROM user WHERE username = ?";
		PreparedStatement pstmt = null;
		//2) DB커넥션 연결
		Connection conn = DBConn.getConnection();
		ResultSet rs = null;
		try {
			//3)
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1,username);
			rs = pstmt.executeQuery();
			if(rs.next()) {
				return 1;
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally { //try-catch 상관없이 무조건 실행.
			//코드가 길어지니 DBconn에서 함수로 따로 관리
			DBConn.close(conn, pstmt, rs);
		}
		return -1;
	}
    
    .....

**ischecking()을 통해서 중복이면 무조건 가입이 안되도록 막는다