1.關(guān)于跨域
如果兩個(gè)頁面的協(xié)議呕童，端口（如果有指定）和域名都相同，則兩個(gè)頁面具有相同的源夺饲。同一個(gè)頁面訪問不同的源就是跨域。
下面相對(duì)于https://www.cendeal.cn/jluzh/schedule同源檢測(cè)的例例子:
成功
https://www.cendeal.cn/jluzh/me
成功
https://www.cendeal.cn/jx_meeting
失敗,不同協(xié)議 (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.頁面內(nèi)可跨域的資源
像script往声，link，img,iframe等標(biāo)簽的資源是可以跨域的浩销。我們打開一個(gè)頁面加載js,css,圖片等資源都是可以從其他源來獲取的。并不要求我們先把資源存到自己的服務(wù)器慢洋，用戶請(qǐng)求頁面，再從我們的服務(wù)器下載陆盘。在這里jsop利用的就是script的js文件可以跨域請(qǐng)求資源的原理。
3.jsonp處理方式
一般服務(wù)器那邊返回的數(shù)據(jù)都是這樣的xxxCallback(json格式的數(shù)據(jù))隘马。比如，淘寶獲取ip的接口：http://www.taobao.com/help/getip.php
返回?cái)?shù)據(jù)
ipCallback({ip:"xx.xx.xx.xx"})
明顯可以看出來祟霍，如果這是一個(gè)js腳本，那么它就是函數(shù)的調(diào)用沸呐，所以在它應(yīng)該是這樣定義的：
function ipCallback(data){
數(shù)據(jù)處理邏輯代碼
}
4.檢測(cè)一下
準(zhǔn)備一個(gè)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>
打開頁面你會(huì)看到：
很明顯我們成功的進(jìn)行了跨域請(qǐng)求。咦崭添，怎么這么簡單的呀！是的，比沒看錯(cuò)是這么簡單的棘伴。但是你會(huì)不會(huì)發(fā)現(xiàn)一個(gè)問題，假如我們想用某個(gè)api時(shí)焊夸，我并不是想像上面那樣，一加載頁面就獲取數(shù)據(jù)了阱穗，我想讓用戶來確定什么時(shí)候來用。那我們改怎么實(shí)現(xiàn)呢揪阶？
5.改善一下
細(xì)心觀察，之前的頁面是在加載完js就開始調(diào)用函數(shù)了鲁僚。那我們先不加載那個(gè)api返回js不就行了嗎炊苫？對(duì)的冰沙，我們就這樣做就可以了，當(dāng)用戶需要的時(shí)候再去加載js就可以了倦淀。
<html>
<head>
<title>test next</title>
</head>
<body>
<script type="text/javascript">
//定義url
var url = "http://www.taobao.com/help/getip.php"
//定義返回函數(shù)
function ipCallback(data) {
alert("we get the data is :"+data['ip'])
}
//定義觸發(fā)函數(shù)
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>
點(diǎn)擊按鈕你會(huì)看到這樣：
是的，你又成功了!數(shù)據(jù)撞叽，你隨時(shí)都可以拿到了，這個(gè)其實(shí)還有問題的愿棋，就是不停的點(diǎn)擊，f12查看html你會(huì)發(fā)現(xiàn)script標(biāo)簽會(huì)越來越多糠雨，雖然它沒有影響頁面，但是這不是我們想看到的甘邀。所以你可以繼續(xù)改善琅攘，如果感興趣松邪，自己封裝一個(gè)jsonp的工具函數(shù)坞琴，哈哈逗抑。
6.拓展
原理理解了還是看看人家封裝好的jsonp吧寒亥，jquery已經(jīng)把它封裝在ajax里面了，感興趣可以去看看:
ajax文檔:http://www.w3school.com.cn/jquery/ajax_ajax.asp
簡單例子
$.ajax({
url: "http://www.taobao.com/help/getip.php",
type: "GET",//jsonp只有g(shù)et方法
dataType: "jsonp", //這里指定是jsonp方式請(qǐng)求數(shù)據(jù)
success: function (data) {//獲取成功時(shí)調(diào)用
//處理數(shù)據(jù)邏輯
}
});
然后你可以用別人的api寫自己的網(wǎng)頁了溉奕，哈哈。
這里放一個(gè)典型的jsonp格式的QQ音樂巔峰榜
返回?cái)?shù)據(jù)
