Ajax로 비동기방식 아이디 유효검사하기
(이런거 가능)
HTML파일내 <body>태그 안에 다음과 같은 태그들을 작성한다.
아이디를 받을 <input>과 이벤트를 줄 <button>, 실제로 텍스트를 띄워줄 <span>태그를 작성했다.
<input type="text" id="id">
<button onclick="idCheck()">click</button>
<span id="result"></span>
비동기통신을 위한 Ajax를 자바스크립트 안에 작성한 후
url에 실제 통신할 서블릿파일 경로를 넣는다. (같은 폴더에 존재해 상대경로로 이름만 넣어주었다)
IdCheck.html
<body>
<script type="text/javascript">
function idCheck(){
$.ajax({
url : "idCheckServlet",
success : function(data){
alert(data);
}
});
}
</script>
<input type="text" id="id">
<button onclick="idCheck()">click</button>
<span id="result"></span>
</body>
성공하면 url에 의해서 idCheckServlet.java로 페이지가 넘어갈 것이다.
이를 받아줄 idCheckServlet.java 서블릿을 실제로 만든다.
idCheckServlet.java
@WebServlet("/idCheckServlet")
public class idCheckServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
out.print("success");
}
}
idCheckServlet.java 서블릿페이지는 PrintWriter객체인 out의 .print() 메소드로 이 요청에 응답하며, 응답된 내용은 success Function 의 파라미터 data로 연결된다.
jQuery에서 선택자 역할을 하는 $()을 이용해 실제로 사용자가 입력한 ID값을 받아온다.
.val()는 Value값을 가져오는 메소드다.
var idStr = $("#id").val();
받아낸 id값을 아까 만든 서블릿에 쿼리스트링 방식으로 날려준다.
url : "idCheckServlet?id="+idStr,
그럼 서블릿에서는 request.getParameter("id")로 영역에 존재하는 이 쿼리스트링 "id" 값을 받아온 후,
데이터를 처리하고 결과를 다시 넘긴다. (원래는 DB접속으로 존재하는 아이디인지, 유효한 아이디인지 조회하겠지만 생략)
idCheckServlet.java
String id = request.getParameter("id");
PrintWriter out = response.getWriter();
if(id.equals("hse")) {
out.print("fail");
}else {
out.print("success");
}
"hse"이라는 아이디가 이미 존재한다고 가정하고, "hse"으로 가입하려고 하면 fail을 그 이외에는 success를 날려준다.
다시 서블릿으로부터 out.print()를 통해 data에 "fail" 혹은 "success"가 담겼으면 이걸로 <span>태그에서 표시해주면 된다.
$() 선택자로 <span>태그의 id인 #result를 선택한 뒤 .text()로 텍스트를 표시해준다.
IDCheck.html
<body>
<script type="text/javascript">
function idCheck(){
//jQuery에서 선택자역할
var idStr = $("#id").val();
$.ajax({
url : "idCheckServlet?id="+idStr,
success : function(data){
if(data == "success"){
$("#result").text("사용가능한 아이디입니다.");
}else if(data == "fail"){
$("#result").text("중복된 아이디입니다.");
}
}
});
}
</script>
<input type="text" id="id">
<button onclick="idCheck()">click</button>
<span id="result"></span>
</body>
결과:
포스팅에 사용한 전체코드 참조:
IDCheck.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script
</head>
<body>
<script type="text/javascript">
function idCheck(){
//jQuery에서 선택자역할
var idStr = $("#id").val();
$.ajax({
url : "idCheckServlet?id="+idStr,
success : function(data){
if(data == "success"){
$("#result").text("사용가능한 아이디입니다.");
}else if(data == "fail"){
$("#result").text("중복된 아이디입니다.");
}
}
});
}
</script>
<input type="text" id="id">
<button onclick="idCheck()">click</button>
<span id="result"></span>
</body>
</html>
idCheckServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/idCheckServlet")
public class idCheckServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
PrintWriter out = response.getWriter();
if(id.equals("hse")) {
out.print("fail");
}else {
out.print("success");
}
}
}
