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

실행화면