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),就这么神奇的完成了

希望对你们有帮助。