prototype.js
자바스크립트 라이브러리로 jQuery가 나오기전에 많이 사용했던 라이브러리이다
( jQuery 함께 사용하면 충돌이 발생하므로 주의한다)
아이디 중복 체크 예제
prototype.js사용방법
prototype.js를 프로젝트의 WebContent에 복사한 후, 스크립트 소스파일을 추가해준다
<script language="JavaScript" src="prototype.js"> </script>
=> $()을 사용하기 위함.
document.getElementById("id값")
//동일
$("id값")
$()함수를 사용하기 위해 태그에 id를 부여하여 구분할 수 있도록 한다
(id 속성값은 중복될 수 없음)
| <td>아이디</td> <td> <input type="text" name="mem_id" id="mem_id" size="15"> <input type="button" value="ID중복확인" onClick="idCheck(this.form.mem_id.value"></td> <td id="id_check">아이디를 적어주세요</td> |
요청을 보내는 jsp파일에서 form 태그 내에서 입력받은 id값을
idCheck 자바스크립트 함수로 전달한다.
check.js ( Ajax 구현 )
var xhr;
function getXHR(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); //(a)
}
}
function idCheck(id){
if(id==""){
var mem_id=$("id_check") //(b)
$("id_check").innerHTML="<font color='red'>아이디는 필수사항입니다</font>"
$("mem_id").focus()
return false
}
getXHR();
var url ="IdCheck.jsp?"+getParams()
xhr.onreadystatechange=resultPro;
xhr.open("Get",url,true)
xhr.send(null)
}
function getParams(){
var mem_id = $("mem_id").value
return "mem_id="+mem_id+"×tamp="+new Date().getTime(); //(c)
}
function resultPro(){
if(xhr.readyState==4){
if(xhr.status==200){
var result=xhr.responseText;
alert(result); //(d)
$("id_check").innerHTML=result;
}
}
}
| *(a) 함수내부에 var로 선언된 변수는 지역변수로, var를 쓰지 않으면 전역변수로 인식된다. 그러므로 위에 선언한 xhrObject가 함수 내부에서 생성된것임을 알 수 있다. *(b) var mem_id= document.getElementById("id_check")와 동일하다. *(c) 자주오는 요청은 서버캐시에 저장된다. 서버캐시에 요청 문장을 저장하지 않는 방법으로는 매번 요청 url을 다르게 보내는 방법이 있다. *(d) result의 값은 IdCheck.jsp 자체이다. |
xhr객체를 send()로 요청하면 IdCheck.jsp로 파라미터값이 넘어간다.
IdCheck.jsp에서 아이디가 db에 존재하는지 여부를 확인한 후, 그에따라 다른 결과를 출력한다.
응답이 check.js로 도착하면 resultPro 콜백메소드가 실행된다.
xhr.responseText는 IdCheck.jsp이고, (alert를 통해 확인가능)
그 출력 결과는 처음 form태그 내에 있던 $("id_check").innerHTML에 출력된다.
IdCheck.jsp - xhtml을 지원하는 jsp
* xhtml을 지원하는 jsp 생성
<!--jsp파일-->
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="hewon.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%
//check.js => IdCheck.jsp?mem_id='xxx'×tamp='xxx'
response.setContentType("text/xml;charset=utf-8");
String result="";
String mem_id=request.getParameter("mem_id");
/*DB에 존재하는 ID와 비교하여 존재한다면 ck=true,
존재하지 않는다면 ck=false 반환하는 코드*/
if(ck){
result="<font color='red'><b>이미 존재하는 아이디입니다.</b></font>";
}else{
result="<font color='blue'><b>사용이 가능한 아이디입니다.</b></font>";
}
out.println(result);
%>
</body>
</html>
'jQuery' 카테고리의 다른 글
| [jQuery]setTimeout, setInterval, 태그의 인덱스 번호에 따라 구분하기 (0) | 2021.03.05 |
|---|---|
| [jQuery]중첩태그 구분하기, 같은 태그를 속성에 따라 구분하기 (0) | 2021.03.05 |
| [jQuery]이클립스 template 추가하기/ 제이쿼리 함수 attr, each, children, text, html, val (0) | 2021.03.05 |
| [jQuery]ready함수, 제이쿼리 api문서, css함수, 제이쿼리 변수 (0) | 2021.03.04 |
| [jQuery]jQuery 개요 및 특징, 사용방법(라이브러리 다운, cdn) (0) | 2021.03.04 |