Javascript로 XML 문서 핸들링 하기

728x90

▒ Javascript로 XML 문서 핸들링 하기 I

IE에서는 Javascript를 이용해서 XML 문서를 핸들링 할 수 있는 방법을 제공하고 있습니다. XML문서를 동적으로 읽어들여 파싱한 후, 스크립트를 통해서 맘대로 핸들링 할 수 있는 거죠.
스타일 쉬트를 동적으로 적용해서 스타일을 변경한다든지, XML 내의 정보를 이용해서 HTML을 구성한다든지 또는 HTML상에서 데이터를 입력받아 XML 문서를 생성한다든지.. 등등 여러가지 작업을 할 수 있습니다.

이런 작업이 가능한것은 ActiveX Control 인 MSXML 파서를 로딩하여 사용할 수 있기 때문이죠. 이때 MSXML 파서는 ActiveX Control 이기 때문에 IE 뿐 아니라 VC++, 또는 Visula Basic에서도 읽어 들여 사용할 수 있답니다. 이렇게 사용되는 방법도 차차 알아보도록 하죠...

물론 이런것들을 수행하기 위해서는 IE 5.0 이상이어야 할겁니다.

1. Javascript에서 XML 문서 읽기

XML 문서를 하나 작성한 후 Javascript상에서 읽은 다음 한번 확인해보도록 하죠. XML 문서는 이전에 작성했었던 북마크 XML 문서를 이용하도록 하죠.

[ 북마크 XML 문서 보기 ]

viewXML() 이란 Javascrip 함수를 만들어 북마크 XML 문서를 읽어볼까요 ?
아래와 같이 ActiveObject란 함수를 통해 MSXML 파서를 로딩해서 DOM Object를 생성합니다.
DOM을 생성한 후 load() 란 메서드를 통해 XML을 읽어들이고 파싱을 하게됩니다. 이때, 문서에 오류가 있으면 에러가 나겠죠 ? 그 다음 생성된 DOM 객체인 xmlDoc에 대해 xml 프로퍼티를 이용하여 XML 원문을 확인할 수 있습니다.

::: Javascript를 이용해 원문을 확인하는 예제 :::

　<html>
　　<head>
　　　<script>
　　　　function viewXML() {
　　　　　　// MSXML 파서를 이용해서 XML문서를 가져온다.
　　　　　　var xmlDoc = new ActiveXObject("MSXML.DOMDocument");
　　　　　　xmlDoc.async = false;
　　　　　　xmlDoc.load("bookmark.xml");

　　　　　　// DOM 객체로부터 원문을 읽어 Dialog Box로 표시한다.
　　　　　　alert(xmlDoc.xml);
　　　　}
　　　</script>
　　</head>
　　<body>
　　　...
　　　<a href="javascript:viewXML()">[ 북마크 XML 문서읽기 ]</a>
　　　...
　　</body>
　</html>

[ Javascript를 통해 읽어들인 XML 원문 확인하기 ]

2. 읽어들인 XML문서에 동적으로 Style 적용하기

위와 같이 Javascript를 통해 XML 문서를 읽어들일 수 있듯이 스타일도 동적으로 적용할 수 있답니다.
이전 예제에서는 아래와 같이 XML 문서에 적용하고자 하는 스타일 파일을 지정하여 직접 HTML로 볼 수 있었죠 ?

::: XML 문서에 스타일을 지정하는 예제 :::

　<?xml version="1.0" encoding="EUC-KR"?>
　<?xml:stylesheet type="text/xsl" href="table.xsl"?>

　<bookmark>
　　...
　</bookmark>

그런데, 위와 같은 방법은 하나의 XML 문서에 하나의 스타일을 적용할때는 모르겠지만, 다양한 스타일을 적용하려면 매번 사용할 스타일을 변경해줘야 하는 번거로움이 있을 것입니다. 또는, 서로 다른 스타일이 적용된 XML을 여러개 만들다든지 해야하겠죠.

그럼, Javascript를 이용해서 동적으로 스타일을 변경시켜 보여주는 예제를 하나 만들어 보겠습니다. 예제는 이전에 사용했던 것들을 재사용하기로 하죠.

XML문서나 XSLT 문서를 읽어들여 DOM 객체를 생성하는 것은 위의 예와 같고, 스타일을 동적으로 지정할 수 있는 방법이 필요한데, 이것은 transformNode()라는 메서드를 이용하게 됩니다.
그래서, 아래와 같이 XML 문서를 미리 읽어두고, 요청에 따라 스타일 파일을 읽어와 transformNode()라는 메서드를 통해 스타일을 적용하게 되죠. transformNode() 메서드는 스트링을 리턴하게 되어 있는데, 사용되는 스타일 파일들이 모두 HTML 로 변환하기 때문에, html 소스를 결과를 얻어오게 됩니다.

그 다음은 변환된 결과를 다시 HTML에 적용하는 것인데, 이것은 DHTML을 이용하였습니다. innerHTML이란 것은 지정된 태그내에 HTML Source를 말하는 것으로 아래 코드는 <div> 태그내 내용을 변환된 스트링 값으로 대치하란 것입니다. 좀더 자세히 설명하면, content라는 ID를 가진 태그 즉, <div id="content"> 의 HTML Source를 변환된 결과로 replace 시키란 것이죠. <div> 태그를 사용한 이유는 화면 구성에 아무런 영향을 주지않기 때문 이랍니다.

::: Javascript를 이용해 스타일을 동적으로 적용하는 예제 :::

　<html>
　　<head>
　　　<script>
　　　　// 미리 bookmark.xml 문서를 읽어들인다.
　　　　var xmlDoc = new ActiveXObject("MSXML.DOMDocument");
　　　　xmlDoc.async = false;
　　　　xmlDoc.load("bookmark.xml");

　　　　function changeXSLT(style) {
　　　　　// 지정한 xslt 문서를 읽어들인다.
　　　　　var xslDoc = new ActiveXObject("MSXML.DOMDocument");
　　　　　xslDoc.async = false;
　　　　　xslDoc.load(style + ".xsl");

　　　　　// xml문서에 읽어들인 xslt 문서를 통해 스타일을 적용한다.
　　　　　html = xmlDoc.transformNode(xslDoc);
　　　　　// DHTML을 통해 HTML로 변환된 내용을 이 페이지에 반영한다.
　　　　　content.innerHTML = html;
　　　　}
　　　</script>
　　</head>
　　<body>
　　　...
　　　<a href="javascript:changeXSLT('table')">[ 테이블 형태로 보기 ]</a> |
　　　<a href="javascript:changeXSLT('list')">[ 리스트 형태로 보기 ]</a>>
　　　...
　　　<div id="content"></div>
　　</body>
　</html>

[ 동적으로 스타일을 적용하는 예제 보기 ]

참고로 XSLT 즉, 스타일을 처리할 수 있는것은 XSLT Processor가 필요하게 됩니다. XSLT Processor가 별도로 개발되기는 하지만 보통 파서내에 포함되어 있습니다. 위의 얘제와 같이 transformNode()라는 메서드는 MSXML 파서에서 지원하고 있는 기능입니다.

2004

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

728x90