跨域访问解决方案:JSONP

本文介绍了使用JSONP解决跨域请求的方法,并提供了具体的前端请求示例和后端响应示例。通过设置回调函数和dataType为jsonp,实现跨域数据交互。

关于什么是跨域请求,可以参见我之前的博文:http://www.cnblogs.com/LiuChunfu/p/5240145.html

上述博文最后有提到解决方案,一直说补充,但是工作忙忘了,直到朋友问起这个问题,协助解决后,才想起来这么一回事。

通常来说跨域请求可以有2种解决方案,一个是利用同域的后台服务器请求后,在转发,二是利用JSONP.

今天只谈谈JSONP,JSONP其中的Padding恰好是包裹的意思。JSONP就是包裹JSON的意思哦,就是在JSON外面包裹一层的意思。

一、前端请求

JSONP类型的请求:

<script type="text/javascript">
            $.ajax({
                url:"http://localhost:8080/JsonTest/servlet/MyJson?callback=run",
                dataType:"jsonp",//关键部分1:指定返回类型为jsonp
                jsonpCallback:"run",//关键部分2:指定回调的方法是run
                success:function(data){
                    console.info(data.name);
                    alert(data.name);
                }
            });
        </script>

二、后台响应

String callback=request.getParameter("callback");
String json="{'name':'LCF'}";
response.getWriter().write(callback+"("+json+")");

这样在前台接收到的被包裹的JSON如下所示:

run({'name':'LCF'})

结合JSONP请求中的关键部分2,明确了回调的方式是run,可以理解为ajax自动的去找到了run包裹的内容。将其中的内容转为JSON对象。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值