JSONP

之前只知道json,今天在了解ajax跨域访问时,看到很多文章里都提到了JSONP

那么JSONP是什么呢?

百度百科给出的解释如下:

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

原理是什么呢?


以百度的搜索框提示为例:

"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+关键字+"&cb="+callback函数名

如果要在自己的页面里用ajax请求上面这个url,则可以运用JSONP

<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=callback"></script>
直接在浏览器里输入
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=callback

浏览器得到

callback({q:"a",p:false,s:["爱奇艺","阿里云","阿里巴巴","安居客","阿黛尔","艾力绅","奥迪a7","acfun","昂克赛拉","艾弗森"]});

经过测试,你会发现cb参数的值就是返回的函数名,比如上例callback

继续说这个之前首先说一下<script>的工作原理

<script>常见的有两种写法:

①<script>function callback(){...}</script>

②<script src="url"></script>

第二种方式,实际上是请求url得到内容,放在<script>标签之间,和第一种方式本质上一样

回到我们的问题

<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=callback"></script>

上面的写法,实际上会先请求src指定的url

得到

callback({q:"a",p:false,s:["爱奇艺","阿里云","阿里巴巴","安居客","阿黛尔","艾力绅","奥迪a7","acfun","昂克赛拉","艾弗森"]});

注意:

我们当然可以在服务端决定返回的数据是什么格式(不过一定是一个函数名加一个括号,括号里面的内容自己决定,并不一定是上面的Javascript的object).

放到<script>标签之间就变成

<script>
callback({q:"a",p:false,s:["爱奇艺","阿里云","阿里巴巴","安居客","阿黛尔","艾力绅","奥迪a7","acfun","昂克赛拉","艾弗森"]}

</script>

那么如果我们提前在<script>里写了函数如下

<script>
function callback(obj){
.....
}
</script>

神奇的事情发生了

callback是一个函数

那么这段代码

<script>
callback({q:"a",p:false,s:["爱奇艺","阿里云","阿里巴巴","安居客","阿黛尔","艾力绅","奥迪a7","acfun","昂克赛拉","艾弗森"]}
</script>

就是调用了callback函数,并且就上面的例子而言传入的参数是Javascript的Object

我们只要在callback函数里,来处理这个对象就好了

至此,我们的ajax跨域访问(通过JSONP),就这么神奇的完成了

希望对你们有帮助。







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值