【Web全栈课程5】jsonp简单使用

朴有天虹

2019-06-28

jsonp

由于安全原因（过于开放），使用在减少，可以用来跨域
以百度的一个请求举例,说明如何使用jsonp：
【Web全栈课程5】jsonp简单使用

"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"

wd：请求关键字
cb：callback，回调方法

原理

准备一个回调函数等着接口回调，回调的的时候传参，进行数据传递从而实现跨域。

Q: 为什么cb指定的是回调函数,wd是请求关键字?
是由后台指定的,也可以是其他的参数,服务器和后台约定好即可. 这里百度正好定义的是wd和cb.

用法示例

1、改造百度url的回调方法为show，"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=show"
可以看到上面url对应的是js代码，是一个show函数调用。
【Web全栈课程5】jsonp简单使用

2、根据参数形式，我们简单实现本地引用回调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>

【Web全栈课程5】jsonp简单使用

3、将本地引用换成我们改造的百度的url"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=show"，是和上面一样的结果。

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

4、进阶
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>

jsonp 脚本