之前只知道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),就这么神奇的完成了
希望对你们有帮助。