淺析JS中的跨域請求-圖解加實例(JSONP篇)

何爲跨域

簡單來講就是js與異源頁面進行通訊，正常狀況不容許js進行跨域通訊的緣由是其同源策略。

JSONP

黨咱們使用XHR去得到異源的數據時，就會形成跨域請求。JSONP(JSON Padding)即填充式JSON能夠來解決這樣的問題。

實現原理：雖然咱們不能直接請求異源上的資源，可是在js中如img，script標籤倒是能夠獲得其餘服務器上的資源的，那麼咱們就能夠經過這樣的方式將一段js代碼間接地從外部引入。經過script標籤向目標源發起一個GET請求，服務器根據請求的參數返回包含js的代碼，請看下圖：

//本地代碼
<script>
    function getData(obj) {
        var data = JSON.parse(obj);
        console.log(data.name);//jiavan
        console.log(data.age);//20
    }
</script>
<script src="http://cv.jiavan.com/test/data.php?callback=getData"></script>

//服務器上的代碼
<?php
    $func = $_GET['callback'];
    $data = '{"name": "jiavan", "age": 20}';
    echo $func."(".$data.");";
?>

先在本地定義了一個函數，這是用來處理來自服務器上數據的函數，下面用一個script標籤，而且向服務器發起了一個GET請求，而且指定了處理數據的回調函數，即上方的getData，服務器收到請求後返回了getData('{"name": "jiavan", "age": 20}');，即便一段js代碼，將數據傳入到回調函數中處理，這樣便完成了跨域。

總結：JSONP是很常見的處理跨域的方法，可是這種方式 只能是GET類型的請求而且須要服務器配合，這樣才能完成跨域，可是它的優勢就是實現比較簡單而且對低版本瀏覽器支持都很好。

原文出處 https://github.com/Jiavan/jia... 以爲對你有幫助就給個star吧