同源策略 及 jsonp

同源是指兩個站點同協議,同端口,同域名。

同源策略規定:不同域的客戶端腳本在沒有明確授權的情況下,不能讀寫對方資源。


但是,在數據傳輸過程中,經常會發生跨域的數據交換,那麼如何解決這個問題呢。。就利用到了一些支持跨域傳輸的標籤(比如<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就像周杰和周杰倫一樣,沒有半毛錢關係!!)

原理說完了,接下來上代碼!!

var ajaxUrl = "http://192.168.8.141:9092/project/rest/team/matchResult/1/20/1/1000";


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);


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章