728x90
반응형
<?xml version="1.0" encoding="euc-kr" ?>
<!--src/main/webapp/ajax/house.xml -->
<!--
1. 시작태그가 있으면 종료태그가 있어야 함.
2. 대소문자 구분해야 함.
-->
<properties> <!-- 루트 태그 : 한개만 가능. 문서작성 규칙 -->
<property>
<address>서울시 종로구 가회동 100번지</address>
<price>5000</price>
<comment>조용하고 좋은 이웃</comment>
</property>
<property>
<address>서울시 종로구 역삼동 100번지</address>
<price>50000</price>
<comment>학교, 백화점 등 편의 시설 좋음</comment>
</property>
<property>
<address>경기도 부천시 역곡동 100번지</address>
<price>30000</price>
<comment>교통 좋고, 공기 좋음</comment>
</property>
<property>
<address>경기도 광주시 광주역 5로 18번길 자연앤자이</address>
<price>110000</price>
<comment>교통 좋고, 공기 좋음</comment>
</property>
</properties><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--src/main/webapp/ajax/house.jsp --%>
<%--
json 문서
[ ] : 배열표시
{ } : json 객체
키 : 값
--%>
{"properties" : [
{ "address" : "서울시 종로구 가회동 100번지",
"price" : 50000,
"comment" : "조용하고 좋은 이웃"
},
{ "address" : "서울시 종로구 역삼동 100번지",
"price" : 5000,
"comment" : "학교 백화점 등 편의 시설 좋음"
},
{ "address" : "경기도 부천시 역곡동 100번지",
"price" : 3000,
"comment" : "교통 좋고, 공기 좋음"
}
]}<!DOCTYPE html>
<!--src/main/webapp/ajax/house.html -->
<html>
<head>
<meta charset="UTF-8">
<title>ajax로 xml, json 분석하기</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function doXml() {
sendRequest("house.xml", null, xmlResult, "GET")
}
function doJson() {
sendRequest("house.jsp", null, jsonResult, "GET")
}
function xmlResult() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
xmlControl()
}
}
}
function jsonResult() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
jsonControl()
}
}
}
function xmlControl() {
//responseXML : xml을 파싱(분석)해서 DOM의 형태로 리턴. xml문서 작성 규칙에 맞는 문서여야함.
let xmlDoc = ajax.responseXML;
let house = xmlDoc.getElementsByTagName("property")
let htmldata = "<table><tr><th>주소</th><th>가격</th><th>특징</th></tr>"
//house.length : 3
for(let i=0; i<house.length; i++) {
//childNodes : address 객체의 하위 객체들. TextNode
//nodeValue : TextNode의 내용. 문자열 값
let addr = house[i].getElementsByTagName("address")[0].childNodes[0].nodeValue;
let price = house[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
let comment = house[i].getElementsByTagName("comment")[0].childNodes[0].nodeValue;
htmldata += "<tr><td>" + addr + "</td><td>" + price + "</td><td>" + comment + "</td></tr>"
}
result.innerHTML = "<h2>XML 주택정보</h2>"
result.innerHTML += htmldata
}
function jsonControl() {
var data = ajax.responseText;
var htmldata = "<table border='1'>" + "<tr><th>주소</th><th>가격</th><th>특징</th></tr>";
console.log(data)
var jsondata = JSON.parse(data); //JSON 객체
for(var i=0; i<jsondata.properties.length; i++) {
htmldata +=
"<tr><td>" + jsondata.properties[i].address +
"</td><td>" + jsondata.properties[i].price +
"</td><td>" + jsondata.properties[i].comment +
"</td></tr>"
}
htmldata += "<tr><td colspan='3' align='center'> 총 매물 건수 :"
+ jsondata.properties.length + "건</td></tr></table>"
result.innerHTML = "<h2>JSON 주택정보</h2>"
result.innerHTML += htmldata;
}
</script>
</head>
<body>
<input type="button" value="xml 매물 검색" onclick="doXml()">
<input type="button" value="json 매물 검색" onclick="doJson()">
<div id="result"></div>
</body>
</html>728x90
반응형
'study > Ajax' 카테고리의 다른 글
| [Ajax] 23. jquery를 이용한 Ajax연습 (0) | 2022.04.27 |
|---|---|
| [Ajax] 22. Ajax로 xml 예제1 (0) | 2022.04.27 |
| [Ajax] 22. Ajax을 이용한 게시물검색2 (0) | 2022.04.27 |
| [Ajax] 22. Ajax을 이용한 게시물검색1 (0) | 2022.04.27 |
| [Ajax] 22. Ajax (0) | 2022.04.26 |