<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE people>
<people>
<!-- 1. name 태그, age 태그 -->
<person>
<name>김씨</name>
<age>30</age>
</person>
<person>
<name>박씨</name>
<age>10</age>
</person>
<!-- 2. name 속성, age 속성 -->
<person name="이씨" age="20" value="100"/>
<person name="최씨" age="200" />
</people>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 일반 텍스트 형식 결과 : responseText (html, jsp, txt 등)
// xml의 결과 : responseXML (태그를 자동으로 파싱)
var xmlData = xhr.responseXML;
/*
var names = xmlData.getElementsByTagName("name");
var ages = xmlData.getElementsByTagName("age");
var msg = '<ul>';
for(var i=0; i<names.length; i++){
var name = names[i].childNodes[0].nodeValue;
var age = ages[i].childNodes[0].nodeValue;
msg += "<li> 이름 : " + name + " </li>";
msg += "<li> 나이 : " + age + " </li>";
}
msg += "</ul>";
document.body.innerHTML = msg;
*/
var people = xmlData.getElementsByTagName("person");
var msg = '<ul>';
msg += "<li> 이름 : " + people[2].getAttribute("name") + " </li>";
msg += "<li> 나이 : " + people[2].getAttribute("age") + " </li>";
msg += "</ul>";
document.body.innerHTML = msg;
}
}
xhr.open("get", "people.xml", true);
xhr.send();
</script>
</body>
</html>
