【Web全棧課程5】jsonp簡單使用

時間 2019-12-05

原文原文鏈接

jsonp

因爲安全緣由（過於開放），使用在減小，能夠用來跨域
以百度的一個請求舉例,說明如何使用jsonp：
javascript

"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&json=1&p=3&sid=1458_25809_26911_21115_26350_26924_20719&req=2&csor=1&cb=jQuery11020985645405885194_1532486329485&_=1532486329488"html

wd：請求關鍵字
cb：callback，回調方法

原理

準備一個回調函數等着接口回調，回調的的時候傳參，進行數據傳遞從而實現跨域。java

Q: 爲何cb指定的是回調函數,wd是請求關鍵字?
是由後臺指定的,也能夠是其餘的參數,服務器和後臺約定好便可. 這裏百度正好定義的是wd和cb.json

用法示例

一、改造百度url的回調方法爲show，"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=show"
能夠看到上面url對應的是js代碼，是一個show函數調用。
跨域

二、根據參數形式，咱們簡單實現本地引用回調show函數來進行演示
baidu_data.js文件安全

show({q:"s",p:false,s:["世界盃","世界盃賽程","順豐快遞單號查詢","聖墟","三國殺","雙色球","搜狗輸入法","搜狗","上海天氣","生死狙擊"]});

jsonp.html文件服務器

<script>
    function show(params){
        alert(params.s);
    }
</script>
<script charset="utf-8" src="./baidu_data.js"></script>

三、將本地引用換成咱們改造的百度的url"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=show"，是和上面同樣的結果。app

<script charset="utf-8" src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=show"></script>

四、進階
script是一次性標籤，src只能賦值一次，再賦值不會被改變;如下示例每次移除老的script,新建一個script標籤用於動態獲取數據.函數

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=show";
        function show(json) {
            let oUl = document.getElementById('ul');
            oUl.innerHTML = '';
            // 將結果顯示在列表中
            json.s.forEach(item=>{
                let oLi = document.createElement('li');
                oLi.innerHTML = item;
                oUl.appendChild(oLi);
            });
        }
        window.onload=function(){
            let oTxt = document.getElementById('txt1');
            oTxt.oninput = function(){
                // 移除老的用於獲取數據的script標籤
                let oldScript = document.getElementById('dynamic-script');
                if (oldScript){
                    document.head.removeChild(oldScript);
                }
                // 每次新建一個新的script標籤用於更新src
                let newScript = document.createElement('script');
                newScript.id = 'dynamic-script'
                newScript.src =  `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(oTxt.value)}&cb=show`;
                document.head.appendChild(newScript);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="txt1">
    <ul id="ul"></ul>
</body>
</html>