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
반응형
'JavaScript > nodeJS & Ajax & Plugin' 카테고리의 다른 글
[node.js] RevertAjax Polling 실시간 채팅 어플리케이션 예제 구현 (0) | 2022.01.09 |
---|---|
[node.js] mysql 서버 연동 (0) | 2022.01.08 |
[Node.js] - XMLHttpRequest / JSON.parse()로 변환된 JSON객체가 담긴 배열 구조 (0) | 2022.01.07 |
[Node.js] undefined 파라미터 express.bodyParser() 대체 방식 (0) | 2022.01.06 |
[Error] javascript/location.href/QueryString/ String타입/ ${EL} 파라미터 타입 오류 (0) | 2020.09.07 |