同源是指兩個站點同協議,同端口,同域名。
同源策略規定:不同域的客戶端腳本在沒有明確授權的情況下,不能讀寫對方資源。
但是,在數據傳輸過程中,經常會發生跨域的數據交換,那麼如何解決這個問題呢。。就利用到了一些支持跨域傳輸的標籤(比如<script>、<img>等)
<script type = "text/javascript" src = "http://www.pp.com/alert.js"></script>
既然他可以跨域傳輸,那麼如果引用的"www.pp.com/alert.js"中有
test();
kuayu();
那麼,它執行的順序就是,先執行test(),在執行kuayu();
這是,如果你自己的頁面有個函數
function kuayu(){
alert("lalala");
}
那麼因爲是引用進來的。然後他走test(),然後執行kuayu(),所以就彈出lalala!了。
如果這個方法有形參的話,那麼,這個形參就可以了當做載體,來傳遞我們想傳遞的值了!
function kuayu(json){
alert("我獲取到了 跨域值"+ json );
}
-----------------------
pp.com/alert.js .....
.....
....
kuayu("我是數據,我想跨域,在那邊看到我了嗎?");
-----------------------------------------------------------
最終輸出 我獲取到了跨域值, 我是數據,我想跨域,在那邊看到我了嗎?
ok,以上就是其的基本思想
那麼,什麼jsonp呢?jsonp就是一種爲了解決跨域的數據交換而衍生出來的一種協議。jsonp只可實現get的傳輸方式。
(jsonp和json就像周杰和周杰倫一樣,沒有半毛錢關係!!)
原理說完了,接下來上代碼!!
function localHandler(data) {
console.log("fengshu")
console.log(data);
}
var ajaxParam = {
async: false,
url: ajaxUrl,
type: "GET",
dataType: 'jsonp',//非正式跨域傳輸協議
jsonp: 'localHandler',
success: function (json) {
//回調數據在localHandler處理
}
};
$.ajax(ajaxParam);