jsonp

jsonp（json width padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于service.example.com的网页无法与不是service2.example.com的服务器沟通，而HTML的<script>元素是一个列外。利用<script>圆度开放策略，网页可以等到从其他源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON，而是任意的Javascript，用javascript直译器执行而不是用JSON解析器解析。

使用

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

比如客户访问http://www.baike.baidu.com/myService.aspx?jsonp=callbackFunction

假设客户期待返回的JSON数据：["customername1","customername2"]

那么真正返回到客户端的script Tags:callbackFunction(["customername1","customername2"])

可能的调用方式：

<script type="text/javascript" src="http://baike.baidu.com/myService.aspx?jsonp=callbackFunction">

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

<script type="text/javascript">
function CustomerLoaded(result,methodName){
　　var html='<ul>';
　　for(var i=0;i<result.length;i++){
　　　　html+='<li>'+result[i]+'</li>'
　　}
　　html+='</ul>';
　　document.getElementById('divCustomers').innnerHTML=html;
}
</script>

3.页面展示

<div id="divCustomers"></div>

4.页面最终

 <div id="divCustomers">

 </div>

<script type="text/javascript">
function CustomerLoaded(result,methodName){
　　var html='<ul>';
　　for(var i=0;i<result.length;i++){
　　　　html+='<li>'+result[i]+'</li>'
　　}
　　html+='</ul>';
　　document.getElementById('divCustomers').innnerHTML=html;
}
</script>

<script type="text/javascript" src="http://baike.baidu.com/myService.aspx?jsonp=CustomerLoaded">

Jquery使用

1.getJSON

<script>
$(function(){
　　$.getJSON("http://baike.baidu.com/myService.aspx?jsonp=CustomerLoaded?tags=cat&tagmode=any&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

$.ajax({
　　url:"http://baike.baidu.com/getdata",
　　dataType:'jsonp',
　　data:'id=10',
　　jsonp:'callback',
　　jsonpcallback:'showAge',
　　success:function(){
　　　　//dostuff
　　}

});

function showAge(data){
　　alert(data.age);
}

 3.$.ajax

$.ajax({
type:'GET',
url:'http://172.37.31.1:8080/survey/sample',
dataType:"jsonp",
jsonp:'callback',
//jsonpCallback:'jsonpCallback',
success:function(res){
console.log(res);
}
})

后台通过callback的key值索引到他的value用于包裹数据

 总结使用前端使用jsonp后端必须要后端用一个函数来包裹数据，比较麻烦，还不如后端直接CORS设置

 

参考地址：https://baike.baidu.com/item/jsonp/493658?fr=aladdin