/**
* jsonp : 외부에서 데이터를 가져오지 못하는 json의 한계를 커버해주는 형식
*/
jq14.js
$(document).ready(function() {
$("#btn1").click(aa);
$("#btn2").click(bb);
});
function aa() {
$.ajax({
url : "http://192.168.0.191/basicweb2/jq14.jsp",
dataType : "jsonp",
jsonp : "callback", // url로 넘겨주는 변수가 된다.
success : function(data) {
var re = data.datas;
var imsi = "";
$(re).each(function(index, entry) {
imsi = $("<div>" + entry.no + " - " + entry.name + "</div>");
$("#disp").append(imsi);
});
},
error : function(e) {
alert(e.responseText);
}
});
}
function bb() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
tags : "mount rainier",
tagmode : "any",
format : "json"
}).done(function(data) {
$.each(data.items, function(i, item) {
$("<img>").attr("src", item.media.m).appendTo("#dispImage");
if (i === 3) {
return false;
}
});
});
}
========================================================================================
jq14_jsonp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jq14.js"></script>
<body>
** 다른 도메인 서버의 자료 읽기 **<br/>
<button id="btn1">연습1</button><br/>
<button id="btn2">연습2</button><br/>
<hr>
<div id="disp"></div>
<div id="dispImage"></div>
</body>
</head>
$(document).ready(function(){
$.ajax("http://me2day.net/api/get_posts/jypnyc.json",{
dataType:"jsonp",
success:function(data){
$.each(data, function(index, item){
var a = $("<b></b><br>").html(item.author.id);
var b = $("<img />").attr("src",item.author.face);
var c = $("<img />").attr("src",item.author.icon);
var d = $("<p></p>").html(item.pubDate);
var e = $("<p></p>").html(item.body);
var f = $("<img />").attr("src",item.media.photoUrl);
$("<div></div>").append(a,b,c,d,e,f).appendTo("#disp");
});
},
error:function(){
alert(e.resposeText);
}
});
});
========================================================================================
jq15_jsonp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
margin: 5px;
padding: 10px;
border-style: solid;
border-color: #eeeee;
border-radius: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jq15.js"></script>
</head>
<body>
<h1>jsonp 연습(미투데이)</h1>
<div id="disp"></div>
</body>
</html>
'AJAX' 카테고리의 다른 글
| Ajax DOM 관련 필수 키워드 (0) | 2014.04.07 |
|---|---|
| jquery로 여러개 데이터 파싱하기 : each (0) | 2014.03.27 |
| ajax의 jason,xml,text 출력 비교 (0) | 2013.08.08 |
| AJAX 기본 예제3 POST (회원가입양식에서 바로 검증) (0) | 2013.08.01 |
| AJAX 기본 예제2 GET방식(예제1보다 심플) (0) | 2013.08.01 |