2. Rss를 XML로 가져오기
이제 가져올 element는 정해 졌습니다.
하지만 한가지 문제가 있습니다. 이놈을 어떻게 가져 올 것인가???
Ajax라고 많이 들어 보셨을 것입니다. 일명 HTML, Javascript DHTML, DOM으로 구성된 비동기 통신을 가리키는 말입니다.
Ajax의 핵심에는 XMLHttpRequest 가 있습니다. 대충 보니 HTTP프로토콜을 이용하여 XML로 어떤 값을 받는거 같습니다.
이놈이 사용자가 눈치채지 못하게 어떤 값을 가져오고 그것을 DOM형태로 소리 소문 없이 문서 사이에 끼워 넣으면서 여러가지 동적인 화면을 구성할 수 있습니다.
Ajax에 대해서 더 자세히 아시고 싶으신 분은
URL : http://www.ibm.com/developerworks/kr/library/wa-ajaxintro1.html 를 참고해 주세요.
이 Post의 주제가 초간단 Rss Reader를 만드는 것이기 때문에 주제에 충실 하도록 하겠습니다.
이제 보실 부분은 rssReader.html의 javascript 부분입니다.
총 3개의 function으로 구성되어 있습니다.
uriChk()
입력한 URL값이 유효한 값인지 검사 합니다. 최소한 http://XXX.XXX 나 https://XXX.XXX 형태가 되는지 검사합니다.
여기를 통과하면 일단 유효한 URL이라고 판단하여 getRss(URL)을 호출 합니다.
getRss(URL)
이부분이 핵심입니다. 해당 URL로 Ajax비동기 통신을 하여 xml을 가져 옵니다.
그리고 var xml = rssParser(req.responseXML); 로 xml을 JSON으로 파싱을 시킵니다.
rssParser은 rssParser.js란 include된 javascript에 들어 있습니다.
만약 알맞게 JSON으로 파싱이 되었다면 printHTML(JSON) 을 호출 합니다.
printHTML(JSON)
이 부분은 그냥 이뿌게 꾸며서 <div id="title"></div> 여기에 제목 부분을 넣고
<div id="contents"></div> 여기에 item 리스트를 넣는 것입니다.
전체 소스를 보겠습니다.
0: <?xml version="1.0" encoding="EUC-KR" ?> 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" /> 5: <style type="text/css"> 6: * {font-size:12px;} 7: body {margin:0px; padding:0px;color:#666666;} 8: a:active {color:#236fa5; text-decoration:none;} 9: a:visited {color:#236fa5; text-decoration:none;}10: a:link {color:#236fa5; text-decoration:none;}11: a:hover {color:#518fbb; text-decoration:underline;}12: </style>13: <script type="text/javascript" language="javascript" src="./prototype.js"></script>14: <script type="text/javascript" language="javascript" src="./rssParser.js"></script>15: <script type="text/javascript" language="javascript">16: <!--17: function uriChk() {18: var uri = $("uri");19: if(uri.value == "") {20: alert("가져올 피드의 주소를 입력 하세요.");
21: uri.focus();22: return;23: }24: if(!(/(http|https):\/\/\w+([-.]\w+).+$/).test(uri.value)) {25: alert("피드 주소가 유효하지 않습니다.");
26: uri.focus();27: return;28: }29: getRss(uri.value);30: }31: 32: function getRss(uri) {33: Element.hide("title");34: $("contents").innerHTML = $("loading").innerHTML;35: new Ajax.Request(36: uri,37: {38: method : "get",39: onSuccess : function(req) {40: var xml = rssParser(req.responseXML);41: if(!xml) {
alert("Rss포멧이 아닙니다.");
$("contents").innerHTML = "";
return;
}
42: printHtml(xml);43: },44: onFailure : function() {45: alert("데이타를 가져오는데 실패 했습니다.");
46: $("contents").innerHTML = "";47: }48: }49: );50: }51: 52: function printHtml(xml) {53: var d = new Date(xml.pubDate);54: var title = '';55: var cont = '';56: title += '<a href="' + xml.link + '" target="_blank"><strong style="font-size:16px;">'
+ xml.title + '</strong></a>';57: if(d != 'NaN') {58: title += '<span style="padding-left:20px;">(' + d.toLocaleString() + ')</span>';59: }60: title += '<br/><br/>' + xml.description;61: for(var i = 0; i < xml.item.length; i++) {62: cont += '<a href="' + xml.item[i].link +'" target="_blank">'
+ '<strong style="font-size:16px;">' + xml.item[i].title + '</strong></a>';63: cont += '<hr style="height:1px;color:518fbb"/>';64: if(xml.item[i].pubDate != "") {65: var pd = new Date(xml.item[i].pubDate);66: cont += '<span style="color:#aaaaaa;">' + pd.toLocaleString()
+ '</span><br/><br/>';67: }68: cont += xml.item[i].description.replace("\n", "<br/>") + '<br/><br/><br/>';69: };70: $("title").innerHTML = title;71: $("contents").innerHTML = cont;72: Element.show("title");73: }74: //-->75: </script>76: <title>Rss Reader V 0.1 by Vricks - www.vricks.com</title>77: </head>78: <body>79: <div style="width:800px;text-align:left;margin:auto;">80: <div style="background-color:#ff000a;padding:16px 0 50px 16px;margin:20px 0;">81: <strong style="font-size:14px;color:#ffffff;">82: Rss Reader V0.183: </strong>84: </div>85: <div style="text-align:center;margin:20px;">86: <input type="text" id="uri" value="http://blog.rss.naver.com/jeffyang.xml"
style="width:360px;" />87: <input type="button" value="RSS 가져오기" onclick="uriChk();" />
88: </div>89: <div id="title"
style="padding:20px;background-color:#f7f7f4;border:1px solid #aaaaaa;display:none;">
</div>90: <div id="contents" style="padding:20px;"></div>91: <div style="display:none;" id="loading"><div style="text-align:center;">
<img src="./loading.gif" alt=""/>
</div></div>92: </div>93: </body>94: </html>
$("uri") -> API 보기
document.getElementById("uri")와 같은 말입니다. 물론 $()함수는 더 많은 기능을 제공해 줍니다.
Element.hide("title"); -> API 보기
document.getElementById("title").style.display = ""; 과 같은 말입니다. 물론 Element.hide("title") 함수가 더 많은 기능을 제공합니다.
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: params,
onSuccess: function(req) {
something...
},
onFailure: function() {
something....
}
}
);
XMLHttpRequest를 쉽게 구현해 주는 부분입니다. -> API 보기
url : 접속할 URL입니다. 뒤에 오는 method가 get일 경우 get방식의 prameters를 붙여서 사용할 수 있습니다.
예) var url = "http://test.com/test.xml?id=1234&date=
method : get/post 가 올 수 있습니다.
parameters : get 방식의 경우 null 이 옵니다. post의 경우는 ?를 제외한 prameter를 붙여서 사용 합니다.
예) var params = "id=1234&date=
onSuccess : 성공 했을때의 코드를 기술 합니다.
onFailure : 실패 했을때의 코드를 기술 합니다.
printHTML() 은 JSON으로 파싱된 값들을 받아서 뿌려 주는 일을 합니다.
var xml = rssParser(req.responseXML);
로 받아서 printHTML(xml)로 보냈습니다.
channel의 title을 가져 올 때는 단순히 xml.title
item[0]의 title을 가져 올 때는 xml.item[0].title 이렇게 가져 오면 됩니다.
rssParser.js는 다음 post에서 만나 보실 수 있습니다.