[Prototype] 자바스크립트를 이용한 XML 파싱 클래스

*****************************************************

이번에 소개하는것은 Prototype 프레임워크상에서의 예제입니다.
http://prototype.conio.net

rss는 태터툴즈를 기본으로 설명하였습니다.

주 의 : 제가 설명을 잘 못합니다 :)

*****************************************************

예전에 제가 PHP로 xml 또는 html 를 파싱하는 간단한 소스를 소개한적이 있죠
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=49208&sca=&sfl=wr_name%7C%7Csubject&stx=%BD%BA%B3%AA&sop=and

이번에는 위와 비슷한 방식으로 자바스크립트로 XML을 파싱합니다.^^

일단 파싱 클래스 소스입니다.

클래스는 두개입니다. (* 프로토타입을 기반으로 하여 만들었습니다.)

* xml 클래스
노드 파싱시 필요한 함수가 있는 부모 클래스

* xml 클래스를 확장한 rss 클래스 ( extend xmlParser )
실질적으로 필요한 노드를 파싱하는 자식 클래스

--------------------------------------------------------------------------------------------------

// XML 클래스
var xmlParser = Class.create();
Object.extend(xmlParser.prototype, {
initialize: null,
getNode: function (xml, tag){ // 싱글노드
return xml.getElementsByTagName(tag)[0];
},
getNodeAll: function (xml, tag){ // 멀티노드
return xml.getElementsByTagName(tag);
},
getValue: function (xml){ // 노드값 가져오기
try{
return xml.firstChild.nodeValue;
} catch(e){
return null;
}
}
});

// XML 클래스를 확장한 RSS 클래스
var rssParser = Class.create();
Object.extend(rssParser.prototype, xmlParser.prototype);
Object.extend(rssParser.prototype, {
title: null,
link: null,
description: null,
language: null,
pubDate: null,
generator: null,
image: null,
item: null,

initialize: function (xml){
// CHANNEL
var channel = this.getNode(xml, "channel");
//-----------------------------------------------------------------
// + TITLE
this.title = this.getValue(this.getNode(channel, "title"));
// + LINK
this.link = this.getValue(this.getNode(channel, "link"));
// + DESCRIPTION
this.description = this.getValue(this.getNode(channel, "description"));
// + LANGUAGE
this.language = this.getValue(this.getNode(channel, "language"));
// + PUBDATE
this.pubDate = this.getValue(this.getNode(channel, "pubDate"));
// + GENERATOR
this.generator = this.getValue(this.getNode(channel, "generator"));
// + IMAGE
var img_node = this.getNode(channel, "image");
var img_obj = new Object();
img_obj.title = this.getValue(this.getNode(img_node, "title"));
img_obj.url = this.getValue(this.getNode(img_node, "url"));
img_obj.link = this.getValue(this.getNode(img_node, "link"));
img_obj.width = this.getValue(this.getNode(img_node, "width"));
img_obj.height = this.getValue(this.getNode(img_node, "height"));
img_obj.description = this.getValue(this.getNode(img_node, "description"));
this.image = img_obj;
//-----------------------------------------------------------------
// + ITEM
var item_node = this.getNodeAll(channel, "item");
var item_list = new Array();
for(var i=0; i<item_node.length; i++){
var item_obj = new Object();
item_obj.title = this.getValue(this.getNode(item_node[i], "title"));
item_obj.link = this.getValue(this.getNode(item_node[i], "link"));
item_obj.description = this.getValue(this.getNode(item_node[i], "description"));

var category_node = this.getNodeAll(item_node[i], "category");
var category_list = new Array();
for(var j=0; j<category_node.length; j++){
category_list.push(this.getValue(category_node[j]));
}
item_obj.category = category_list;

item_obj.author = this.getValue(this.getNode(item_node[i], "author"));
item_obj.guid = this.getValue(this.getNode(item_node[i], "guid"));
item_obj.comments = this.getValue(this.getNode(item_node[i], "comments"));
item_obj.pubDate = this.getValue(this.getNode(item_node[i], "pubDate"));

item_list.push(item_obj);
}
this.item = item_list;
}
});

--------------------------------------------------------------------------------------------------

* 사용법

new Ajax.Request(
-- 생략 --
onSuccess: function(request){
var xml = new rssParser(request.responseXML);

var h = document.createElement("h3");
h.innerHTML = xml.title;
$('debug').appendChild(h);

for(var i=0; i<xml.item.length; i++){
var li = document.createElement("li");
var a = document.createElement("a");
a.href = xml.item[i].link;
a.innerHTML = xml.item[i].title;
li.appendChild(a);

$('debug').appendChild(li);
}
}
-- 생략 --
});

* rssParser의 가져오는 노드값 간단 정리~!!
<태그>가져오는방식(xml.태그)</태그>
var xml = new rssParser(request.responseXML);

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title> xml.title </title>
<link> xml.link </link>
<description> xml.description </description>
<language> xml.language </language>
<pubDate> xml.pubDate </pubDate>
<generator> xml.generator </generator>
<image>
<title> xml.image.title </title>
<url> xml.image.url </url>
<link> xml.image.link </link>
<width> xml.image.width </width>
<height> xml.image.height </height>
<description> xml.image.description </description>
</image>
<item>
<title> item[0].title </title>
<link> item[0].link </link>
<description> item[0].description </description>
<category> item[0].category[0] </category>
<category> item[0].category[1] </category>
<category> item[0].category[2] </category>
-- category 반복 생략 --
<author> item[0].author </author>
<guid> item[0].guid </guid>
<comments> item[0].comments </comments>
<pubDate> item[0].pubDate </pubDate>
</item>
<item>
<title> item[1].title </title>
<link> item[1].link </link>
<description> item[1].description </description>
<category> item[1].category[0] </category>
-- category 반복 생략 --
<author> item[1].author </author>
<guid> item[1].guid </guid>
<comments> item[1].comments </comments>
<pubDate> item[1].pubDate </pubDate>
</item>
-- item 반복 생략 --
</channel>
</rss>