關(guān)于JSONP跨域請(qǐng)求原理的深入解析

更新時(shí)間：2022年01月06日 11:50:58 作者：六葉草~

JSONP(JSON?with?Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題,這篇文章主要給大家介紹了關(guān)于JSONP跨域請(qǐng)求原理的相關(guān)資料,需要的朋友可以參考下

什么是同源策略

同源策略，它是由Netscape提出的一個(gè)著名的安全策略?，F(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。

簡(jiǎn)單來(lái)講，域名，協(xié)議，端口相同。當(dāng)一個(gè)瀏覽器的兩個(gè)tab頁(yè)中分別打開(kāi)來(lái) 百度和谷歌的頁(yè)面。當(dāng)瀏覽器的百度tab頁(yè)執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁(yè)面的，即檢查是否同源，只有和百度同源的腳本才會(huì)被執(zhí)行。如果非同源，那么在請(qǐng)求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問(wèn)。

什么是JSONP

JSONP是JSON with Padding的略稱。它是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）

如何理解上面那句話

我們知道標(biāo)簽中的src屬性既可以請(qǐng)求本地圖片，也可以請(qǐng)求網(wǎng)上資源。也就是說(shuō)html中的src屬性是支持跨域的。同理jsonp跨域請(qǐng)求也是利用src屬性，只不過(guò)用的是標(biāo)簽。

那么我們來(lái)舉例看一下：

先寫一個(gè)html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <title>jsonp請(qǐng)求資源</title>
    <script type="text/javascript" src="./t10.js"></script>
</body>
</html>

在寫一個(gè)js文件：

console.log("我被請(qǐng)求了！");

打開(kāi)控制臺(tái)可以看到：

jsonp實(shí)現(xiàn)了本地?cái)?shù)據(jù)的請(qǐng)求，在這里我們模擬了一下本地請(qǐng)求是怎么實(shí)現(xiàn)的。

如果請(qǐng)求服務(wù)器的數(shù)據(jù)該是怎樣去實(shí)現(xiàn)呢？

了解跨域請(qǐng)求模式：

我們先打開(kāi)百度的搜索頁(yè)面，打開(kāi)控制臺(tái)，點(diǎn)擊Network如下：

然后在頁(yè)面輸入一個(gè)b:

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=jQuery11020022466709590333256_1639545101298&_=1639545101299

關(guān)鍵字：wd=b

這是回調(diào)函數(shù)：

cb=jQuery11020022466709590333256_1639545101298&_=1639545101299

可以看到他的請(qǐng)求方式是GET方式，Jsonp的請(qǐng)求方式默認(rèn)也是GET請(qǐng)求。通過(guò)get方式請(qǐng)求服務(wù)器，服務(wù)器返回的數(shù)據(jù)若是json字符串將自動(dòng)轉(zhuǎn)化為js對(duì)象。所以jsonp是需要服務(wù)器端和客戶端相互配合的。

紅色方框是返回的關(guān)鍵字：

可以發(fā)現(xiàn)，我們并沒(méi)有寫callback方法，jQuery自動(dòng)幫我們封裝了一個(gè)callback方法。我們修改CD為001后發(fā)現(xiàn)它的名字變成了001。

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=001

練習(xí)

獲取請(qǐng)求到的數(shù)據(jù)，并將它們顯示出來(lái)（百度搜索框）。

做法如下：

可以根據(jù)我們輸入的東西動(dòng)態(tài)的創(chuàng)建腳本，然后獲取回調(diào)函數(shù)里面的值的函數(shù)，然后頁(yè)面添加一個(gè)列表把它們顯示出來(lái)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../12-5/js/jquery.js"></script>
    <style>
       input {
            width: 540px;
            height: 40px;
            border: 2px solid #4E6EF2;
        }
       li{
            height: 40px;
            width: 411px;
            line-height: 40px;
            font-size: 16px;
            list-style: none;
        } 
    </style>
</head>
<body>
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
   <div>
    <input type="text" value =''>
   </div>
    <ul></ul>
    <script>
    	//
        function getData(data){
            var script = document.querySelector('#jsonp');
            script.parentNode.removeChild(script);
            $('ul').html('');
            for(var i =0;i<data.g.length;i++){
                $('<li>'+data.g[i].q +'</li>').appendTo('ul');//將獲取到的數(shù)據(jù)加入列表
            }
        }
        //動(dòng)態(tài)生成script腳本
        function getList(wd){
            var script = document.createElement('script');
            script.id = 'jsonp';
            script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd;
            document.body.appendChild(script);
        }
		//給input設(shè)置鍵盤事件。
        //實(shí)現(xiàn)輸入文本后調(diào)用腳本函數(shù)
        var ipt = document.querySelector('input');
        ipt.addEventListener('keyup',function(){
            var wd = this.value;
            getList(wd);
        })
    </script>
</body>
</html>