JavaScript/nodeJS & Ajax & Plugin

[node.js] - XMLHttpRequest / XML문서 데이터 추출 (childeNodes,nodeValue)

유혁스쿨 2022. 1. 7. 11:56
728x90
반응형

XML 데이터는 XMLHttpRequest객체의 responseXML 속성을 통해 전달받을 수 있다.

따라서 node.js에 다음과 같이 코드를 구성한다.

request.onreadystatechange = function(event){
    if(request.readyState == 4){
        if(request.status == 200){
            console.log(request.responseXML)
            var xml = request.responseXML;							
        }
    }
}

XML문서객체를 조작할 때에는 getElements 키워드가 붙은 메서드를 사용하는데 html태그에서 사용하는 메서드와 동일하다.

XML에서는 보통 id속성을 사용하지 않기 때문에 getElementsById() 메서드보다는 getElementsByTagName() 를 사용한다.

 

if(request.readyState == 4){
    if(request.status == 200){
        console.log(request.responseXML)
        var xml = request.responseXML;					
        var names = xml.getElementsByTagName('name');
        var prices = xml.getElementsByTagName('price');
    }
}

위와같이 접근 후 반복문을 통해 각 태그들에 순차적으로 접근하여 해당 태그의 textNode를 가져오도록 구현해야한다.

textNode에 접근할때에는 childNodes 컬렉션을 사용한다.

childNodes 컬렉션은 텍스트 노드를 포함한 모든 자식 노드를 담고 있다.

접근 후에는 DOM속성 중 nodeValue 라는 속성을 사용하여 값을 추출한다.

 

if(request.readyState == 4){
    if(request.status == 200){
        console.log(request.responseXML)
        var xml = request.responseXML;					
        var names = xml.getElementsByTagName('name');
        var prices = xml.getElementsByTagName('price');
        for (var i = 0; i < names.length; i++){
            console.log(names[i])
            console.log(names[i].childNodes[0])
            var name = names[i].childNodes[0].nodeValue;
            var price = prices[i].childNodes[0].nodeValue;
            document.body.innerHTML += '<h1>'+name+'</h1>';
            document.body.innerHTML += '<h2>'+price+'</h2>';
        }			
    }
}

 

name과 price 값들이 정상적으로 출력된다.

 

function createRequest(){
    var request;
    try{
        return new XMLHttpRequest();
    }catch(exception){
        var versions = [
            'Msxml2.XMLHTTP.6.0'
            ,'Msxml2.XMLHTTP.5.0'
            ,'Msxml2.XMLHTTP.4.0'				
            ,'Msxml2.XMLHTTP.3.0'
            ,'Msxml2.XMLHTTP'
            ,'Microsoft.XMLHTTP'
        ];
        for (var i = 0; i < versions.length; i++){
            try{
                return new ActiveXObject(versions[i]);
            }catch(e){}
        }
    }
}
    var request = createRequest();
    request.onreadystatechange = function(event){
        console.log(request.readyState)
        if(request.readyState == 4){
        if(request.status == 200){
        console.log(request.responseXML)
        var xml = request.responseXML;					
        var names = xml.getElementsByTagName('name');
        var prices = xml.getElementsByTagName('price');
        for (var i = 0; i < names.length; i++){
            console.log(names[i])
            console.log(names[i].childNodes[0])
            var name = names[i].childNodes[0].nodeValue;
            var price = prices[i].childNodes[0].nodeValue;
            document.body.innerHTML += '<h1>'+name+'</h1>';
            document.body.innerHTML += '<h2>'+price+'</h2>';
        }			
    }
}
    }
} 
		
request.open('get','/data.json',true);
		
request.send();
728x90
반응형