| http://www.christofwagner.com/ (0) | 2007.02.05 |
|---|---|
| [참고할곳] 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] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
| http://serennz.sakura.ne.jp/toybox/lightbox/?en (0) | 2007.02.13 |
|---|---|
| [참고할곳] 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] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
| http://serennz.sakura.ne.jp/toybox/lightbox/?en (0) | 2007.02.13 |
|---|---|
| http://www.christofwagner.com/ (0) | 2007.02.05 |
| The Lightbox Effect without Lightbox (0) | 2007.01.11 |
| http://prototype-window.xilinus.com/ (0) | 2006.11.30 |
| [ajax] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
좋습니다~
하지만~~~ 익스 특정 버전에서 div background-image 가 100% 가 안되서 자바스크립트로 살짝 고쳐주던가, explorer hack 를 알아내야 한다는거~
http://www.pjhyett.com/posts/190-the-lightbox-effect-without-lightbox
| http://www.christofwagner.com/ (0) | 2007.02.05 |
|---|---|
| [참고할곳] http://www.endless.com/ (0) | 2007.01.19 |
| http://prototype-window.xilinus.com/ (0) | 2006.11.30 |
| [ajax] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
| [펌] AJAX (Asynchronous Javascript and XML) (0) | 2005.06.28 |
| [참고할곳] http://www.endless.com/ (0) | 2007.01.19 |
|---|---|
| The Lightbox Effect without Lightbox (0) | 2007.01.11 |
| [ajax] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
| [펌] AJAX (Asynchronous Javascript and XML) (0) | 2005.06.28 |
| ajax 볼것.... (0) | 2005.06.28 |
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>
| [참고할곳] 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 |
최근 웹애플리케이션의 최대화두인 Ajax에 관련된 글들을 스크랩 해 봤다.
이미 구글에서 가능성이 입증되었으니 그 활약이 기대된다.
RIA(Rich Internet Application) 환경에서 Flash의 대안이 될 수 있을까?
관련 기사
http://news.com.com/Will+AJAX+help+Google+clean+up/2100-1032_3-5621010.html
http://www.adaptivepath.com/publications/essays/archives/000385.php
http://www.themaninblue.com/writing/perspective/2005/03/02/
한글 소개 자료 (PDF)
http://www.likejazz.com/29692.html
Ajax in Flash
http://www.docuverse.com/blog/donpark/EntryViewPage.aspx?guid=495742b9-af21-4ab2-9ad7-ab0229a6ecf9
Sajax - Simple ajax toolkit for PHP
http://www.modernmethod.com/sajax/
Ajax DEMO (ASP.NET)
http://weblogs.asp.net/pleloup/archive/2005/04/06/397371.aspx
관련 북마크
http://del.icio.us/popular/ajax
SOAP와 XMLHTTP를 사용한 응용프로그램 사용하기
http://www.asptomorrow.net/asptoday/20000718/soap.asp?lectureid=62
Dynamic HTML and XML_ The XMLHttpRequest Object
http://developer.apple.com/internet/webcontent/xmlhttpreq.html
Very Dynamic Web Interfaces
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385.php
AJAX WAS Here - Part 1 : Client Side Framework
http://www.codeproject.com/useritems/AJAXWasHere-Part1.asp
Guide to Using XMLHttpRequest
| [참고할곳] 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] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
| ajax 볼것.... (0) | 2005.06.28 |
| [참고할곳] 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] 우편번호 찾기 초보버전 (2) | 2005.08.22 |
| [펌] AJAX (Asynchronous Javascript and XML) (0) | 2005.06.28 |