jsonp是一个比较常见的跨域解决方法,这篇博客使用来详解它的用法以及实现原理
1.实现原理
<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行,这种性质致使我们可以通过<script>标签来实现jsonp跨域
2.实现模式
假设A网站需要获取B网站中的某些数据
程序B
//调用callback函数,并以json数据形式作为阐述传递,完成回调
callback({message:"success"});
程序A
<script type="text/javascript">
//回调函数
function callback(data) {
alert(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:20002/test.js"></script>
JSONP的简单实现模式:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。
3.JQuery对JSONP的实现
JQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
alert(data.name + " is a a" + data.sex);
});
</script>
要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看,比如jQuery17207481773362960666_1332575486681
如果想要加入自己的回调函数名,或者服务规定了回调函数名,可以使用$.ajax方法
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://localhost:20002/MyService.ashx?callback=?",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
alert(data.name + " is a a" + data.sex);
}
});
</script>