View on GitHub

xReader v0.0.78a [DEMO]

자유로운 리소스 접근의 최후 해결책

xReader 소개

xReader는 YQL을 경유하여 자바스크립트로 제약없이 외부 컨텐츠를 불러오게 만들어진 함수입니다.

제한 철폐!

타 리소스를 접근 제약으로 인한 지독한 고생? 그에 대한 최후 해결책!

아주 간단한 xReader를 사용하면서 바로 위의 제약을 해결할 수 있습니다!

xReader 사용방법
<script src="http://kincrew.github.com/xReader/xReader.full.js"></script>
<script type="text/javascript">
xReader("http://www.yahoo.com/", function(data) {
    alert(data.content);
})
실행하기
</script>

xReader.micro.js나 xReader.full.js만 다운받아 사용하시면 됩니다.

xReader 특징

xReader는 구형 IE5.5부터 대부분 브라우저를 지원, charset의 인식 및 redirect 부분도 처리하고 있습니다.

xReader API

xReader("URL", "CSS", callback, option)
• [string] URL
• [string] CSS
• [function] callback(data)
{
    headers : [obeject], // 응답 HTTP 헤더
    content : "컨텐츠"
    format  : "컨텐츠 형식"
    original : [obeject] //본래 원본 데이타
    redirect : { // Redirect시 생성 객체 (2개 이상이면 배열 형식)
        from    : "URL",
        to      : "URL",
        status  : "" // 응답 code
    },
    url     : "URL", // Redirect시 최종 URL
    date    : [date], // content 생성 시각
    statue  : "",         // 상태
    status  : "200",    // 응답 CODE
    error   : [obeject],    // 에러 발생시 생성
    YQL     : [obeject]     // YQL 정보
    xReader : [obeject],    // xReader 정보
    option  : [obeject],    // 사용자 설정 옵션 정보
    maxAge  : [number]      // maxAge 설정시 처리된 값
}
• [object] option
option설명기본값 및 가능값
cacheBurst캐쉬 미사용 [참고: YQL BLOG]false | true
charset전송시 사용할 charset (준비중)undefined | [string]
contentdata의 전송 (준비중)undefined | [string]
contentType전송시 사용할 content-type (준비중)undefined | [string]
cookie대상 http 요청시 사용 cookie undefined | [object]
css출력 대상의 css selector 형식으로 선택undefined | [string]
diagnosticsYQL 진단 검사 false | true
format최종 결과(data.content)의 형식에 대한 처리 "text" | "json" | "dom" | "dom2"
forceCharset대상 소스의 charset 강제 지정undefined | [string]
fallbackCharset대상 소스의 charset 호환"utf-8, euc-kr, iso-8859-1" | [string]
headers대상 http 요청시 사용 header undefined | [object]
linkxReader와 YQL의 연결 방식 "auto" | "ajax" | "jsonp"
methodYQL과 대상의 연결 방식 "get" | "post" | "head" | "put"
maxAge임의 시간내 캐쉬 우선 사용 (단위, 초)undefined | [number]
maxAgeGlobal임의 시간내 캐쉬 우선 전역 사용 (단위, 초)undefined | [number] | "reset"
query새로 사용할 YQL의 Queryundefined | [string]
paramurl의 추가 param의 사용undefined | [object]
refererreferer 설정 undefined | [string]
sslxReader와 YQL의 SSL연결 false | true
table open data table의 지정"http://kincrew.github.com/xReader.xml" | [string]
targetcallback 반환값을 해당 DOM 요소에 출력undefined | [object]
tidy결과 반환시 element의 parse false | true
timeout타임아웃 시간(ms단위)10000 | [number]
uaua 설정 ("current"사용시, 현재 ua 사용) undefined | "current" | [string]
xpath출력 대상의 xpath 형식으로 선택undefined | [string]

유용한 간단 예제들

HTML
/* 네이버 뉴스 메인 기사 불러오기 */
xReader("news.naver.com", "dl.mtype_head dt a", function(data){
    alert(data.content);
})
실행하기

[참고1] xReader.micro.js 버전도 위와 같은 CSS selector 사용 방법을 지원합니다.
[참고2] xpath를 이용한 트릭으로 text만 받아올 수 있습니다. "dl.mtype_head dt a" -> "dl.mtype_head dt a/text()"

JSON / JSONP
/* flickr에서 고양이 출력 */
var url = "http://api.flickr.com/services/feeds/photos_public.gne?";
url += "tags=cat&tagmode=any&format=json";
xReader(url, function(data){
    var items = data.content.items;
    var html = "";
    for (var i=0; items.length > i ;i++ ) {
        html += "<div>" + items[i].description + "</div>";
    }
    return html;
},
{
    format : "json", // 대상 변환 형식
    target : document.getElementById("exDemoResult4") // 출력 대상
})
실행하기

[참고3] option.format을 json 설정시 객체로 변환되며, json과 jsonp의 구별없이 자동 인식됩니다.
[참고4] option의 target이 설정되고 callback 함수의 return 값이 있다면, return 값은 target 요소 내부로 바로 추가됩니다.

RSS / XML
/* 경향신문 전체뉴스 제목 RSS 출력 */
xReader("www.khan.co.kr/rss/rssdata/total_news.xml", "title", function(data) {
    return "<ul>" + data.content.replace(/title/gi, "li") + "</ul>"
}, { target : document.getElementById("exDemoResult5") })
실행하기

FAQ

기타

본 소스는 YQL을 이용하며 open data table을 사용합니다. open data table의 기존 data.headers의 오류 및 확장한 xReader.xml 테이블을 사용합니다. 보다 다양한 기능을 원한다면, xClient(작업중)를 이용하면 되겠습니다.

HISTORY

지원 및 연락처

사용시 문제 및 추가 지원이 필요하다면 oneiroi@outlook.com나 블로그로 연락하시기 바랍니다.

powered by Yahoo! Query Language