<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 비동기 처리</title>
</head>
<body>
<h1>AJAX로 구현하는 시/구/동 선택하기</h1>
<p>
1. tomcat.apache.org에서 tomcat 서버를 다운로드하고
적당한 곳에서 압축해제해 둠<br>
2. webapps/ROOT에 sido.jsp, gugun.jsp, dong.jsp에
복사해 둠 (23zipcode.html도 마찬가지!)<br>
3. bin/startup.bat로 서버 시작해 둠<br>
4. http://127.0.0.1:8080/sido.jsp로 실행 확인<br>
5. 실습확인은 http://127.0.0.1:8080/23zipcode.html을 이용함<br>
6. 선택한 시도에 대한 구군 조회는 'gugun.jsp?sido=시/도이름' 로 함<br>
7. 선택한 시도와 구군에 대한 동 조회는
'dong.jsp?sido=시/도이름&gugun=구/군이름' 으로 함
</p>
<div>
<select id="sido"></select>
<select id="gugun"></select>
<select id="dong"></select>
</div>
<script>
let url1 = 'http://127.0.0.1:8080/sido.jsp';
let url2 = 'http://127.0.0.1:8080/gugun.jsp';
let url3 = 'http://127.0.0.1:8080/dong.jsp';
let sido = document.querySelector('#sido');
let gugun = document.querySelector('#gugun');
let dong = document.querySelector('#dong');
// 1. 시도 출력
let getSido = () => {
// let req = new XMLHttpRequest();
// req.onreadystatechange = () => {
// if (req.readyState == 4 && req.status == 200) {
// setSido(req.responseText);
// }
// };
// req.open('get', url1, true);
// req.send();
// }; // 서버에 시도 데이터 요청
fetch(url1)
.then(response=>response.text())
.then(text => setSido(text));
let setSido = (sidos) => {
let cols = sidos.split(',');
// 기본 option 요소 추가
let opt = document.createElement('option');
let txt = document.createTextNode('광역시');
opt.appendChild(txt);
sido.appendChild(opt);
opt = document.createElement('option');
txt = document.createTextNode('시/군/구');
opt.appendChild(txt);
gugun.appendChild(opt);
opt = document.createElement('option');
txt = document.createTextNode('읍/면/동');
opt.appendChild(txt);
dong.appendChild(opt);
// 시도 option 요소 추가
for (let col of cols) {
if (col == '') continue;
opt = document.createElement('option');
txt = document.createTextNode(col);
opt.appendChild(txt);
sido.appendChild(opt);
}
}; // 첫번째 select에 생성한 시도 option 요소 추가
sido.addEventListener('change', () => {
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == 4 && req.status == 200) {
setGugun(req.responseText);
}
};
let qry = '?sido=' + sido.value;
req.open('get', url2+qry, true);
req.send();
}); // 시도를 클릭해서 내용을 선택하면 이벤트 발생
// 선택한 시도로 구군을 조회해서 gugun에 option 추가
// 2. 구군 출력
let setGugun = (guguns) => {
let cols = guguns.split(',');
// 기존 option들 제거
while(gugun.firstChild)
gugun.removeChild(gugun.firstChild);
// 시군구 기본 요소 추가
opt = document.createElement('option');
txt = document.createTextNode('시/군/구');
opt.appendChild(txt);
gugun.appendChild(opt);
// 시군구 option 요소 추가
for (let col of cols) {
if (col == '') continue;
opt = document.createElement('option');
txt = document.createTextNode(col);
opt.appendChild(txt);
gugun.appendChild(opt);
}
};
// 3. 동 출력
dong.addEventListener('change', () => {
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == 4 && req.status == 200) {
setDong(req.responseText);
}
};
let qry = '?dong=' + dong.value;
req.open('get', url2+qry, true);
req.send();
});
for (let col of cols) {
if (cols = '') continue;
opt = document.createElement('option');
txt = document.createTextNode('읍/면/동');
opt.appendChild(txt);
dong.appendChild(opt);
}
opt = document.createElement('option');
txt = document.createTextNode(col);
opt.appendChild(txt);
gugun.appendChild(opt);
};
getSido();
</script>
</body>
</html>
