JSONP 跨域请求

JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题

由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通(会被拦截),而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

使用

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

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

<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').innerHTML=html;
}
 
</script>
体现:
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>
&2.     $.ajax
$.ajax({
dataType:'jsonp',
data:'id=10',
jsonp:'jsonp_callback',
success:function(){
//dostuff
},
});
 
 ***************************************************************************************
 ***************************************************************************************
 ***************************************************************************************
注意,以下内容转自可参考 https://www.cnblogs.com/chiangchou/p/jsonp.html
第一种:
<!--使用script解决跨域-->
<script>
function showData(result){
var data = JSON.stringify(result)
$("#text").val(data);
}
$(document).ready(function(){
$("#btn").click(function(){
$("head").append("<script src='http://localhost:9090/student?callback=showData'></script>")
})
})
//服务端:
//前端传过来的回调函数名称
//String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了
//result = callback + "(" + result + ")";
</script>

第二种:
<!--jquery 的jsonp方式跨域请求-->
<script>

        function showData (data) { 
              console.info("调用showData");

            var result = JSON.stringify(data);
                $("#text").val(result);
         }


$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
url:"http://localhost:8080/student",
type:"GET",
dateType:"jsonp",//指定服务器返回的数据类型
jsonpCallback:"showData",//指定回调函数名称(可选参数)//看调用结果,发现,请求时带的参数是:callback=showData;调用回调函数的时候,先调用了指定的showData,然后再调用了success
success:function (data) {
var result = JSON.stringify(data);
$("#text").val(result);
}
})
})
})
</script>

第三种:
 $(document).ready(function(){
$("#btn").click(function(){
$.ajax({
url:"http://localhost:8080/student",
type:"GET",
dateType:"jsonp",//指定服务器返回的数据类型
jsonp:"theFunction",//指定参数名称
jsonpCallback:"showData",//指定回调函数名称(可选参数)
success:function (data) {
var result = JSON.stringify(data);
$("#text").val(result);
}
})
})
})

指定callback这个名称后,后台也需要跟着更改。
服务器:  

   //前端传过来的回调函数名称
  String callback = request.getParameter("theFunction");
  //用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了
   result = callback + "(" + result + ")";

最后看看jsonp是否支持POST方式:ajax请求指定POST方式

  可以看到,jsonp方式不支持POST方式跨域请求,就算指定成POST方式,会自动转为GET方式;而后端如果设置成POST方式了,那就请求不了了。

  jsonp的实现方式其实就是<script>脚本请求地址的方式一样,只是ajax的jsonp对其做了封装,所以可想而知,jsonp是不支持POST方式的。

再补充一点,回到第一条:CORS头缺少“Access-Control-Allow-Origin”。

  有时候你会发现其它都没问题,出现这个错误:这个错误代表服务端拒绝跨域访问。如果出现这个错误,就需要在服务端设置允许跨域请求。

  response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问

后台代码添加:

// * 表示允许任何域名跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名可以访问
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

总结:jQuery ajax方式以jsonp类型发起跨域请求,其原理跟<script>脚本请求一样,因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合,设置callback,才能完成跨域请求。 

注意,转自可参考 https://www.cnblogs.com/chiangchou/p/jsonp.html
 
原文地址:https://www.cnblogs.com/dzj1/p/10767805.html