Jsonp原理+百度搜索框

最新推荐文章于 2022-04-17 09:05:53 发布

大春爱吃胡萝卜

最新推荐文章于 2022-04-17 09:05:53 发布

阅读量286

点赞数 1

本文链接：https://blog.csdn.net/zzzzzzz823/article/details/88760465

版权

Jsonp原理+百度搜索框

由于浏览器同源策略的限制，不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。
但是在实际项目中经常需要跨域进行访问，Jsonp就是一种很好的解决跨域问题的方法。

Jsonp原理

1.Web页面上用script标签引入JS文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如script、img、iframe）
2.于是我们把数据放到服务器上，并且数据为json格式（因为Js可以很轻松地处理json数据）
3.因为我们无法监控通过script的src属性是否把数据获取完成，所以我们需要进行一个处理。
4.实现定义好处理跨域获取数据的函数，如function doJSON（data）{}
5.用src获取数据的时候添加一个参数cb=‘doJSON’（服务器会根据参数cb的值返回对应的内容）此内容为以cb对应的值doJSON为函数真实要传递的数据为函数的参数的一串字符如doJSON（‘数据’）。

百度搜索框

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }

    .wrapper{
        margin: 100px;
    }
    input{
        width: 400px;
        height: 34px;
    }
    ul{
        display: none;
        width: 400px;
        border: 1px solid #ccc;
    }
    li:hover{
        background: #ddd;
    }
    a{
        font-size: 14px;
        color: #999;
        margin: 5px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <input type="text">
        <ul></ul>
    </div>
    <script>
        var oInput = document.getElementsByTagName('input')[0],
            oUl = document.getElementsByTagName('ul')[0];
        oInput.oninput = function () {
            var value = this.value;
            console.log(value);
            var oScript = document.createElement('script');
            oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=doJson';
            document.body.appendChild(oScript);
            document.body.removeChild(oScript);
        }
        function doJson (data) {
            var s = data.s,
                str = '';
            if (s.length > 0){
                s.forEach(function(ele, index) {
                    str += '<li><a href = https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=' + ele +'>' + ele + '</a></li>';
                })
                oUl.innerHTML = str;
                oUl.style.display = 'block';
            }else {
                oUl.style.display = 'none';
            }
        }
    </script>
</body>
</html>

附：本文仅是个人学习记录，谢绝转载！

大春爱吃胡萝卜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jsonp原理+百度搜索框

Jsonp原理+百度搜索框由于浏览器同源策略的限制，不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。但是在实际项目中经常需要跨域进行访问，Jsonp就是一种很好的解决跨域问题的方法。Jsonp原理1.Web页面上用script标签引入JS文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如script、img、iframe）2...
复制链接

扫一扫