뉴컴온 스토리4를 제작하면서 만들었던 아이디 중복체크 예제이다.

check.js
function idcheck() {

 var param = "id="+encodeURIComponent(document.add.id.value);
 sendRequest("./join/idc1.jsp",param,idResult,"post");

}
function idResult() {
 if(httpRequest.readyState==4){ //데이터를 전부 받은 상태. 완전한 데이터 이용 가능
  if(httpRequest.status==200){  //요청 성공
   var result = document.getElementById("resid");
   result.innerHTML = httpRequest.responseText;
  }
 }
}


idc1.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="sam.dao.MemberControl;"%>
<%
String id = request.getParameter("id");
MemberControl mc = new MemberControl();
int re = 0;
re = mc.idCheck(id); //DAO클래스를 통해 아이디 중복 검사한 값을 받아온다.
if(re==1){
%>
사용 가능합니다. //요 텍스트를 데이터로 전달한다.
<%
}else{
%>
이미 존재합니다.
<%} %>

join.jsp
<script src="./join/httpRequest.js" type="text/javascript" />

<script src="./join/check.js" type="text/javascript" />
<input type="button" value="중복검사" onclick="idcheck()"/>
<div id="resid" align="center"></div>

데이터를 단순히 텍스트로만 받아와서 퍼포먼스에 제약이 있는 아주 기초적인 ajax 예제이다.(그래도 요정도만 알고 있어도 쏠쏠하게 써 먹을 수 있다.ㅋㅋ)
데이터 응답을 xml과 json으로 파싱하는 방법을 공부해보도록 하자.
AND