Content

Board ID 690
Writer heojk
Write Date 2017-06-15 12:37:56
Subject Proxy를 이용한 RSS 데이터 비동기 요청
Content 뉴스 데이터를 가져오기 위해 프락시를 사용하는 예 입니다. news_rss.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뉴스RSS</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

<script src="./rss.js" defer></script>

</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>뉴스 헤더</h1>
    </div>

    <div data-role="content">
        <p>
        <!-- data-rssurl 은 사용자 정의 속성값이다. (data-는 커스텀 속성)  -->
        <a href="#news_rss" data-rssurl="http://rss.etnews.com/Section901.xml">전자신문</a><br>
        <a href="#news_rss" data-rssurl="http://www.khan.co.kr/rss/rssdata/total_news.xml">경향닷컴</a><br>
        <a href="#news_rss" data-rssurl="http://rss.nocutnews.co.kr/nocutnews.xml">노컷뉴스</a><br>
        <a href="#news_rss" data-rssurl="http://www.hani.co.kr/rss/">한겨레</a><br>
        <a href="#news_rss" data-rssurl="http://www.chosun.com/site/data/rss/rss.xml">조선일보</a><br>

        </p>
    </div>
 
    <div data-role="footer">
        <h4>푸터</h4>
    </div>
</div>

<!-- 위의 #news_rss a 태그 중에 하나 클릭시 아래의 내용이 동적으로 해당  RSS정보가 나타남 -->
<div data-role="page" id="news_rss">
    <div data-role="header">
        <a data-rel="back">뒤로</a>
        <h1>RSS 헤더</h1>
    </div>
 
    <div data-role="content">
        <p class="content-list">RSS 내용</p>
        <div class="content-desc"></div>
    </div>
</div>

</body>
</html>
proxy_common.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8"  trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% %>
<c:import charEncoding="UTF-8" url="${param.rssurl}"></c:import> 
<!-- 위에서 가장중요한 부분은 param.rssurl 인데 이것으로 jquery mobile 과 교신할때 쓰이는 주소 파라미터 값으로 작동된다.-->
rss.js
var links = $("div[data-role='content'] p > a");
links.each(function(index, item) {
    $(this).bind('click', function getRssData(event) {
        $.ajax({
            type:"GET",
            data: {
                rssurl:$(this).attr("data-rssurl")
            },
            url:"./proxy_common.jsp",
            dataType:"xml",
            success: function(data, status){
                var target = $("#news_rss div[data-role=content] .content-list");
                target.html("");
                $("item", data).each(function(index, item) {
                    var title = $('title', item).text();
                    var link = $('link', item).text();
                    var desc = $('description', this).text(); //this로 참조 가능함
                    target.append("<p>"+ ++index +". <a href='" + link + "'>" + title + "</a><span>" + desc + "</span></p>"); 
                });
            } //end success callback
        }); //end ajax
    }) //end click event
}); //end each
라이브러리 복사 후 톰캣 재 실행 $TOMCAT_HOME\webapps\examples\WEB-INF\lib\ 폴더의 jar 파일을 $TOMCAT_HOME\webapps\ROOT\WEB-INF\lib\ 폴더에 복사 톰캣 재 실행 실행 브라우저에서 http://localhost:8080/news_rss.html 실행결과