[Ajax] 유효한 ID체크 , 자주 사용하는 Javascript 함수 만들기
by 무작정 개발2022.03.16(57일 차_수요일)
이번에는 ajax를 활용하여 유효한 ID 체크하기 및 자주 사용하는 소스를 따로 javascript 함수로 만들 것이다.
Ajax를 활용하여 유효한 ID 체크
일단 DB가 없으므로 DB 쿼리문을 썼다는 가정 하에 "suzi"를 입력해야 유효한 아이디라고 출력되도록 하였다.
"suzi"를 제외한 다른 텍스트를 입력하면 유효하지 않은 아이디라고 나오도록 하였다.
ajaxId.jsp -(요청 전송 페이지)
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var XMLHttpRequest;
XMLHttpRequest = new XMLHttpRequest();// 객체 생성
//하단 <input>태그에 onkeyup = requestGet();를 써서 손가락을 땔때마다 함수를 실행하도록 함
function requestGet() {
var f = document.myForm;
if(!f.userId) {
alert("아이디 입력!");
f.userId.focus();
return;
}
var params = "?userId=" + f.userId.value;
//요청을 초기화하면서 요청 방식, 주소, 동기화 여부 지정
XMLHttpRequest.open("GET","ajaxId_ok.jsp" + params, true);
XMLHttpRequest.onreadystatechange = viewMessage; //viewMessage를 콜백함수로 지정
XMLHttpRequest.send(null); //get방식이니 null
}
//콜백함수 : viewMessage
function viewMessage() {
if(XMLHttpRequest.readyState==4) {
if(XMLHttpRequest.status==200) {
//서버 응답 이상 없음
var str = XMLHttpRequest.responseText;
var divE = document.getElementById("resultDIV");
divE.innerHTML = str;
}
}else {
var divE = document.getElementById("resultDIV");
divE.innerHTML =
"<img src='./image/loading.gif' width='15' height='15'/>";
}
}
</script>
</head>
<body>
<h1>Ajax ID 확인</h1>
<hr/>
<form action="" name="myForm">
<!-- onkeyup="requestGet(); :손가락을 땔때마다 함수 실행 -->
아이디: <input type="text" name="userId" onkeyup="requestGet();"/>
</form>
<br/><br/><br/><br/>
<div id="resultDIV" style="color: red; border: 1px solid #000000; width: 40%"></div>
</body>
</html>이번 소스들은 이전 ajax관련 소스들과 크게 다른 점이 없이 겹치는 부분은 생략하였다.
<form> 태그 안에 <input type="text" name="userId" onkeyup="requestGet();"/>를 보자.
<input> 태그 안에 onkeyup = "requestGet(); 을 써서 손가락을 뗄 때마다 함수를 실행하도록 하였다.
그래서 입력할때 한 글자씩 입력할 때마다 유효하지 않은 아이디라고 출력되는 것이다.
ajaxId_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
//넘어오는 데이터
String userId = request.getParameter("userId");
String str = "";
if(!userId.equals("")) {
for(int i=0; i<5000; i++) {
System.out.print("delay");
}
//id를 읽어 왔으면
if(userId.startsWith("suzi")) {
str = userId + "는 유효한 아이디 입니다.";
}else {
str = userId + "는 유효한 아이디가 아닙니다.";
}
}
%>
<%=str %>이전 글처럼 for문을 사용하여 딜레이(로딩) 되도록 하였고, if문을 사용해서 userId가 "suzi"일 때
유요한 아이디 라고 출력되고 아닐 경우 유효한 아이디가 아니라고 출력되도록 하면서 userId와 같이 변수 str에
담아서 str를 ajaxId.jsp로 보낸다.
반복되는 소스를 함수로 만들기
ajax를 사용할때 반복해서 사용하는 소스가 있는데 이걸 함수(메서드)로 만들어 필요할 때마다 호출해서
쓸 수 있도록 js 함수를 만들 것이다.
httpRequest.js
// 객체를 생성해주지않고 리턴값을 반환
// XMLHttpRequest 객체생성
function getXMLHttpRequest() {
if(window.XMLHttpRequest){ //Non-Microsoft browser : 마이크로 소프트사의 브라우저가 아닌경우
return new XMLHttpRequest; // 이런식으로 객체 생성하는 방법
} else if(window.ActiveXObject) { // 마이크로 소프트사의 브라우저인 경우
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
//Ajax 요청, 처리 작업
var httpRequest = null;
// method는 get방식?post방식
function sendRequest(url,params,callback,method) {
httpRequest = getXMLHttpRequest(); // return값으로 받아서 객체 생성이 된다.
//method 처리
var httpMethod = method ? method : "GET"; // 3항연산자 method받았으면 그거쓰고 없으면 get방식
// 한번더 검증 (method가 있으면 그 내용을 담고,null일 경우 Get으로 세팅)
if(httpMethod!="GET"&&httpMethod!="POST"){
httpMethod = "GET";
}
//넘어가는 data값(params) 처리 / 없으면 null 있으면 params사용
var httpParams = (params==null || params=="") ? null : params;
//url 처리
var httpUrl = url; // _ok 주소 넣어줌
if(httpMethod=="GET" && httpParams!=null) {
httpUrl = httpUrl + "?" + httpParams; // get방식일때 ? 붙음
}
httpRequest.open(httpMethod,httpUrl,true); // get,어디로,비동기
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // post방식일때
httpRequest.onreadystatechange = callback;
httpRequest.send(httpMethod=="POST" ? httpParams : null); // post방식일때 httpParams , get방식이면 null
}함수(메서드) 명은 sendRequest이고 url / params / callback / method 총 4개의 매개변수가 있다.
각각의 매개변수들은 삼항 연산자를 사용하여 구분&처리하고 sendRequest 함수 안에 있는 첫 번째
if문을 보면 if문을 사용해서 get, post 방식이 아니면(null) 자동으로 get 방식이 되도록 하였다.
넘어가는 data값을 변수 httpParams에 담고, 매개변수 params에 따라 조금씩 달라진다.
변수 httpUrl에는 if문을 활용해서 get방식이면? 를 써서 httpParams의 값을 넘기도록 했다.
마지막에 있는 httpRequest.send부분에서는 post방식일 때는 httpParams를 get방식이면 null을 넘겨주도록
삼항 연산자를 사용했다.
이렇게 만들어놓으면 필요할 때마다 호출해서 js파일을 호출하고 sendRequest() 함수를 사용하면 된다.
반복 작업을 함수(메서드)화 해놓으면 재사용성 때문에 코딩할 때 매우 편해진다. (시 간 절 약)
js파일은 data폴더 안에 js폴더에 만들어놓았는데 자세한 파일 구조 및 소스는 하단 깃허브 링크 참고!
https://github.com/chaehyuenwoo/jQuery-Ajax/tree/main/data/js
GitHub - chaehyuenwoo/jQuery-Ajax: jQuery와 Ajax관련 소스
jQuery와 Ajax관련 소스. Contribute to chaehyuenwoo/jQuery-Ajax development by creating an account on GitHub.
github.com
'Front-End > jQuery(ajax)' 카테고리의 다른 글
| [Javascript] JSON을 활용해서 javascript 객체 생성하기 (2) | 2022.03.18 |
|---|---|
| [Javascript] DOM(Document Object Model) , XML 데이터 가져오기 (0) | 2022.03.17 |
| [Ajax] GET 방식, POST 방식으로 데이터 보내기 (0) | 2022.03.17 |
| [JQuery] 세팅 및 jQuery & Ajax를 이용한 텍스트 데이터 전송 (2) | 2022.03.15 |
| [Ajax] 란? - 동기/비동기, XMLHttpRequest (0) | 2022.03.15 |
블로그의 정보
무작정 개발
무작정 개발