메뉴 건너뛰기


Computer Science > 기술자료

XML XML Parsing using JavaScript & DOM

2013.12.28 03:46

푸우 조회 수:12462



 

제목

XML Parsing using JavaScript  & DOM (1)

작성자

DEV.WON (http://blog.naver.com/jadin1)

작성일

2006-09-10

배포

PUBLIC

 
 
 
 
 
 
 
 
 
(편의상 말투를 짧게 하는 점 양해바랍니다.)
 
javascript를 활용하여 웹어플리케이션을 개발할수있는 방법중 요즘에 많이 거론되고있는
AJAX를 꼽을수 있겠다.
 
그중에서 AJAX기술은 서버측으로부터 비동기 통신으로 xml 파일 혹은 text파일을 전송하여 클라이언트가 receive하게 되는데 이때 핵심은 XML 데이터를 읽어들여 파싱하는 것이다.
 
이 문서는 AJAX에 중점을 두지 않고 순수 XML 데이터 파싱만을 다루겠다.
 
아울러 MSXML 과 DOM, Xpath 등의 기술은 반드시 수반되어야 하는 기술이므로 숙지하여야 좋다.
 
 
필자는 MSXML4.0 parser를 기준으로 설명하겠으며 cross brower는 독자분들이 보완하길 바란다.
 
테스트를 위한 test.xml은 아래와 같다.
 
<?xml version="1.0" encoding="EUC-KR"?>
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
      <description>A former architect battles corporate zombies, 
      an evil sorceress, and her own childhood to become queen 
      of the world.</description>
   </book>
   <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
      <description>After the collapse of a nanotechnology 
      society in England, the young survivors lay the 
      foundation for a new society.</description>
   </book> 
</catalog>
 
------------------------------------------------------------
XML 를 로드하여 자바스크립에서 활용하는 html파일
 
<html>
<script>
 var XMLFilePath = "sample.xml"; //xml 파일이 있는 경로
 var XMLObj = null;
 var searchWord = null;  //찾을 노드의 어트리뷰트 키워드
 function onClick(){
  XMLObj = document.getElementById("xmlObj"); //XML태그를 이용한 기법이다.
  //XMLObj = new ActiveXObject("Msxml.DOMDocument"); 로 대체 가능하다. MSXML 파서 설치한 경우에 가능
  
      XMLObj.async = false;
      XMLObj.load(XMLFilePath);     
     //alert(XMLObj.xml); // sample.xml파일을 읽어 들인 내용을  DOMDocument 객체의 xml속성을 이용하여 추출    
     
     //예외처리
   if (XMLObj.parseError != 0){ //Exception
       alert("에러 위치 : " + XMLObj.parseError.line + "번째 라인 " + XMLObj.parseError.linepos 
                + "번째 문자\n\n에러 이유 : " + XMLObj.parseError.reason);
                return;
   }
     
     searchWord = document.getElementById("searchBox").value;
     
     var xroot = XMLObj.documentElement; //최상의 노드 추출
     //alert(xroot.nodeName);  // 결과  : catalog
     
     var ResultNode=xroot.selectSingleNode('//book[@id = "'+ searchWord +'"]'); //selectSingleNode메소드는 메소드 이름그대로 하나의 노드만을 추출해온다.
     //book 노드의 id애트리뷰트가 searchWord변수의 값인 노드를검색하는 XQuery
     
         
     if (ResultNode == null) //결과 없으면 null을 반환
      alert("검색 결과 없음");    
     else
      alert(ResultNode.xml);
     
     for(var i = 0 ; i < ResultNode.childNodes.length; i++){//childNodes.length 속성을 이용한 하위노드들 검색
     // alert(
     //  "XML 태그 : " + ResultNode.childNodes.item(i).xml + "\n" + 
     //  "Text 내용 : " + ResultNode.childNodes.item(i).text + "\n"
     // );
     }
  //이제 author 들의 목록을 뽑아와 보자.
  var AuthorNode = xroot.selectNodes('//author'); //selectNodes메소드와 Xquery를  이용하여 author노드들을 컬렉션으로 가져온다.  
     //var AuthorNode = XMLObj.getElementsByTagName("author");
     //위와 같이 getElementsByTagName메소드를 이용하여 한방에(?) 가져올수도 있다.
     
  for (var i = 0 ; i < AuthorNode.length; i++){  
  // alert(AuthorNode.item(i).nodeName + " : " + AuthorNode.item(i).text); //실행하여 확인하여 보자.   
  }
     
 }
 
</script>
<body>
<xml id="xmlObj"></xml>
검색 조건 : <input type="text" name="searchBox" value="bk101"><br>
<input type="button" value="결과 불러오기" onclick="onClick();">
</body>
</html>
 
 
반드시 alert 구문에 //  주석 처리되어있는 부분을 주석을 해제하여 결과를 확인하길 바란다.!
-------------------------------------------------
 
 
참고로 파일에 저장되어있는 xml파일을 로드할수도 있지만
AJAX를 활용하는 경우처럼 서버로 부터 XML 데이터가 넘어오는 경우 파일에 저장한후 파일을
로드하는 방법도 있겠지만 loadXML 메소드를 이용하여 바로 XML를 로드할수도 있다.
XMLObj.loadXML( "XML 데이터들 <catalog> <book> ...........");
 
 
끝으로 웹어플리케이션의 복잡도와 유지보수 의 중요성이 날로 증가하고 있는 요즈음 , 여러 오픈소스나 프레임워크들의 config들을 XML 파일로 관리하는 경향이 있는듯하다.
 
XML의 중요성은 강조하지 않아도 독자여러분들이 더 잘 알것이다.
아무쪼록 XML을 시기적절하게 사용하여 좀더 발전된 개발을 꾀할수 있도록 필자도 더욱
노력해야겠다는 생각을.....했다. ^^;
또한 XML 를 이용할수록 XML 자체에 대한 공부도 더욱 절실히 느끼고있다. ㅜㅜ
 
 
ps. 미흡한 문서이지만 독자여러분들께 도움이 되었으면 하는 바램입니다.
끝으로 도움이 될만한 MSDN URL 남깁니다.