JSP/AJAX.1

Ex02 . people.xml / personJSONReader.jsp

GAWON 2023. 6. 23. 10:08 
<?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>
저작자표시