js----jsonp跨域_js爬虫 jsonp进行跨域-CSDN博客

本文链接：https://blog.csdn.net/qq_44646343/article/details/107695141

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

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

同源策略：（其中有一个不满足时，我们的请求就会发生跨域问题）

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

例如：

http://www.a.com:8000到https://www.a.com:8000的请求会出现跨域（同域名、同端口号，不同协议）
http://www.a.com:8000到 http://www.a.com:3000的请求会出现跨域（同协议、同域名，不同端口号）
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跨域的使用流程：

先声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据处理。
在需要下载数据的时候，动态创建script标签，将标签的src属性设置成想要下载数据的链接。
当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>