js----jsonp跨域

:文章是供自己平时学习时用,相当于学习笔记,如有错误,欢迎指正,若有侵权,请联系我~~

【】由于浏览器同源策略(浏览器的安全机制)的限制,非同源下的请求,都会产生跨域问题。jsonp(JSON with Padding)即是为了解决这个问题出现的一种简便解决方案。由于同源策略,所以ajax不能实现跨域访问,ajax只能下载同源的数据,跨源的数据禁止下载。

同源策略:(其中有一个不满足时,我们的请求就会发生跨域问题)

  • 同一协议
  • 同一域名/同IP
  • 同端口号

例如:

  1. http://www.a.com:8000到https://www.a.com:8000的请求会出现跨域(同域名、同端口号,不同协议)
  2. http://www.a.com:8000到 http://www.a.com:3000的请求会出现跨域(同协议、同域名,不同端口号)
  3. http://www.a.com:8000到 http://www.abc.com:8000的请求会出现跨域(同协议、同端口号,不同域名)

跨源的需求

  • 修改ajax同源协议(不建议)
  • 委托php文件进行跨源
  • jsonp跨域

jsonp:
jsonp(JSON with Padding)可用于解决主流浏览器的跨域数据访问的问题。jsonp的原理就是动态的创造script标签,然后利用script的src 不受同源策略约束来跨域获取数据。

jsonp如何实现跨域访问?
本质上是利用HTML元素的src属性都可以跨域的思路来解决的。不管是我们的script标签的src属性还是img标签的src属性,或者说是link标签的href,都没有被同源策略所限制。如:img,script,iframe等标签的src属性的值都可以赋成其它域名的合法地址。

jsonp跨域的使用流程:

  1. 先声明一个函数,这个函数有一个形参,这个形参会拿到我们想要下载的数据,使用这个参数做后续数据处理。
  2. 在需要下载数据的时候,动态创建script标签,将标签的src属性设置成想要下载数据的链接。
  3. 当script插入到页面上的时候,就会调用已经封装好的函数,将我们需要的数据传过来。

核心代码:

 function download(data){
  //对data数据进行操作代码
 }
  //动态创建script标签,并将该标签插入到页面中
  var oScript = document.createElement("script");
  oScript.src = `http://xxx.com/jsonp?callback=download`;
  //oScript.src = `请求地址?callback=函数名`
  document.body.appendChild(oScript);

jsonp案例 ----【百度搜索框】

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索框</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style-type: none;}
        a{text-decoration:none;}
        #div1{margin:100px 500px;}
        #info{width:302px;height:30px;border:1px solid gray;padding:5px;}
        #ul1{width:312px;border:1px solid gray;display:none;}
        #ul1 li a{color:black;height:30px;line-height:30px;display:block;font-size:15px;padding:5px}
        #ul1 li:hover {color:white;background-color:orangered}
    </style>
    <script>
        function download(data){
            // alert("要下载的数据" + data);
            //取出数据
            var arr = data.s;
            var oUl = document.getElementById("ul1")
            //加载新数据之前,清除掉上一次的数据
            oUl.innerHTML = '';
            if(arr.length){
                oUl.style.display = 'block';
                for(var i = 0; i < arr.length; i++){
                    //动态创建li标签和a标签,并将其插入到页面中
                    var newLi = document.createElement("li");
                    var newA = document.createElement("a");
                    newA.innerHTML = arr[i];
                    //给a标签添加要跳转的链接
                    newA.href = 'https://www.baidu.com/s?wd=' + arr[i]; 
                    newA.target = '_blank';
                    newLi.appendChild(newA);
                    oUl.appendChild(newLi);
                }
            }else{
                oUl.style.display = 'none';
            } 
        }
    </script>
    <script>
        window.onload = function(){
            var oInfo = document.getElementById("info");
            var oUl = document.getElementById('ul1');
            oInfo.onkeyup = function(){  //给输入框添加键盘事件(onkeyup按键释放)
                var oValue = this.value
                if(!oValue){
                    oUl.style.display = 'none';
                }else{
                    //加载数据
                    var newScript = document.createElement('script');
                    newScript.src = `http://suggestion.baidu.com/su?wd=${this.value}&cb=download`;
                    document.body.appendChild(newScript);
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <input type="text" id="info">
        <ul id="ul1">
            <!-- <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li> -->
        </ul>
    </div>
</body>
</html>

效果展示:

参考链接:https://blog.csdn.net/badmoonc/article/details/82289252?utm_source=app

你可能感兴趣的:(JavaScript,js,javascript,jsonp,web,html)