달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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>

'DHTML > AJAX' 카테고리의 다른 글

[참고할곳] http://www.endless.com/  (0) 2007.01.19
The Lightbox Effect without Lightbox  (0) 2007.01.11
http://prototype-window.xilinus.com/  (0) 2006.11.30
[펌] AJAX (Asynchronous Javascript and XML)  (0) 2005.06.28
ajax 볼것....  (0) 2005.06.28
Posted by tornado
|