choice blog

Html파일에서 xml 파일에 직접 접근하기

이러한 내용의 xml 파일이 있다고 가정하자.

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

Hhtml 예시

<p id="demo"></p>
<script type="text/javascript">

let xhttp = new XMLHttpRequest();

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

function nodeValfunc( xml ) { // ( xml ) 객체 넘겨받기
	let num, name;
	let txt, numtxt, xmlDoc;
	
	txt = numtxt = ''; // 빈 문자열로 초기화
	
	xmlDoc = xml.responseXML; 
	
	num = xmlDoc.getElementsByTagName("번호");
	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;
	// 실행하면 번호와 이름이 p태그에 출력된다.
}

</script>

설명

Java Script Ajax : 이런방식으로 데이터와 통신한다.

XMLHttpRequest() : XML 통신을 하기 위한 객체(상태정보)

onreadystatechange : 요청에 대한 응답(readyState의 진행 상태)을 받는 이벤트 리스너

readyState : 진행 상태

    0 -> open 메소드(xhttp.open("GET", "member.txt", true);)를 수행하기 전 상태
    1 -> loading 중...
    2 -> loading 완료
    3 -> Server 처리중
    4 -> Server 처리 완료

status : 상태
    200 -> 성공(success)
    403 -> 접근금지(서버에 문제가 있을 때)
    404 -> 없음(파일(test.txt)을 못찾는거)
    500 -> 구문(문법)에러

this.readyState == 4 && this.status == 200

이와 같은 조건이 되었을 때 정상적으로 요청이 처리되어 응답이 온 경우 입니다.

send : ajax요청을 서버로 전달한다.

responseXML : 응답을 받은 XML

실행화면

Html파일에서 xml 데이터 접근하기

예시

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>

<script type="text/javascript">
// xml 데이터 접근 예시
let xmltext = "<bookstore>" + 
				  "<book>" + //("book")[0]
				   		"<title>탈무드</title>" +  // childNodes[0]
				  		"<author>man</author>" + // childNodes[1]
				  		"<year>2001</year>" +
				  "</book>" +
				  "<book>" +
				  		"<title>이솝이야기</title>" +
				  		"<author>woman</author>" +
				  		"<year>2004</year>" +
				  "</book>" +
			  "</bookstore>";
		  
let parser, xmlDoc;
// xml로 불러올땐 이작업이 필요없다---------
parser = new DOMParser(); 
xmlDoc = parser.parseFromString(xmltext, "text/html"); // xmltext형태가 parser로 바뀐것
//-----------------------
document.getElementById("demo1").innerHTML
	= xmlDoc.getElementsByTagName("book")[0].childNodes[1].nodeName; // 태그명 얻기
document.getElementById("demo2").innerHTML	
	= xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue; // 태그안에 데이터(탈무드)가져오기
document.getElementById("demo3").innerHTML
	= xmlDoc.getElementsByTagName("book").length; //2
document.getElementById("demo4").innerHTML
	= xmlDoc.getElementsByTagName("book")[0].childNodes.length; // 3
</script>

설명

DOMParser() :  XML문서를 파싱하는 해석 객체이다.

parseFromString : 문자열을 파싱한다.

xmlDoc.getElementsByTagName("book")[0].childNodes[1].nodeName : 태그명을 가져온다.

xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue : 해당태그의 value를 가져온다.

실행화면

XML(eXtensible Markup Language) : 확장 표시 언어

XML 사용목적

Data(공공)를 공유하기 위한 목적. DB에서 필요한 DATA를 파일로 배포하는 것(XML파일)
setup의 목적

XML 배포용 예시 

<선수들> root tag(전체를 묶는 태그)
           <선수>
                    <이름></이름>
                    <나이></나이>
                    <주소></주소>
           </선수>
           <선수>
                    <이름></이름>
                    <나이></나이>
                    <주소></주소>
           </선수>
</선수들>

사용자 지정태그 사용!

태그명 영어 추천(한글로 써도 상관은 없다.)

XML vs HTML

XML은 예시에서 보듯 사용자 지정 태그를 사용한다.

HTML은 웹 지정 태그(표준태그) 사용한다. 예) h1, p, pre