외부의 오픈API가 callback을 지원하지 않으면 JSONP방식을 사용할 수 없습니다.

이런 경우 로컬의 도메인으로 세탁해주는 기능이 필요하고, 이 방식을 Proxy라고 얘기합니다.


간단한 샘플코드입니다.


package net.okjsp.ajax;


import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

import java.net.MalformedURLException;

import java.net.URL;

import java.net.URLConnection;


public class Proxy {

public static void main(String[] args) throws Exception {

String sb = Proxy.getSource("http://okjsp.tistory.com/rss");

System.out.println(sb);

}


public static String getSource(String string) throws MalformedURLException,

IOException {

URL url = new URL(string);

URLConnection yc = url.openConnection();

BufferedReader in = new BufferedReader(new InputStreamReader(

yc.getInputStream()));

String inputLine;

StringBuilder sb = new StringBuilder();

while ((inputLine = in.readLine()) != null) {

sb.append(inputLine).append("\n");

}

in.close();

return sb.toString();

}


}


proxy.jsp 입니다.

<%@page import="net.okjsp.ajax.Proxy"

%><%@ page contentType="text/plain; charset=utf-8"

    pageEncoding="UTF-8"

%><% 

String url = request.getQueryString();

%><%= Proxy.getSource(url) %>


이것을 호출하는 javascript입니다.

<!DOCTYPE html>

<html>

<head>

<title>AjaxProxy</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function() {

$.ajax({

/* url : "http://www.marinetraffic.com/map/getjson/sw_x:125.62/sw_y:36.52/ne_x:128.02/ne_y:37.14/zoom:10/fleet:/station:0/id:null", 

*/

url : "proxy.jsp?http://www.marinetraffic.com/map/getjson/?",

dataType : "json",

data : {

sw_x : 125.62,

sw_y : 36.52,

ne_x : 128.02,

ne_y : 37.14,

zoom : 10,

station : 0,

id : 'null'

},

success : function(vessel) {

$.each(vessel, function(key, value) {

$("#result").append(value + '\n');

})

},

error : function(xhr, status, error) {

$("#result").append(error);

            }

});

});

</script>

</head>

<body>

<pre id="result"></pre>

</body>

</html>


간단한 이클립스 프로젝트 첨부합니다.

ajaxproxy.zip


저작자표시

도메인이 다르면 원격의 JSON데이터를 가져올 수 없습니다. 그래서 JSON 데이터를 제공해 주는 쪽에서 사용하려는 사이트의 callback 함수명을 파라미터로 받아서 JSON데이터를 감싸주는 기능을 제공합니다. JSON with Padding 줄여서 JSONP 방식이라고 합니다.


클라이언트 쪽의 간단한 코드입니다. Daum Open API 를 이용해서 데이터를 가져옵니다.

Daum Open API 월 3억 호출 축하합니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>title</title>

<style type="text/css">

#banner-message {

}

#banner-message img {

    width: 200px;

    border-radius: 5px;

}

</style>

</head>

<body>

<div id="banner-message">melong</div><div id="button-container"><button>hello</button></div>

<script type="text/javascript">

function parse(obj) {

var items = obj.channel.item;

var tag = '';

for(var idx in items) {

tag += '<img src="'+items[idx].image+'">';

}

document.getElementById('banner-message').innerHTML = tag;

} 


function rawJSXHR() {

var xhr = document.createElement('script');

xhr.src = 'http://apis.daum.net/search/image?q=snsd&apikey=3803541fce89370275fcefe628ed9f9acafe223e&output=json&callback=parse';

document.getElementsByTagName('head')[0].appendChild(xhr)

}

// apikey는 향후 바꿀 수 있으니 http://dna.daum.net의 나의API에서 발급받으세요.

rawJSXHR();

</script>


</body>

</html>


저작자표시

+ Recent posts

티스토리툴바