聊聊可跨域的jsonp的原理

1.关于跨域

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。同一个页面访问不同的源就是跨域。
下面相对于https://www.cendeal.cn/jluzh/schedule同源检测的例例子:

成功
https://www.cendeal.cn/jluzh/me
成功
https://www.cendeal.cn/jx_meeting
失败,不同协议 (https和http)
http://www.cendeal.cn/jluzh/schedule
失败,不同端口(8080和80)
https://www.cendeal.cn:8080/jluzh/schedule
失败,不同域名 ( news和store )
https://gz.cendeal.cn/jluzh/schedule

2.页面内可跨域的资源

像script，link，img,iframe等标签的资源是可以跨域的。我们打开一个页面加载js,css,图片等资源都是可以从其他源来获取的。并不要求我们先把资源存到自己的服务器，用户请求页面，再从我们的服务器下载。在这里jsop利用的就是script的js文件可以跨域请求资源的原理。

3.jsonp处理方式

一般服务器那边返回的数据都是这样的xxxCallback(json格式的数据)。比如，淘宝获取ip的接口：http://www.taobao.com/help/getip.php
返回数据

ipCallback({ip:"xx.xx.xx.xx"})

明显可以看出来，如果这是一个js脚本，那么它就是函数的调用，所以在它应该是这样定义的：

function ipCallback(data){
    数据处理逻辑代码
}

4.检测一下

准备一个test.html文件

打开页面你会看到：

test.html

很明显我们成功的进行了跨域请求。咦，怎么这么简单的呀！是的，比没看错是这么简单的。但是你会不会发现一个问题，假如我们想用某个api时，我并不是想像上面那样，一加载页面就获取数据了，我想让用户来确定什么时候来用。那我们改怎么实现呢？

5.改善一下

细心观察，之前的页面是在加载完js就开始调用函数了。那我们先不加载那个api返回js不就行了吗？对的，我们就这样做就可以了，当用户需要的时候再去加载js就可以了。

 
  
 
 
 
  
   test
 

点击按钮你会看到这样：

test2.html

是的，你又成功了!数据，你随时都可以拿到了，这个其实还有问题的，就是不停的点击，f12查看html你会发现script标签会越来越多，虽然它没有影响页面，但是这不是我们想看到的。所以你可以继续改善，如果感兴趣，自己封装一个jsonp的工具函数，哈哈。

6.拓展

原理理解了还是看看人家封装好的jsonp吧，jquery已经把它封装在ajax里面了，感兴趣可以去看看:
ajax文档:http://www.w3school.com.cn/jquery/ajax_ajax.asp
简单例子

$.ajax({
        url: "http://www.taobao.com/help/getip.php",
        type: "GET",//jsonp只有get方法
        dataType: "jsonp", //这里指定是jsonp方式请求数据
        success: function (data) {//获取成功时调用
        //处理数据逻辑
        }
    });

然后你可以用别人的api写自己的网页了，哈哈。
这里放一个典型的jsonp格式的QQ音乐巅峰榜

https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_opt.fcg?page=index&format=html&v8debug=1&jsonCallback=jsonCallback

返回数据

qq音乐