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文件
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
function ipCallback(data) {
document.write("we get the data is :"+data['ip'])
}
</script>
<script src="http://www.taobao.com/help/getip.php"></script>
</body>
</html>
打开页面你会看到：
test.html
很明显我们成功的进行了跨域请求。咦，怎么这么简单的呀！是的，比没看错是这么简单的。但是你会不会发现一个问题，假如我们想用某个api时，我并不是想像上面那样，一加载页面就获取数据了，我想让用户来确定什么时候来用。那我们改怎么实现呢？
5.改善一下
细心观察，之前的页面是在加载完js就开始调用函数了。那我们先不加载那个api返回js不就行了吗？对的，我们就这样做就可以了，当用户需要的时候再去加载js就可以了。
<html>
<head>
<title>test next</title>
</head>
<body>
<script type="text/javascript">
//定义url
var url = "http://www.taobao.com/help/getip.php"
//定义返回函数
function ipCallback(data) {
alert("we get the data is :"+data['ip'])
}
//定义触发函数
function getNetIp(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.id = 'myjs'
document.body.appendChild(script);
}
</script>
<button onclick="getNetIp()">test</button>
</body>
</html>
点击按钮你会看到这样：
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音乐巅峰榜
返回数据
qq音乐
网友评论