Last Modified : 2009.09.19
Ajax - First Steps
°£´ÜÇÑ ¿¹·Î¼ Ajax °¡ ±âÁ¸ÀÇ À¥ ÇÁ·Î±×·¥ ±â¹ý°ú ¾î¶² Â÷À̰¡ ÀÖ´ÂÁö »ìÆìº¸°Ú½À´Ï´Ù. ¿¹Á¦´Â ȸ¿øµî·Ï ȸ鿡¼ ¾ÆÀ̵ð Áߺ¹ üũ¸¦ ÇÏ´Â °ÍÀÔ´Ï´Ù. ¸ÕÀú ÆË¾÷âÀ» ÀÌ¿ëÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.
1. ÆË¾÷âÀ» ÀÌ¿ëÇÑ ID Áߺ¹ üũ
write_form.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>ȸ¿ø°¡ÀÔ¾ç½Ä</title>
<script type="text/javascript">
function checkID() {
var form = document.getElementById("signform");
var id = form.id.value;
if (id != '' ) {
var winFeatures = "toolbar=no," +
"location=no," +
"directories=no," +
"status=no," +
"menubar=no," +
"scrollbars=no,"+
"resizable=no,"+
"copyhistory=no,"+
"width=400, height=400";
window.open("popIDCheck.jsp?id="+id, "IDCheckWin", winFeatures);
} else {
alert('ID¸¦ ÀÔ·ÂÇϼ¼¿ä!');
}
}
</script>
</head>
<body>
<form id="signform" action="write.jsp" method="post">
<p>
ID <input type="text" name="id" />
<input type="button" value="IDÁߺ¹Ã¼Å©" onclick="checkID()" />
</p>
<p>
<span id="idChkMsg"></span>
</p>
</form>
</body>
</html>
popIDCheck.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<%
String id = request.getParameter("id");
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "select count(*) from member where id = ?";
boolean isExist = false;
String url = "jdbc:oracle:thin:@127.0.0.1:1521:orcl";
try {
con = DriverManager.getConnection(url,"scott","tiger");
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if ( rs.next() ) {
int i = rs.getInt(1);
if ( i > 0 ) isExist = true;
}
} catch ( SQLException e ) {
System.out.println( "Error Source:popIDCheck.jsp : SQLException" );
System.out.println( "SQLState : " + e.getSQLState() );
System.out.println( "Message : " + e.getMessage() );
System.out.println( "Oracle Error Code : " + e.getErrorCode() );
System.out.println( "Query : " + sql );
} finally {
rs.close();
pstmt.close();
con.close();
}
%>
<!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=EUC-KR">
<title>ID Áߺ¹ üũ</title>
<script type="text/javascript">
function idCheck() {
var form = document.getElementById("frmID");
if ( form.id.value == '' ) {
alert('ID¸¦ ÀÔ·ÂÇϼ¼¿ä!');
return;
}
form.submit();
}
function idConfirm(id) {
var form = opener.document.getElementById("signform");
form.id.value = id;
self.close();
}
</script>
</head>
<body>
<%
if ( isExist == true ) {
%>
<p>
<%=id %>´Â ÀÌ¹Ì »ç¿ëÁßÀÔ´Ï´Ù.<br />
´Ù¸¥ ID¸¦ »ç¿ëÇϼ¼¿ä!
</p>
<form id="frmID" action="popIDCheck.jsp" method="post">
<p>
ID <input type="text" name="id" />
<input type="button" value="IDÁߺ¹Ã¼Å©" onclick="idCheck()" />
</p>
</form>
<%
} else {
%>
<%=id %>´Â »ç¿ëÇÒ ÀÖ½À´Ï´Ù.<br />
<input type="button" value="È®ÀÎ" onclick="idConfirm('<%=id %>')" />
<%
}
%>
</body>
</html>
ºê¶ó¿ìÀú ¼³Á¤¿¡ µû¶ó ÆË¾÷âÀ» ¶ç¿ìÁö ¾Êµµ·Ï ÇÒ ¼ö Àֱ⠶§¹®¿¡ ÀÌÁ¦´Â ÁÁÀº ¹æ¹ýÀÌ µÇÁö ¸øÇÕ´Ï´Ù. ´ÙÀ½Àº iframe À» ÀÌ¿ëÇÏ¿© ID Áߺ¹ üũÀÔ´Ï´Ù.
2. iframe À» ÀÌ¿ëÇÑ ID Áߺ¹ üũ
write_form.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>ȸ¿ø°¡ÀÔ¾ç½Ä</title>
<script type="text/javascript">
function checkID() {
var checkform = document.getElementById("checkform");
var signform = document.getElementById("signform");
var id = signform.id.value;
if ( id != '' ) {
checkform.id.value = id;
checkform.submit();
} else {
alert('ID¸¦ ÀÔ·ÂÇϰí Áߺ¹È®ÀÎÇϼ¼¿ä!')
signform.id.value = '';
signform.id.focus();
}
}
var textNode;
function idNotOKMsg ( id ) {
var msg = document.getElementById('idChkMsg');
if ( textNode ) msg.removeChild(textNode);
var str = id + " ´Â ÀÌ¹Ì »ç¿ëÀÚ°¡ ÀÖ½À´Ï´Ù. ´Ù¸¥ ID¸¦ »ç¿ëÇϼ¼¿ä.";
textNode = document.createTextNode(str);
msg.appendChild(textNode);
msg.style.background = "#FCBFC0";
}
function idOKMsg ( id ) {
var msg = document.getElementById('idChkMsg');
if ( textNode ) msg.removeChild(textNode);
var str = id + " ´Â »ç¿ëÀÌ °¡´ÉÇÑ IDÀÔ´Ï´Ù.";
textNode = document.createTextNode(str);
msg.appendChild(textNode);
msg.style.background = "#BFCDFC";
}
</script>
</head>
<body>
<form id="signform" action="write.jsp" method="post">
<p>
ID <input type="text" name="id" />
<input type="button" value="IDÁߺ¹Ã¼Å©" onclick="checkID()" />
</p>
<p>
<span id="idChkMsg"></span>
</p>
</form>
<form id="checkform" action="iframeIDCheck.jsp" method="post" target="iIDCHKframe">
<input type="hidden" name="id" />
</form>
<iframe id="iIDCHKframe" name="iIDCHKframe"
style="width: 0px;height: 0px;border: 0px;"></iframe>
</body>
</html>
iframeIDCheck.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<%
String id = request.getParameter("id");
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "select count(*) from member where id = ?";
boolean isExist = false;
String url = "jdbc:oracle:thin:@127.0.0.1:1521:orcl";
try {
con = DriverManager.getConnection(url,"scott","tiger");
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if ( rs.next() ) {
int i = rs.getInt(1);
if ( i > 0 ) isExist = true;
}
} catch ( SQLException e ) {
System.out.println( "Error Source:iframeIDCheck.jsp : SQLException" );
System.out.println( "SQLState : " + e.getSQLState() );
System.out.println( "Message : " + e.getMessage() );
System.out.println( "Oracle Error Code : " + e.getErrorCode() );
System.out.println( "Query : " + sql );
} finally {
rs.close();
pstmt.close();
con.close();
}
%>
<!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=EUC-KR">
<title>ID Áߺ¹ üũ</title>
</head>
<body>
<%
if ( isExist == true ) {
%>
<script type="text/javascript">
parent.idNotOKMsg( '<%=id %>' );
</script>
<%
} else {
%>
<script type="text/javascript">
parent.idOKMsg( '<%=id %>' );
</script>
<%
}
%>
</body>
</html>
¾ÕÀ¸·ÎÀÇ À¥Àº ¾Æ¸¶µµ ÆË¾÷âÀ» ÀÌ¿ëÇϰųª ifrmae À» ÀÌ¿ëÇÏ´Â ÀÌ¿Í °°Àº ¹æ½ÄÀº Á¡Á¡ ÁÁÀº ¹æ¹ýÀÌ µÇÁö ¸øÇÒ °ÍÀÔ´Ï´Ù. xhtml 1.0 strict ¿¡¼´Â ÆË¾÷â°ú iframe À» ¾Æ¿¹ »ç¿ëÇÒ ¼ö ¾ø±â ¶§¹®ÀÔ´Ï´Ù.
3. Ajax ¸¦ ÀÌ¿ëÇÑ ID Áߺ¹ üũ
write_form.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>ȸ¿ø°¡ÀÔ¾ç½Ä</title>
<script type="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch ( trymicrosoft ) {
try {
xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" );
} catch ( othermicrosoft ) {
try {
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
} catch ( failed ) {
xmlHttp = false;
}
}
}
if ( !xmlHttp ) {
alert( "Error initializing XMLHttpRequest!" );
}
function checkID() {
var form = document.getElementById("signform");
var id = form.id.value;
// TODO ¾ÆÀ̵ð À¯È¿¼º üũ
var queryString = "id=" + id;
var url = "ajaxIdCheck.jsp";
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
function updatePage() {
if ( xmlHttp.readyState == 4 ) {
showIDCheckMsg();
}
}
function showIDCheckMsg() {
var response = xmlHttp.responseText;
var str = response.split("|");
var msg = document.getElementById( "idChkMsg" );
if ( str[0] == 0 ) {
idOKMsg ( str[1] );
} else {
idNotOKMsg ( str[1] );
}
}
var textNode;
function idNotOKMsg ( id ) {
var msg = document.getElementById('idChkMsg');
if ( textNode ) msg.removeChild(textNode);
var str = id + " ´Â ÀÌ¹Ì »ç¿ëÀÚ°¡ ÀÖ½À´Ï´Ù. ´Ù¸¥ ID¸¦ »ç¿ëÇϼ¼¿ä.";
textNode = document.createTextNode(str);
msg.appendChild(textNode);
msg.style.background = "#FCBFC0";
}
function idOKMsg ( id ) {
var msg = document.getElementById('idChkMsg');
if ( textNode ) msg.removeChild(textNode);
var str = id + " ´Â »ç¿ëÀÌ °¡´ÉÇÑ IDÀÔ´Ï´Ù.";
textNode = document.createTextNode(str);
msg.appendChild(textNode);
msg.style.background = "#BFCDFC";
}
</script>
</head>
<body>
<form id="signform" action="write.jsp" method="post">
<p>
ID <input type="text" name="id" />
<input type="button" value="IDÁߺ¹Ã¼Å©" onclick="checkID()" />
</p>
<p>
<span id="idChkMsg"></span>
</p>
</form>
</body>
</html>
ajaxIdCheck.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<%
String id = request.getParameter("id");
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = null;
String sql = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int result = 0;
String url = "jdbc:oracle:thin:@127.0.0.1:1521:orcl";
try {
con = DriverManager.getConnection(url,"scott","tiger");
sql = "select count(*) from member where id = ?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
rs.next();
result = rs.getInt(1);
} catch ( SQLException e ) {
System.out.println( "Error Source:ajaxIdCheck.jsp : SQLException" );
System.out.println( "SQLState : " + e.getSQLState() );
System.out.println( "Message : " + e.getMessage() );
System.out.println( "Oracle Error Code : " + e.getErrorCode() );
System.out.println( "Query : " + sql );
} finally {
rs.close();
pstmt.close();
con.close();
}
out.println ( result + "|" + id);
%>
±âÁ¸ ±â¼ú°ú Â÷ÀÌÁ¡Àº ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÏ¿© ¼¹ö ÄÄÆ÷³ÍÆ®¿Í Á÷Á¢ Åë½ÅÇÑ´Ù´Â °ÍÀÔ´Ï´Ù.
Âü°í ¹®¼
http://www.w3schools.com/HTMLDOM/met_win_open.asp http://www.ibm.com/developerworks/kr/series/web/index.html
