728x90
반응형
<?xml version="1.0" encoding="utf-8" ?>
<!-- /jquery1/src/main/webapp/ajax/address.xml -->
<states>
<north>
<state>강북구</state>
<state>노원구</state>
<state>도봉구</state>
</north>
<south>
<state>강남구</state>
<state>서초구</state>
<state>관악구</state>
</south>
<east>
<state>강동구</state>
<state>송파구</state>
<state>성동구</state>
</east>
<west>
<state>강서구</state>
<state>구로구</state>
<state>양천구</state>
</west>
</states><!DOCTYPE html>
<!-- /jquery1/src/main/webapp/ajax/address.html -->
<html>
<head>
<meta charset="UTF-8">
<title>XML 예제</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function loadxml(rtype, tag){
reqType = rtype; //매개변수는 지역변수 => 전역변수에 저장
reqTag= tag; //매개변수는 지역변수 => 전역변수에 저장
sendRequest("address.xml", null, parseXml, "GET");
}
function parseXml(){
console.log('ajax',ajax);
console.log('reqType',reqType);
if(ajax.readyState == 4) {
if(ajax.status == 200) {
if(reqType == 'all')
listAllStates(); //=>함수 호출
else
listPartStates(); //동서남북에 해당하는 구 이름을 출력
} else {
alert('서버오류: ' + ajax.status);
}
}
}
function listAllStates() {
console.log(ajax.responseText);
//xmlDoc : 문서노드
var xmlDoc = ajax.responseXML; //xml 형태의 결과값. xml 객체(DOM)형태로 리턴
//allStates : 모든 state 태그들을 배열로 리턴
var allStates = xmlDoc.getElementsByTagName("state")
//document : html 페이지의 문서노드
//getElementById 함수 : DOM 관련 함수
// 하위 태그 중 id=result 인 태그 리턴
var divTag = document.getElementById("result");
divTag.innerHTML = "서울 전체 구";
for(var i=0; i<allStates.length; i++) {
divTag.innerHTML += "<br>-" + allStates[i].childNodes[0].nodeValue;
}
}
function listPartStates() {
var xmlDoc = ajax.responseXML;
var tags = xmlDoc.getElementsByTagName(reqTag)[0];
var states = tags.getElementsByTagName("state");
var divTag = document.getElementById("result");
divTag.innerHTML = "서울 " + reqType + "쪽 구";
for(var i=0; i<states.length; i++) {
divTag.innerHTML += "<br>-" + states[i].childNodes[0].nodeValue;
}
}
</script>
</head>
<body>
<h1>서울의 구 정보</h1>
<input type="button" value="서울 전체 구 " onclick="loadxml('all', 'all')">
<input type="button" value="서울 동쪽 구 " onclick="loadxml('동', 'east')">
<input type="button" value="서울 서쪽 구 " onclick="loadxml('서', 'west')">
<input type="button" value="서울 남쪽 구 " onclick="loadxml('남', 'south')">
<input type="button" value="서울 북쪽 구 " onclick="loadxml('북', 'north')">
<div id="result"></div>
</body>
</html>728x90
반응형
'study > Ajax' 카테고리의 다른 글
| [Ajax] 23. Ajax를 이용한 로그인 (0) | 2022.04.28 |
|---|---|
| [Ajax] 23. jquery를 이용한 Ajax연습 (0) | 2022.04.27 |
| [Ajax] 22. Ajax로 xml, json 분석하기 (0) | 2022.04.27 |
| [Ajax] 22. Ajax을 이용한 게시물검색2 (0) | 2022.04.27 |
| [Ajax] 22. Ajax을 이용한 게시물검색1 (0) | 2022.04.27 |