https://pabeba.tistory.com/167
Ajax
Ajax란? AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법입니다. 이름에 XML이라고 명시되어있긴 하지만 JSON이나 일반 텍스트 파일과 같은 다른
pabeba.tistory.com
이전 글을 읽고 오시면 이해가 더 잘 됩니다.
이번 시간에는 Ajax를 이용하여 회원가입시 아이디 중복 체크 하는 방법을 알아보겠습니다.
이런식으로 아이디 중복체크와 글자 수를 확인해주는 기능을 만들어 보겠습니다.
예제1. 글자 수 제한 (4~10 글자)
첫 번째는 아이디 4~10 글자의 아이디만 가능하게 기능을 넣습니다.
일단 jsp 파일을 이용해서 틀을 만들어봐요.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입폼</title>
</head>
<body>
<div>
<form method="post" action="RegisterMember.do" onsubmit="checkForm(event)">
<input type="text" id="memberId" name="id" placeholder="아이디"
required="required" onkeyup="checkId()">
<span id="checkResult"></span><br>
<input type="password" name="password" placeholder="패스워드" required="required"><br>
<input type="text" name="name" placeholder="이름" required="required"><br>
<input type="text" name="address" placeholder="주소" required="required"><br>
<button type="submit">회원가입</button>
</form>
<script type="text/javascript">
function checkId() {
let memberId=document.getElementById("memberId");
let checkResultSpan=document.getElementById("checkResult");
if(memberId.value.length<4||memberId.value.length>10){
checkResultSpan.innerHTML="<font color=pink>아이디는 4자 이상,10자 이하이어야 합니다</font>";
}else{
}
}
</script>
</div>
</body>
</html>
1. 아이디 input 박스에 onkeyup 속성을 넣어서 버튼을 눌렀다 땠을 때 함수가 실행할 수 있게 합니다.
2. checkId() 가 실행됩니다.
3. input 박스 안에 있는 value 값의 글자 수가 4~10자가 아니면 핑크색 글자로 아이디 input 박스 옆 span박스에 알림을 줍니다.
다음으로 아이디 값이 중복되는지 확인해야합니다.
데이터베이스에 연결하여 확인하시거나 mock 데이터를 이용해서 확인해보셔도 됩니다.
예제2. 아이디 중복 확인
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입폼</title>
</head>
<body>
<div>
<form method="post" action="RegisterMember.do" onsubmit="checkForm(event)">
<input type="text" id="memberId" name="id" placeholder="아이디"
required="required" onkeyup="checkId()">
<span id="checkResult"></span><br>
<input type="password" name="password" placeholder="패스워드" required="required"><br>
<input type="text" name="name" placeholder="이름" required="required"><br>
<input type="text" name="address" placeholder="주소" required="required"><br>
<button type="submit">회원가입</button>
</form>
<script type="text/javascript">
function checkId() {
let memberId=document.getElementById("memberId");
let checkResultSpan=document.getElementById("checkResult");
if(memberId.value.length<4||memberId.value.length>10){
checkResultSpan.innerHTML="<font color=pink>아이디는 4자 이상,10자 이하이어야 합니다</font>";
}else{
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
if(xhr.responseText=="ok"){
checkResultSpan.innerHTML="<font color=blue>사용가능</font>";
}else{
checkResultSpan.innerHTML="<font color=red>사용불가</font>";
}
}
}//callback
xhr.open("get", "CheckId.do?id="+memberId.value);
xhr.send();
}//else
}//checkId
</script>
</div>
</body>
</html>1. 이제 4~10 글자일 때 중복확인을 하는 문장을 알아보겠습니다.
2. 이전 글에서 나오듯이 XMLHttpRequest 객체를 생성해 응답이 들어오면 함수가 실행되게 onreadystatechange 를 통해 함수를 작성해 놓습니다.
3. 서버에서 보내주는 텍스트는 ok 와 fail 입니다.
4. ok이면 파란 글씨로 사용 가능하다고 알려주고, fail 이면 빨간 글씨로 사용불가 라고 알려줍니다.
public class CheckIdController implements Controller {
@Override
public String handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
String id=request.getParameter("id");
int checkResult=MemberDAO.getInstance().checkId(id);
String result=null;
if(checkResult==0) // 기존 id가 없으면 사용가능 ok
result="ok";
else
result="fail";//있으면 사용불가 fail
request.setAttribute("responsebody", result);
return "AjaxView";
}
}1. id 를 SELECT count(*) FROM member sql 문을 이용하여 0과 1로 결과를 확인합니다.
2. 없으면 ok , 있으면 fail 입니다.
3. 텍스트 값을 보내주기 위해 AjaxViewServlet으로 데이터를 보내줍니다.
(AjaxViewServlet은 응답을 객체(텍스트)로 보내주는 곳입니다.)
이런식으로 단어를 하나하나 치게 되면 계속해서 서버와의 통신을 통해 중복값을 확인해줍니다.
소감
조금씩 웹페이지 같은 기능들이 생겨나고 있습니다. 포기하지 않고 점직적으로 나아가다보면 멋진 웹페이지는 아니지만 사용할 수 있는 웹페이지는 만들 수 있지 않을까 싶습니다.
주말인데 모두 체력관리 잘 하면서 점진적으로 나아가 보아요.
'코딩 개발' 카테고리의 다른 글
| [Eclipse] Could not launch external web browser for 에러 (0) | 2023.09.17 |
|---|---|
| [Eclipse] The specified JRE installation does not exist 에러 (1) | 2023.09.17 |
| [네트워크] HTTP GET 요청과 POST 요청 (0) | 2023.05.16 |
| CSS 기본 문법 (0) | 2023.05.15 |
| HTML 기본 문법 - (head, body, h, a, img, ol, ul, table tags) (0) | 2023.05.15 |
