RSS구독하기:SUBSCRIBE TO RSS FEED
즐겨찾기추가:ADD FAVORITE
글쓰기:POST
관리자:ADMINISTRATOR

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.htmljavascript 부분입니다.
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.1
83:         </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=2007-03-01";
method : get/post
가 올 수 있습니다
.
parameters : get
방식의 경우 null 이 옵니다. post의 경우는 ?를 제외한 prameter를 붙여서 사용 합니다
.
) var params = "id=1234&date=2007-03-01";
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에서 만나 보실 수 있습니다.

 

2007/07/20 09:58 2007/07/20 09:58
이 글에는 트랙백을 보낼 수 없습니다
웅쓰:웅자의 상상플러스
웅자의 상상플러스
전체 (379)
게임 (5)
영화 (2)
기타 (23)
맛집 (5)
영어 (2)
대수학 (3)
형태소 (5)
Hacking (9)
Linux (112)
HTML (48)
Application_developing (48)
Web_developing (102)
Window (11)
«   2018/11   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
  1. 2016/01 (1)
  2. 2015/12 (3)
  3. 2015/10 (3)
  4. 2015/03 (2)
  5. 2015/01 (4)