모든지 기록하자!

XML과 사용예시 본문

JavaScript/xml

XML과 사용예시

홍크 2021. 6. 8. 22:42
728x90

XML - extensible Markup Language
                확장   표시   언어
  사용자 지정 태그
  목적: Data(공공)를 공유하기 위한 목적
         setup의 목적

 

XML을 이용해서 txt파일 읽어오기

test.txt파일

가나다라마바사아자카타파하아야어여오요우유으이

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo">p tag</p>
<button type="button" onclick="loadXMLDoc()">내용 변경</button>

<script type="text/javascript">

let xhttp = new XMLHttpRequest();

function loadXMLDoc() {
	
	xhttp.onreadystatechange = function () {
	//	console.log(this.responseText); 		//response : 응답
	//	console.log(this.status);				// 200
	//	console.log(this.readyState);			// 0 1 2 3 4
	
	
		if(this.readyState == 4 && this.status == 200){ 
			document.getElementById("demo").innerHTML = this.responseText;
		}
	}
	
	xhttp.open("GET", "test.txt", true);
	console.log("xhttp.open()");
	
	xhttp.send();
	console.log("xhttp.send();");
}

/*
 		readyState : 진행 상태
 		0	-> open 메소드를 수행하기 전 상태
 		1	-> loding 중...
 		2	-> loding 완료
 		3	-> Server 처리중
 		4	-> Server 처리 완료
 		
 		status
 		200 -> succes
 		403 -> 접근 금지
 		404 -> 없음, 찾지 못했다.
 		500 -> 구문 에러 (문법)
 		
 */

</script>


</body>
</html>

parseFromString를 사용해서 Node로 XML파일 읽어오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo"></p>

<script type="text/javascript">

let xmltext = "<bookstore>" + 
				"<book>"    +
					"<title>탈무드</title>" +
					"<author>man</author>" +
					"<year>2001</year>" +
				"</book>" + 
				"<book>"    +
					"<title>이솝이야기</title>" +
					"<author>woman</author>" +
					"<year>2004</year>" +
				"</book>" +
				"</bookstore>";
//alert(xmltext);				
let parser, xmlDoc;

parser = new DOMParser();
xmlDoc = parser.parseFromString(xmltext, "text/html");
//alert(xmlDoc);

document.getElementById("demo").innerHTML
//	= xmlDoc.getElementsByTagName("book")[0].childNodes[0].nodeName; //title
//  = xmlDoc.getElementsByTagName("book")[0].childNodes[1].nodeName; //author

//	= xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue; // 탈무드
//	= xmlDoc.getElementsByTagName("book").length; // 책종류 2개
	= xmlDoc.getElementsByTagName("book")[0].childNodes.length; // book의 자식노드 이름,작가,년도 3개
	

</script>

</body>
</html>

XMLHttpRequest()를 이용해서 xml파일 읽어오기

member.xml파일

<?xml version="1.0" encoding="UTF-8"?>
<고객들>
	<고객>
		<번호>1</번호>
		<이름>홍길동</이름>
		<주소>서울시</주소>
		<방문>2020/03/23</방문>
	</고객>
	<고객>
		<번호>2</번호>
		<이름>성춘향</이름>
		<주소>남원시</주소>
		<방문>2021/01/31</방문>
	</고객>
	<고객>
		<번호>3</번호>
		<이름>일지매</이름>
		<주소>부산시</주소>
		<방문>2019/07/11</방문>
	</고객>
</고객들>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo"></p>

<script type="text/javascript">

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
	
	if(this.readyState == 4 && this.status == 200){
		//alert(this.responseXML);
		nodeValfunc(this);
	}
}
xhttp.open("GET", "member.xml", true);
xhttp.send();

function nodeValfunc( xml ) {
	let num, name;
	let txt, numtxt, xmlDoc;
	
	txt = numtxt = ''; // 문자열 초기화
		
	num = xmlDoc.getElementsByTagName("번호"); // tag이름이 번호 인 태그를 읽어와서 num에 대입
	name = xmlDoc.getElementsByTagName("이름");
	console.log(num.length);
	
	for(i=0;i<num.length;i++){
		txt += num[i].childNodes[0].nodeValue + "<br>";
		numtxt += name[i].childNodes[0].nodeValue + "<br>";
	}
	
	document.getElementById('demo').innerHTML = txt + numtxt;
}

</script>

</body>
</html>

 

728x90
Comments