<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
jQuery 시각효과
show() hide() toggle()
slideDown() slideUp() slideToggle()
fadeIn() fadeOut() fadeToggle()
*/
$('#btn1').on('click',function(){
$('.page').toggle('slow');
});
});
</script>
</head>
<body>
<button id="btn1">Toggle</button>
<hr />
<div class='page'>
<h1>Effect Test</h1>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
</div>
</body>
</html>
2
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
jQuery 시각효과 메서드
speed : 효과 진행속도
callback : 효과 완료하고 실행할 함수 지정
easing : 움직임 가속도 (default = swing 가속도 붙음)
*/
$('#btn1').on('click',function(){
$('.page').fadeToggle(
'fast', //speed
'linear', //easing
function(){ alert('이펙트 종료후 실행');}//callback
);
});
$('#btn2').on('click',function(){
$('.page').fadeOut('slow');
});
$('#btn3').on('click',function(){
$('.page').fadeIn('slow');
});
});
</script>
</head>
<body>
<button id="btn1">Toggle</button>
<button id="btn2">fadeOut</button>
<button id="btn3">fadeIn</button>
<hr />
<div class='page'>
<h1>Effect Test</h1>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
</div>
</body>
</html>
3
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {width: 50px; height: 50px; background-color: orange; position: relative;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//사용자 정의 효과 animate
//animate(object, speed, easing, callback);
//마우스 올리면 왼쪽으로 움직임
$('div').on('mouseover', function(){
$(this).animate({
left:500
},'slow','swing');
});
//마우스 나가면 오른쪽으로 움직임
$('div').on('mouseout', function(){
$(this).animate({
left:0
},'slow','linear');
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
4
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//상대적 애니매이션
//기존의 스타일속성에서 추가값부여
//클릭시 이미지 커짐
$('#btn1').on('click', function(){
$('img').animate({
width:'+=50',
height:'+=50'
},'fast');
});
//클릭시 이미지 최소 150까지 작아짐
$('#btn2').on('click', function(){
var width = parseInt($('img').css('width'));
if(width>150){
$('img').animate({
width:'-=50',
height:'-=50'
},'fast');
}
});
});
</script>
</head>
<body>
<button id='btn1'>+ 버튼</button>
<button id='btn2'>- 버튼</button>
<hr>
<img src='./images/Koala.jpg' width='150'>
</body>
</html>
5
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {width: 50px; height: 50px; background-color: orange; position: relative;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//에니메이션 큐 //누적효과는 큐에 저장되고 차례로 실행
$('div').animate({left:'+=60'},2000);
$('div').animate({width:'+=60'},2000);
$('div').animate({height:'+=60'},2000);
//3초 뒤에 기존의 효과를 지우고 새로운 효과 부여
setTimeout(function(){
//애니메이션 큐 제거
$('div').clearQueue();
//효과 메서드 사용
$('div').hide();
},3000);
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
6
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {width: 50px; height: 50px; background-color: orange; position: relative;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//애니메이션 stop
//stop(clearQueue, goToEnd)
$('button').click(function(){
var html = $(this).html();
var evalText = "$('div')."+html;
eval(evalText);
});
setInterval(function(){
$('div').animate({
left: '500'
}, 1000).animate({
left: '0'
}, 1000);
}, 2000);
});
</script>
</head>
<body>
<button>stop()</button> <!-- 이동 멈추고 애니메이션 시작지점으로 돌아옴 -->
<button>stop(true)</button> <!-- 이동 멈추고 다음 setInterval 애니메이션 시작될때 까지 기다림 -->
<button>stop(false,true)</button> <!-- 현재 애니메이션 끝으로 이동하고, 다음 애니메이션 시작 -->
<button>stop(true,true)</button> <!-- 현재 애니메이션 끝으로 이동하고, 다음 setInterval 애니메이션 시작될때 까지 기다림-->
<hr/>
<div></div>
</body>
</html>
7.Ajax
Ajax (비동기식 자바스크립트 & xml)
클라이언트첫번째 요쳥에만 html, javascript, css 요청
2번째 요청시 데이터만 요청하고 javascript에서 데이터를 가지고 디자인을 갱신하여 보여줌
데이터 보내는 형식
1. csv---검사 : 데이터 그대로 나옴
2. xml
---검사 : IE에서 xml태그를 트리구조로 접히게 나옴
3. json
---검사 : http://jsonlint.com/ 에서 validation되는 지 확인
Ajax
자바스크립트를 이용해서 원격 서버에 접속하는 기술XMLHttpRequest 객체를 사용
8.데이터 저장 형태
csv
모던 웹 디자인을 위한 HTML +CSS3 입문, 한빛미디어, 윤인성, 30000원
모던 웹 디자인을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000원
모던 웹 디자인을 위한 node.js 프로그래밍, 한빛미디어, 윤인성, 22000원
모던 웹 디자인을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000원csv.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%--text/plain : html방식이 아닌 텍스트 방식으로 데이터만 보냄 --%>
<%--trimDirectiveWhitespaces : JSP로 보낼때 소스보기에서 공백 제거 --%>
<%
out.println("모던 웹 디자인을 위한 HTML +CSS3 입문, 한빛미디어, 윤인성, 30000원");
out.println("모던 웹 디자인을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000원");
out.println("모던 웹 디자인을 위한 node.js 프로그래밍, 한빛미디어, 윤인성, 22000원");
out.println("모던 웹 디자인을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000원");
%>
9
xml
<?xml version="1.0" encoding="utf-8"?>
<books>
<book>
<name>모던 웹 디자인을 위한 HTML +CSS3 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 JavaScript + jQuery 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>32000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 node.js 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>22000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 HTML5 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
</books>xml.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%-- text/html로 적으면 xml문서를 복사 붙여넣기만 하면 됨 --%>
<?xml version="1.0" encoding="utf-8"?>
<books>
<book>
<name>모던 웹 디자인을 위한 HTML +CSS3 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 JavaScript + jQuery 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>32000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 node.js 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>22000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 HTML5 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
</books>xml.jsp 2번째 방법
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%-- text/xml로 적으면 xml선언부를 안 적어줘도 됨 --%>
<books>
<book>
<name>모던 웹 디자인을 위한 HTML +CSS3 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 JavaScript + jQuery 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>32000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 node.js 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>22000원</price>
</book>
<book>
<name>모던 웹 디자인을 위한 HTML5 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
</books>
10
json
[
{
"name": "모던 웹 디자인을 위한 HTML +CSS3 입문",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "30000원"
},
{
"name": "모던 웹 디자인을 위한 JavaScript + jQuery 입문",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "32000원"
},
{
"name": "모던 웹 디자인을 위한 node.js 프로그래밍",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "22000원"
},
{
"name": "모모던 웹 디자인을 위한 HTML5 프로그래밍",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "30000원"
}
]json.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
[
{
"name": "모던 웹 디자인을 위한 HTML +CSS3 입문",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "30000원"
},
{
"name": "모던 웹 디자인을 위한 JavaScript + jQuery 입문",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "32000원"
},
{
"name": "모던 웹 디자인을 위한 node.js 프로그래밍",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "22000원"
},
{
"name": "모모던 웹 디자인을 위한 HTML5 프로그래밍",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "30000원"
}
]
11.DB값으로 xml파일 만들기
폴더구성
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.sql.DataSource"%>
<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.SQLException"%>
<%
//DB에서 데이터를 가져와서 xml파일 만들기
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
StringBuffer result = new StringBuffer();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context) initCtx.lookup("java:comp/env");
DataSource dataSource = (DataSource) envCtx.lookup("jdbc/oracle");
conn = dataSource.getConnection();
String sql = "select * from dept";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
result.append("<depts>");
while (rs.next()) {
result.append(" <dept>");
result.append(" <deptno>" + rs.getString("deptno") + "</deptno>");
result.append(" <dname>" + rs.getString("dname") + "</dname>");
result.append(" <loc>" + rs.getString("loc") + "</loc>");
result.append("</dept>");
}
result.append("</depts>");
} catch (NamingException e) {
System.out.println("에러 : " + e.getMessage());
} catch (SQLException e) {
System.out.println("에러 : " + e.getMessage());
} finally {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
out.println(result);
%>
12.기상청 xml파일
http://www.kma.go.kr/weather/lifenindustry/sevice_rss.jsp
13
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
//XMLHttpRequest : 자바스크립트에서 Ajax 사용하는 객체
var request = new XMLHttpRequest();
//설정 // open(요청 방식, 요청경로, 동기방식) //동기방식 =send후에 요청을 받을때 까지 멈추고 있음
request.open('GET', './data/scott.jsp', false);
request.open('GET', 'http://localhost:8080/AjaxEx01/data/scott.jsp', false); //위와 동일한결과
//실행
request.send();
alert(request.responseText);
};
};
</script>
</head>
<body>
<button id="btn">요청</button>
<div id="result"></div>
</body>
</html>
14
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
//XMLHttpRequest 생성
var request = new XMLHttpRequest();
//설정
request.open('GET', './data/csv.jsp', false);
//실행
request.send();
var result = request.responseText;
document.getElementById('result').innerHTML += result;
};
};
</script>
</head>
<body>
<button id="btn">요청</button>
<div id="result"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
var request = new XMLHttpRequest();
//Ajax보안 때문에 자체사이트 아니면 에러생김 //옆사람 서버에 ajax요청 불가
request.open('GET', 'http://192.168.0.47:8080/AjaxEx01/data/csv.jsp', false);
//구글 API는 구글이 아니더라도 Ajax받아올 수 있도록 해둠
request.open('GET', 'https://maps.googleapis.com/maps/api/geocode/xml?address=%EC%84%9C%EC%9A%B8%EC%8B%9C%EC%B2%AD', false);
//실행
request.send();
//화면 출력
var result = request.responseText;
document.getElementById('result').innerHTML += result;
};
};
</script>
</head>
<body>
<button id="btn">요청</button>
<div id="result"></div>
</body>
</html>
16
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
// Ajax 요청
var request = new XMLHttpRequest();
request.open('GET', './data/csv.jsp', false);
request.send();
//데이터 처리후 테이블로 보여줌
var data = request.responseText;
var rowdatas = data.split('\n');
var result ='<table border="1">';
for(var i=0; i<rowdatas.length; i++){
var coldatas = rowdatas[i].split(',');
result += '<tr>';
result += '<td>'+coldatas[0]+'</td>';
result += '<td>'+coldatas[1]+'</td>';
result += '<td>'+coldatas[2]+'</td>';
result += '<td>'+coldatas[3]+'</td>';
result += '</tr>';
}
result += '</table>';
document.getElementById('result').innerHTML += result;
};
};
</script>
</head>
<body>
<button id="btn">요청</button>
<div id="result"></div>
</body>
</html>
17
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn1').onclick = function(){
//동기식
console.log('1');
var request = new XMLHttpRequest();
console.log('2');
request.open('GET', './data/csv.jsp', false);
console.log('3');
request.send();
console.log('4');
document.getElementById('result').innerHTML += request.responseText;
console.log('5');
};
document.getElementById('btn2').onclick = function(){
//비동기식
console.log('1');
var request = new XMLHttpRequest();
console.log('2');
request.open('GET', './data/csv.jsp', true);
console.log('3');
request.send();
console.log('4');
document.getElementById('result').innerHTML += request.responseText;
console.log('5');
};
};
</script>
</head>
<body>
<button id="btn1">동기 요청</button>
<button id="btn2">비동기 요청</button>
<hr />
<div id="result"></div>
</body>
</html>
18
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn1').onclick = function(){
//동기식
console.log('1');
var request = new XMLHttpRequest();
console.log('2');
request.open('GET', './data/csv.jsp', false);
console.log('3');
request.send();
console.log('4');
document.getElementById('result').innerHTML += request.responseText;
console.log('5');
};
document.getElementById('btn2').onclick = function(){
//비동기식
console.log('1');
var request = new XMLHttpRequest();
/*
readyState 속성값
0 = request 객체를 만들었지만 open()메서드로 초기화 하지 않음
1 = 초기화 했지만 send()메서드 사용되지 않음
2 = send()메서드 사용후 데이터 받지 못함
3 = 데이터를 일부 받음
4 = 모든 데이터를 받음
*/
request.onreadystatechange = function(){
console.log('readystate : ' + request.readyState);
//상태가 4번이면 데이터를 출력
if(request.readyState ==4){
document.getElementById('result').innerHTML += request.responseText;
console.log('5');
}
};
console.log('2');
request.open('GET', './data/csv.jsp', true);
console.log('3');
request.send();
console.log('4');
};
};
</script>
</head>
<body>
<button id="btn1">동기 요청</button>
<button id="btn2">비동기 요청</button>
<hr />
<div id="result"></div>
</body>
</html>
19
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
//비동기식
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
console.log('readystate : ' + request.readyState);
if(request.readyState ==4){ //서버 에러가나서 데이터를 잘못보내더라도 readyState는 4
//status 속성값이 200일때 데이터를 출력 //200 이면 정상적인 데이터 보냈다는 의미
if(request.status == 200){
document.getElementById('result').innerHTML += request.responseText;
}
}
};
request.open('GET', './data/csv.jsp', true);
request.send();
};
};
</script>
</head>
<body>
<button id="btn">비동기 요청</button>
<hr />
<div id="result"></div>
</body>
</html>
20
구글 API : https://developers.google.com/maps/documentation/geocoding/intro https://maps.googleapis.com/maps/api/geocode/xml?address=%EC%84%9C%EC%9A%B8%EC%8B%9C%EC%B2%AD
21.주소검색
폴더구성
context.xml
<?xml version="1.0" encoding="utf-8" ?>
<Context>
<Resource
name="jdbc/oracle"
auth="Container"
type="javax.sql.DataSource"
driverClassName="oracle.jdbc.driver.OracleDriver"
url="jdbc:oracle:thin:@localhost:1521:orcl"
username="scott"
password="tiger"
maxTotal="20"
maxWaitMillis="5000" />
</Context>SearchZip
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').on('click',function(){
//검색 동이름 인코딩
var dong = $('input').val();
dong = encodeURIComponent(dong);
// Ajax 요청
var request = new XMLHttpRequest();
request.open('GET', './data/zipcode.jsp?dong='+dong, false);
request.send();
//데이터 처리후 테이블로 보여줌
var data = request.responseText;
var rowdatas = data.trim().split('\n');
var result ='<table border="1">';
for(var i=0; i<rowdatas.length; i++){
var coldatas = rowdatas[i].split(',');
result += '<tr>';
result += '<td>'+coldatas[0]+'</td>';
result += '<td>'+coldatas[1]+'</td>';
result += '<td>'+coldatas[2]+'</td>';
result += '<td>'+coldatas[3]+'</td>';
result += '<td>'+coldatas[4]+'</td>';
result += '<td>'+coldatas[5]+'</td>';
result += '</tr>';
}
result += '</table>';
$('div').html(result);
});
});
</script>
</head>
<body>
<input type='text' />
<button>검색</button>
<hr />
<div></div>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.sql.DataSource"%>
<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.SQLException"%>
<%
request.setCharacterEncoding("utf-8");
String dong = "신사";
if(request.getParameter("dong") != null) {
dong = request.getParameter("dong");
}
System.out.println(dong);
//DB에서 데이터를 가져와서 csv파일 만들기
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
StringBuffer result = new StringBuffer();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context) initCtx.lookup("java:comp/env");
DataSource dataSource = (DataSource) envCtx.lookup("jdbc/oracle");
conn = dataSource.getConnection();
String sql = "select zipcode, sido, gugun, dong, ri, bunji from zipcode where dong like ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, dong+'%');
rs = pstmt.executeQuery();
while (rs.next()) {
result.append(rs.getString("zipcode")+",");
result.append(rs.getString("sido")+",");
result.append(rs.getString("gugun")+",");
result.append(rs.getString("dong")+",");
result.append(rs.getString("ri")+",");
result.append(rs.getString("bunji")+"\n");
}
} catch (NamingException e) {
System.out.println("에러 : " + e.getMessage());
} catch (SQLException e) {
System.out.println("에러 : " + e.getMessage());
} finally {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
out.println(result);
%>
댓글 없음:
댓글 쓰기