3. Ajax를 이용한 아이디 중복체크

지난시간에는 validator 을 이용한 회원가입 페이지를 만들어 보았습니다.

이번시간에는 Ajax를 이용한 중복체크 기능을 구현해 보도록 하겠습니다.

 

 

1) Ajax(Asynchronous JavaScript and XML)란 ? 

 

Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법중의 하나이다.Ajax는 웹 페이지를 전체를 다시 로딩하지 않고 웹 페이지의 일부분만을 갱신 할 수 있다.

 

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 할 수 있다.

 

이떄 서버와는 다음과 같은 다양한 형태의 데이터를 주고 받을 수 있다.

 

• JSON
• XML
• HTML
• txt file

 

 

2) Ajax(Asynchronous JavaScript and XML) 장점

 

Ajax를 이용하면 다음과 같은 장점이 있다.

 

1. 웹 페이지의 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신 할 수 있다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

---

1) pom.xml

 

json으로 데이터를 변환하기 위해서 필요한 라이브러리이다. 추가해주자

 

2) UserController("checkId")

 

1행 : @ResponeBody : 클라이언트(client) 와 서버(sever) 의 비동기 처리를 위해서 사용하는 어노테이션이다. json을 사용하기 위해 사용

2행 : @RequestMapping : viewName을 checkId로 설정한다.

 

3) UserService.java

 

4) UserSQLMapper.java

 

5) UserSQLMapper.xml

 

SELECT count(*) FROM novice_user WHERE user_id = #{user_id} : novice_user 테이블에 해당하는 user_id의 갯수를 불러온다

 

6) joinUserPage.js

 

4행 : $("#checkIdButton").clieck(function () { : checkIdButton 이라는 id 값을 클릭하면 아래와 같은 이벤트를 실행시킨다.

5행 : value 라는 변수 안에 joinIdInput 이라는 id값의 값을 변수에 저장한다

7행 ~ 13행 : value의 값이 공백이거나 널이거나 했을떄 alertId라는 아이디값을 가진 태그의 텍스트를 바꾼다.

15 ~ 37행 : ajax 호출 부분이다 

 

7) 최종확인

아이디의 값을 입력하지 않고 중복확인을 눌럿을때 아이디를 입력해주세요 라는 문구가 출력된다.

아이디의 값이 이미 존재 할 경우 이미 사용중인 아이디입니다. 라고 문구가 출력된다

아이디의 값이 존재하지 않으면 사용 가능한 아이디입니다. 라는 문구가 출력된다.

 

이로써 중복확인 기능이 마무리 되었다..

 

닉네임 / 핸든폰번호 / 이메일주소 중복체크는 위와 같은 방식으로 처리 하면 된다..

 

다음에는 로그인과 로그아웃 기능을 만들어 보자