도메인이 다르면 원격의 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

티스토리툴바