JS 로 xml 파일 읽어오는 걸 만들다 보니.. 이것저것 손대게 되네 ^^
아래는 우편번호를 찾는 것인데..
그냥 찾는게 아니라.. 특정 주소를 입력하면 onkeyup 이벤트를 통해
ActiveXObject("Msxml2.XMLHTTP") 를 생성하고.. 그곳에서 XML 값을 리턴받아서
Table 에 add 시키는 것이다..
물론 Refresh 는 없다.
이상한거는 테이블이 길어지면 보기 안좋아서.. DIV 로 스크롤 바를 줬는데
테이블 바로 위에 공백이 생긴다 -.-;
우편번호는 postman.pe.kr 에서 받았고,
커넥션 풀은 proxool 로 했다.
화면에 디스플레이 되는 JSP 파일
FileName : Register.jsp
<%@ page language="java"
pageEncoding="euc-kr"
import="java.sql.*"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSF 'Register.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script language="javascript">
function openDIV(divName){
var obj = document.getElementById(divName);
var x = event.clientX + parseInt(obj.offsetWidth);
var y = event.clientY + parseInt(obj.offsetHeight);
var _x = document.body.clientWidth - x;
var _y = document.body.clientHeight - y;
if(_x < 0){
x = event.clientX + document.body.scrollLeft + x;
}else{
x = event.clientX + document.body.scrollLeft;
}
if(_y < 0){
y = event.clientY + document.body.scrollTop + _y + 20;
}else{
y = event.clientY + document.body.scrollTop;
}
obj.style.top = y + 30 ;
obj.style.left = x ;
obj.style.display = "";
document.forms[0].query.focus();
}
function closeDIV(divName){
var obj = document.getElementById(divName);
if(obj.style.display != "none"){
obj.style.display = "none";
}
}
var req;
function zipcode_check(frm){
var inputVal = frm.query.value;
if(inputVal.length < 2){
return;
}
req = new ActiveXObject("Msxml2.XMLHTTP");
if(req){
req.onreadystatechange = processStateChange;
req.open("GET", "SearchAddr.jsp?dong=" + inputVal, false);
req.send();
}
}
function processStateChange(){
if(req.readyState == 4){
if(req.status == 200){
var nodes = req.ResponseXML.selectNodes("//addr");
FillNodes(nodes);
}else{
alert("Ooops : " + req.statusText);
}
}
}
// XML 을 읽어들여서 테이블에 채운다.
function FillNodes(nodes){
var tableObj = document.getElementById("addrTbl");
var tableBody = tableObj.childNodes[0];
var tableRow, tableCell;
if(tableObj.rows.length > 0){
for(var i = 0; i < tableObj.rows.length; i++){
tableObj.deleteRow(i);
}
}
for(var i = 0; i < nodes.length; i++){
var st = nodes[i].selectSingleNode("zipcode").text + " "
+ nodes[i].selectSingleNode("sido").text + " "
+ nodes[i].selectSingleNode("gugun").text + " "
+ nodes[i].selectSingleNode("dong").text + " "
+ nodes[i].selectSingleNode("ri").text + " "
+ nodes[i].selectSingleNode("bunzi").text;
tableRow = document.createElement("TR");
tableBody.appendChild(tableRow);
tableCell = document.createElement("TD");
tableRow.appendChild(tableCell);
tableRow.runtimeStyle.cursor = "hand";
tableCell.innerHTML = st;
}
document.getElementById("addrTbl").ondblclick = SelectTR;
}
function SelectTR(element){
var row ;
if(element == null){
element = window.event.srcElement;
}
row = findRow(element);
AddrSelect(element.innerHTML);
}
function findRow(element){
if(element.tagName == "TR"){
return element;
}else{
return null;
}
}
function AddrSelect(addr){
document.forms[0].addr.value = addr;
closeDIV('FindZipCodePanel');
}
</script>
</head>
<form name="registerForm" >
<table border="1" align="center" width="500" >
<tr>
<td>우편번호 :
<input type="text" id="zip1" name="zip1" readonly size="3" /> -
<input type="text" id="zip2" name="zip2" readonly size="3" />
<input type="button" id="FindZipCodeBtn" name="FineZipCodeBtn" value="우편번호 찾기" onclick="openDIV('FindZipCodePanel')" />
</td>
</tr>
<tr>
<td>주 소 : <input type="text" id="addr" name="addr" readonly size="40" /></td>
</tr>
<tr>
<td>상세 주소 : <input type="text" id="addrDetail" name="addrDetail" size="40" /></td>
</tr>
</table>
<DIV id="FindZipCodePanel" style="POSITION: absolute; Display:none; BACKGROUND-COLOR: white; WIDTH:500PX; BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid;BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; ">
<TABLE width="100%" align="center" border="1" cellpadding="0" cellspacing="0">
<TR>
<TD align="right" bgColor="#D7DED6" height="13"><a href="javascript:closeDIV('FindZipCodePanel');">X</a></TD>
</TR>
<TR>
<TD>주소를 입력하세요</TD>
</TR>
<TR>
<TD><input type="text" name="query" onkeyup='zipcode_check(this.form)' ondblclick=""/></TD>
</TR>
<TR>
<TD><div id="addrTableDIV" style="OVERFLOW-Y:scroll;WIDTH:100%;POSITION:relative;HEIGHT:200px;BORDER-TOP: gray 1px solid;">
<table id="addrTbl" border="1" align="center" width="100%" ></table></div></TD>
</TR>
</TABLE>
</DIV>
<body>
</body>
</html>
Query String 을 통해 xml 형식으로 주소를 넘겨주는 JSP 파일
FileName : SearchAddr.jsp
<?xml version="1.0" encoding="ksc5601"?>
<Address>
<%@ page language="java"
contentType="text/xml; charset=euc-kr"
import="java.sql.*"
%><%
request.setCharacterEncoding("euc-kr");
String dong = request.getParameter("dong");
if(dong == null){
return;
}
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try{
conn = DriverManager.getConnection("proxool.AjaxSample");
stmt = conn.createStatement();
String query = "select * from zipcode where dong like binary '%" + dong + "%'";
rs = stmt.executeQuery(query);
while(rs.next()){
%>
<addr>
<zipcode><%= rs.getString("zipcode") %></zipcode>
<sido><%= rs.getString("sido") %></sido>
<gugun><%= rs.getString("gugun") %></gugun>
<dong><%= rs.getString("dong") %></dong>
<ri><%= rs.getString("ri") %></ri>
<bunzi><%= rs.getString("bunzi") %></bunzi>
<seq><%= rs.getString("seq") %></seq>
</addr>
<%
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
if(stmt != null) stmt.close();
if(conn != null) conn.close();
}
%></Address>
