JSONP是個嘛玩意？解決跨域問題？

阿新 • • 發佈：2020-08-08

瀏覽器同源策略

限制js向其他域名發起請求，瀏覽器除錯報錯如下

JSONP 是一種解決方法

瀏覽器不會阻止帶有src屬性的標籤發請求。所以可以常用的<script src="xxxxx"></script> 來發請求

但是：返回的資料(字串)需要符合js的語法。而服務端則專門做了支援。比如就返回 functionName(arg...)

這種方案就稱為JSONP

例如某電視臺查詢最近節目單的介面就做了支援：

http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403
介面返回字串：list({data:[xxxx......]}) 
 
這個字串放到js裡面就可以解析為可以執行的動作，並且引數包含了服務端想提供給客戶端的資料，前端只要有list這個js函式就可以對獲取到的資料自行處理

例：普通js 建立<scrript src='' ></script> 標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-2.2.3.min.js"></ 
script>
</head>
<body>
    <h1>從後臺獲取結果</h1>
    {{ result }}
    <h1>前端js直接向其他域名發起get請求</h1>
    <input type="button" value="點擊發起js請求" onclick="getContent();"/>
    <div id="container"></div>
</body>
    <script>
        function getContent(){
             
//////////普通js發起jsonp////////////////
            // 利用js向查詢天氣介面發請求，介面返回的為js 的函式字串，並且在函式中傳參
            // 瀏覽器不會阻止 帶有src 屬性的標籤發get請求，從而實現跨域請求
            let tag = document.createElement('script');
            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
            document.head.appendChild(tag);
            // 向瀏覽器增加元素後，含有src屬性會立即傳送get請求到目標網站
            // 返回資料為符合js語法的函式：如list({data:[({data:xxx,,,,,,,）自己的js中必須提前建立好這個函式來獲取資料做對應的處理
            // 標籤增加獲取到資料後，後立即刪除此標籤即可
            document.head.removeChild(tag);
        }
        // 建立支援jsonp的介面返回的函式
        function list(arg) {
            console.log(arg)
        }

    </script>
</html>

點選按鈕發請求，檢視獲取到的資料

ajax 發起跨域請求

引數說明：

dataType: 'jsonp',  //資料型別
jsonp:'callback',   // 表示傳送請求的時候傳給後端url中的查詢引數名
jsonpCallback: 'list' // 表示傳送請求的時候傳給後端url中的查詢引數名對應的值
// jsonp 和jsonpCallback 的值組合在url中 相當於在url中加了?callback=list
最後發請求的實際url地址類似：http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1596885252309

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-2.2.3.min.js"></script>
</head>
<body>
    <h1>從後臺獲取結果</h1>
    {{ result }}
    <h1>前端js直接向其他域名發起get請求</h1>
    <input type="button" value="點擊發起js請求" onclick="getContent();"/>
    <div id="container"></div>
</body>
    <script>
        function getContent(){

            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
                type:'POST',
                dataType: 'jsonp',
                jsonp:'callback',   // 表示傳送請求的時候傳給後端url中的查詢引數名
                jsonpCallback: 'list' // 表示傳送請求的時候傳給後端url中的查詢引數名對應的值
                // jsonp 和jsonpCallback 的值組合在url中 相當於在url中加了?callback=list
            })
        }
        // 建立支援jsonp的介面返回的函式
        function list(arg) {
            console.log(arg)
        }

    </script>
</html>