落后就要挨打,爱拼才会赢。有限的生命也可以创造奇迹,只要每天都有进步!
有一种拼博叫坚持...

首页>>JavaScript>>JSONP方式跨域获取JSON数据原理

JSONP方式跨域获取JSON数据原理

1) 什么是JSONP? 

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

2) 如何使用JSONP?

1. 在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。

比如客户想访问http://www.thisuc.com/jsonp.php?jsonp=callbackFunction

假设客户期望返回JSON数据:[“customername1″,”customername2″]

那么直正返回到客户端的Script Tags: callbackFunction([“customername1″,”customername2″])

可能的调用方式:        

<script type=”text/javascript” src=”http://www.thisuc.com/jsonp.php?jsonp=callbackFunction  ” />

2. 在客户端写callbackFunction函数的实现

<script type=”text/javascript”>

function onCustomerLoaded(result, methodName)

{

var html = ‘<ul>’;

for(var i = 0; i < result.length; i++)

{

html += ‘<li>’ + result + ‘</li>’;

}

html += ‘</ul>’;

document.getElementById(‘divCustomers’).innerHTML = html;

}

</script>

3. 页面展示

<div id=”divCustomers”></div>

4. 最终Page Code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head>

<title>Top Customers with Callback</title>

</head>

<body>

<div id=”divCustomers”></div>

<script type=”text/javascript”>

function onCustomerLoaded(result, methodName)

{

var html = ‘<ul>’;

for(var i = 0; i < result.length; i++)

{

html += ‘<li>’ + result + ‘</li>’;

}

html += ‘</ul>’;

document.getElementById(‘divCustomers’).innerHTML = html;

}

</script>

<script type=”text/javascript” src=”http://www.thisuc.com/jsonp.php?jsonp=callbackFunction  “></script>

</body>

</html>

3) JSONP在JQuery中如何体现的 

1. $.getJSON

<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;

});

});

});

</script>

jsoncallback=?,其中?会自动替换为function(data)函数。

2. $.ajax

</head>
<script type=”text/javascript”>
jQuery(document).ready(function(){
$.ajax({
type : “GET”,
url : “http://dedecms/kuayu.php?callback=?”,
dataType : “jsonp”,
jsonp: ‘callback’,
success : function(json){
$(‘#msg_box’).html(json.msg);
return true;
},
error:function(){
alert(‘fail’);
}
});
});
</script>
<body>
<div id=”msg_box”>sdfsdfdsf</div>
</body>

kuayu.php页面内容:
<?php
$callback = $_GET[‘callback’];
$arr=array(‘msg’=>’chengxianju ‘);
echo $callback.'(‘.json_encode($arr).’)’;
exit();
?>

 

4)Yclass中如何使用Jsonp
function showCom(showid) {
var showurl = showhost+”/port/interface/request.php?cid=2306&callback=sdcallback&showid=”+showid+”&rnd=”+(+new Date);
window.sdcallback = function(data) {
if(data[‘header’][‘code’] == 1) {
var ding = data[‘data’][‘upnum’],
cai = data[‘data’][‘downnum’],
detailurl = showhost + ‘/show/show_detail.php?id=’ + showid,
comment = data[‘data’][‘commentnum’];
Y.get(‘#showcom’).html(‘<span>顶(‘+ ding +’)</span>\
<span>|</span>\
<span>踩(‘+ cai +’)</span>\
<span>|</span>\
<a href=”‘+ detailurl +'”>查看详情</a>\
<span>|</span>\
<span>评论(‘+ comment +’)</span>’);
}
}
Y.use(showurl);
}

在需要的地方调用showCom()函数即可

什么是JSONP协议? 

JSONP
即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域
请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递
javascript对象。这种跨域的通讯方式称为JSONP。

很明显,JSONP是一种脚本注入(Script Injection)行为,需要特别注意其安全性。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运
行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

 

« 上一篇: 下一篇:»

相关文章:



2 条评论 (我要评论)

发表评论

You must be logged in to post a comment.