jsonp跨域

跨域问题

什么情况下会发生跨域：
 
当本机请求服务器上数据的时候：会发生跨域；
 
当本地服务器请求其他服务器数据的时候回发生跨域；
 
跨域怎么处理那？

1.为什么有跨域

    同源策略：基于浏览器的安全考虑，浏览器各个厂商之间出现了一个约定，这个约定叫做同源策略。这个约定的主要内容就是，域和域之间数据不共通。
    
    所谓同源是指：协议、域名、端口相同

2.跨域的用途

当网站发展壮大到一定地步的时候，会建立很多的节点，各个节点的IP是不同的，所以跨域问题就会出现。
 
当测试阶段数据和本机的IP不通用的时候，那么跨域问题也会发生。
 

3.为什么要跨域。

 
    因为要获得其他域中的数据；

4.前端的跨域方法

 JSONP：就是利用浏览器对html标签（如：a，img，link，script等）没有做跨域请求限制的情况，使用script加载跨域接口的url。
 JSONP是伟大程序员与安全策略的斗争中发明的；
 JSONP就是在URL中调用function；
 

 jsonp的封装：function jsonp(url,success,data){    data = data || {};

var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }
　　 var d = new Date();
　　d.setDate(d.getDate()+3);

    var script = document.createElement("script");
    script.src = url + "?" + str +"__wzqT=" + d;
    document.body.appendChild(script);

    window[data[data.columnName]] = function(res){
        success(res);
    }
}

 

这里用百度的接口做的demo，在服务器下运行：
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
        <style>
                      *{
                margin:0;
                padding: 0;
            }
    
    
            #search{
                width: 600px;
                margin:0 auto;    
                margin-top: 100px;
                position: relative;
            }
            #search input{
    
                width: 480px;
                height: 100%;
                border: 1px solid #b6b6b6;
                height: 20px;
                padding: 9px 7px;
                font: 16px arial;
                border: 1px solid #b8b8b8;
                border-bottom: 1px solid #ccc;
                border-right: 0;
                vertical-align: top;
                outline: none;
                box-shadow: none;
                -webkit-appearance: textfield;
                background-color: white;
                -webkit-rtl-ordering: logical;
                user-select: text;
    
            }
    
            #search button{
                cursor: pointer;
                box-sizing: border-box;
                width: 97px;
                   height: 40px;
                line-height: 38px;
                padding: 0;
                border: 0;
                background: none;
                background-color: #38f;
                font-size: 16px;
                color: white;
                box-shadow: none;
                font-weight: normal;
                 margin-left: -20px;
            }
            
            .result{
                position: absolute;
                
                padding: 9px 7px;
                background: #ddd;
    
            }
    
            .search-res{
                position: absolute;
                top: 100%;
                left: 0;
                width: 480px;
                border: 1px solid #b6b6b6;
                border-top: none;
            }
    
            .search-res li{
                list-style-type: none;
                line-height: 20px;
                padding: 2px 5px;
                border-bottom: 1px solid #b6b6b6;
            }
        </style>
    </head>
    <body>
        <div id="search">
            <input type="text">
            <ul class="search-res">
                
            </ul>
        </div>
    </body>
    <script src="jsonp.js">　　　　//这里的jsonp.js就是封装的jsonp
        
    </script>
    <script>
       class Search{
        constructor(){
            // 1获取元素，url
            this.txt = document.querySelector("#search input");
            this.ul = document.querySelector(".search-res");
            this.url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
            this.events();
        }

        events(){
            // 2绑定事件
            var that = this;
            this.txt.addEventListener("input",function(){
                that.value = this.value;
                that.load();
            })
        }

        load(){
            // 3引入jsonp
            var that = this;
            jsonp(this.url,function(res){
                that.res = res.s;
                that.display();
            },{
                columnName:"cb",
                cb:"baidu",
                wd:this.value,
            })
        }

        display(){
            // 4显示出来
            var str = "";
            for(var i = 0;i < this.res.length;i++){
                str += `<li>${this.res[i]}</li>`;
            }
            this.ul.innerHTML = str;
        }

       }
       
       new Search();
    </script>
</html>

 使用接口时，主要在于接口文档。

接口列表
 
 
 
 
 
 
posted @ 2019-12-21 17:16  优冠的味道  阅读(325)  评论(0)    收藏  举报