Jsonp(
JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的
JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON
解析器解析。
JSONP是一个非官方的
协议,它允许在服务器端集成Script tags返回至客户端,通过
javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
JQuery下:
class="custom_num para-list list-paddingleft-1">
-
$.getJSON
1
2
3
4
5
6
7
8
9
10
11
monospace !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; float: none !important; height: auto !important; line-height: 1.3em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; vertical-align: baseline !important; width: auto !important; background: none !important;" class="js plain"><script>
????
$(document).ready(
function
() {
????????
$.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
,
????????
function
(data) {
????????????
$.each(data.items,
????????????
function
(i, item) {
????????????????
$(
"<img/>"
).attr(
"src"
, item.media.m).appendTo(
"#images"
);
????????????????
if
(i == 3)
return
false
;
????????????
});
????????
});
????
});
jsoncallback=?,其中?会自动替换为function(data)函数。
?
2. $.ajax
1
2
3
4
5
6
7
8
9
$.ajax({
????
dataType:
'jsonp'
,
//数据类型为jsonp?
????
data:
'id=10'
,
????
jsonp:
'jsonp_callback'
,
?//服务端用于接收callback调用的function名的参数
????
url:
'http://www.yiwuku.com/getdata'
,
????
success:
function
() {
????????
????
},
});