❓ Ajax란?
AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
이런 식으로 이미 가입된 동일한 아이디가 있다면 alert창으로 중복된 아이디가 있다고 알려주고, 아니라면 사용 가능한 아이디가 있다는 alert창이 뜨게 Ajax를 이용했다.
🤷♀️ 코드와 설명
숫자 순서대로 읽기!
signup.jsp(아이디 입력 부분)
<label for="user_id" class="signup__label"> Userid </label>
<input id="user_id" name="user_id" class="signup__input" type="text"
autocomplete="off" value="아이디를 입력하세요" />
<button class="id_check_button" type="button" onclick="fn_ConfirmIdSend()">
아이디 중복검사</button>1 - signup.jsp에서 인풋박스에 아이디를 입력하고 아이디 중복검사 버튼을 누르면 signup.js 파일로 넘어가서 fn_ConfirmIdSend() function을 타게 된다.
signup.js (Ajax 부분)
let userid = $("#user_id");
function fn_ConfirmIdSend() {
if (!fn_idAuthentication()) {
return false;
}
let user_id = userid.val();
$.ajax({
type: 'post',
url: 'http://localhost:8081/sendId.sm',
data: { user_id: user_id },
success: function(data) {
let data1 = $.trim(data);
if (data1 == 'true') {
alert("사용 가능한 아이디입니다.");
} else {
alert("중복된 아이디입니다.");
}
},
error: function(xhr, status, error) {
//오류 발생 시 처리
}
});
}2 - signup.jsp에서 넘어온 user_id가 let userid = $("#user_id"); 부분에서 useid에 담긴다.
3 - userid는 다시 let user_id = userid.val(); 부분에서 user_id에 담긴다.
4 - data: { user_id: user_id } 에서 user_id라는 key값에 앞에서 받아온 user_id라는 value값이 담긴다.
5 - url: 'http://localhost:8081/sendId.sm' 를 타고 SpaceMusicFrontController.java로 간다.
9 - ajax로 넘어온 data는 $.trim(data)로 공백을 한번 제거해주고 data1에 담긴다.
10 - 그리고 if문으로 data1이 true라면 alert("사용 가능한 아이디입니다.")을 사용자에게 보여주고 false라면 alert("중복된 아이디입니다.")을 사용자에게 보여주게된다.
SpaceMusicFrontController.java(아이디 중복확인 부분)
// 아이디 중복확인 하는 경우
case "/sendId.sm":
IdCheckAction idcheckaction = new IdCheckAction();
boolean result = idcheckaction.execute(req, resp);
PrintWriter out = resp.getWriter(); // ajax에 값을 담기위해 사용함.
out.println(result); // result가 data에 담김
break;
6 - SpaceMusicFrontController.java에서 /sendId.sm 케이스를 만나 IdCheckAction.java로 간다.
8 - IdCheckAction.java를 다녀온 후 SpaceMusicFrontController.java에서는 IdCheckAction.java에서 넘어온 boolean값을 result라는 변수에 담고 PrintWriter, out.println(result);로 값을 ajax의 data에 넣어준다.
IdCheckAction.java
public class IdCheckAction extends HttpServlet { // 아이디 중복확인하는 action
public boolean execute(HttpServletRequest req, HttpServletResponse resp) {
UserDAO udao = new UserDAO();
String user_id = req.getParameter("user_id");
boolean flag = false;
if (udao.selectId(user_id) == null) {
// 로그인 가능
flag = true;
}
return flag;
} // execute()
} // IdCheckAction class7 - IdCheckAction.java에서는 user_id를 가지고 UserDAO로 가서 데이터베이스에서 select를 하는데 중복된 값이 있으면 값이 담겨있을 것이고 없으면 값이 null일 것이다. 그래서 if문을 이용해서 값이 있으면 false(회원가입 불가능), 없으면 true(회원가입 가능)를 return해준다.
UserDAO.java
//------------------<아이디 중복확인하는 메소드>-------------------------
public String selectId(String user_id) {
return sqlsession.selectOne("SpaceMusic.selectid", user_id);
}spaceMusic.xml
<!-- 아이디 중복확인 sql문 -->
<select id="selectid" parameterType="String" resultType="String">
SELECT
user_id
FROM USER_TBL
WHERE user_id = #{user_id}
</select>