XML : xml 파일 및 url 데이터 불러오기 및 parsing

xml 데이터

* XML  파일( 또는 url )을 서버로 전송하기 위한 단계

  
<script>  // 기능이기 때문에 외울 필요x, 사용법 익혀두기

// xml 데이터를 읽어오기 위한 객체 생성
var xhttp = new XMLHttpRequest();

// xml 데이터 받아오는 함수 실행
xhttp.onreadystatechange = function () {
	
    // readyState = 4 : 데이터 로딩 및 처리 완료
    // status=200 : 데이터불러오기 성공
    if(this.readyState == 4 && this.status == 200){
       
        // 읽기가 끝나면 실행되는 문서 
        // nodeValFunc(this);      // 노드의 데이터를 가져오는 함수실행 (작성함)
        // nodeNameFunc(this);     // 노드의 태그명을 가져오는 함수실행 (작성함)
        childNodeFunc(this);	   // 노드의 태그명을 가져오는 함수실행 (작성함)
    }

};

// open( "GET(또는)POST", "파일경로(또는)url", "비동기방식=true")
xhttp.open("GET", "client.xml", true);

// send() : 데이터 실제로 전송하는 함수
xhttp.send();

</script>

 

 

 

 

* XML 데이터를 불러오기 위한 함수 만들기

<script>
// 데이터 불러오는 함수 
function nodeValFunc( xml ) {   // xml데이터 넘김

    var num, name;
    var txt, ntxt, xmlDoc;
    
    txt = ntxt = "";

    xmlDoc = xml.responseXML;   
    // responseXML : this.resposeText와 비슷
    
    alert(xmlDoc); 
    // ==> object로 넘어오는 것 확인
    
    num = xmlDoc.getElementsByTagName("번호");
    // <번호> 데이터를 모두 받아옴(배열)
    
    name = xmlDoc.getElementsByTagName("이름");
    // <이름> 데이터를 모두 받아옴(배열)
    
    alert(num.length);  // 데이터 잘 넘어오는지 확인(길이확인)



    // num과 name 데이터 받아오기/
    for(i = 0; i<num.length; i++) {
        txt += num[i].childNodes[0].nodeValue +"<br>";
        ntxt += name[i].childNodes[0].nodeValue +"<br>";
    }
	// num[i].childNodes[0].nodeValue
    // = num(<번호>)의 i번째의 0번째 childNodes(자식노드)의 값
    // nodeValue를 얻어오기 위해서는 태그의 인덱스를 0의 nodeValue 프로퍼티를 설정해야 제대로 나옴
    
    
    
    // id= "demo"인 태그에 뿌려주기
    document.getElementById("demo").innerHTML = "번호 : <br>"+ txt + "이름 :<br>" + ntxt;
	
};

</script>

 

 

* 태그명만 가져오는 함수

<script>

// 태그명만 가져오는 함수 (=고객)
function nodeNameFunc( xml ) {

    var arr, xmlDoc, txt;   
    
    txt = "";
	// txt : p태그에 적용시킬 변수


    xmlDoc = xml.responseXML;
    // responseXML 프로퍼티 : 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 반환


    arr = xmlDoc.documentElement.childNodes;
    //documentElement.childNodes  ---> 문서의 루트태그(여기서는 고객들)의 자식노드를 배열로 담음 

	// arr배열의길이(=xml루트의 자식태그들의 개수)만큼 for문 돌림
    for( i=0; i < arr.length; i++) {
        
        if(arr[i].nodeType == 1){   
        // nodeType !=1 : 노드가 없는것 ( = #text )
            txt += arr[i].nodeName + "<br>";
            //i번째 <고객>의 노드이름 = 고객
        }
    }
   
    document.getElementById("demo").innerHTML = txt;
    
};

</script>

 

 

* 자식노드이름을 출력하는 함수 (번호,이름,주소,방문)

 

<script>

// 자식노드이름을 출력하는 함수 (=번호,이름,주소,방문)
function childNodeFunc( xml ) {
    
    var arr, xmlDoc, txt;
    txt = "";    // html에 출력하기 위한 태그

    xmlDoc = xml.responseXML;

    arr = xmlDoc.getElementsByTagName("고객")[0];
    // 인덱스 0인 <고객>의 데이터 배열로 받음
    
    var len = arr.childNodes.length;
    // alert(len);  // 확인용, 인덱스=0인 고객의 길이

    var fchild = arr.firstChild;
    // 인덱스=0인 <고객>의 자식 노드 중 가장 첫 노드들을배열로 담기
    // =번호/이름/주소/방문

    for(i =0; i<len; i++){
        if(fchild.nodeType==1){	//  nodeType !=1 : 노드가 없는것
            txt += i + " " + fchild.nodeName + "<br>";
        }
        
        fchild = fchild.nextSibling;
        //다음 노드로 이동 및 대입

    }

    document.getElementById("demo").innerHTML = txt;


};

</script>