JSONP

Ajax请求的限制

  • ajax只能向自己的服务器发送请求。比如一个A网站一个B网站，A网站的HTML只能向A网站的服务器发送请求，不能向B网站的服务器发送请求

什么是同源

  • 如果两个页面拥有相同的协议域名和端口，那么这两个页面就属于同源，如果有一个不一样，那么就不是同源
  • 同源策略是为了保护用户信息的安全，防止恶意网站窃取数据。最初的同源策略是指A网站在客户端设置cookie，B网站不能使用

使用JsonP解决

  1. 将不同源的请求地址写道script标签中

    <script src='url'></script>
// script标签不受同源策略的影响
// 请求地址不一定非得是.js结尾的，但是返回结果必须是javascript代码

  2. 服务器端响应数据的代码必须是一个函数的调用，真正要发送给客户端的数据作为函数的参数传进来

    const data = 'fn({key1:value1,key2:value2})';
res.send(data);

  3. 因为函数在客户端是要调用的，所以要先定义这个函数，这样等服务器将数据返回过来，就可以调用了

    <body>
    <script>
    	function fn(data){
    		console.log(data);// fn(:,:){} 调用函数
		}
    </script>
    <script src='urladdress'></script>
</body>
// 函数必须定义在全局作用域，，并且定义在script标签上面

  4. 处理服务端响应给客户端的数据

    function fn(data){
    console.log(data);
}

  5. 以上是html界面加载完就会触发函数，设置动态的话就可以利用鼠标点击事件，然后动态生成script标签，并且将不同源地址添加到标签的src属性值当中

    <body>
    <button id='btn'>
        点我发送
    </button>
    <script>
    	function fn(data){
    		console.log(data);// fn(:,:){} 调用函数
		}
    </script>
    <script>
    	var btn = document.ElementById('btn');
        btn.onclick=function(){
            var script = document.createElement('script');
            script.src='urladdress'; // 创建标签并添加属性
            document.body.appendChild(script); // 将标签写进body标签中，不然白干
        }
    </script>
</body>

  6. 客户端需要将函数名字发传递给服务器，毕竟和后端有交流，如果后端不知道函数名，比较麻烦，还得沟通确认，这里直接将函数名发送给后端就行了

    <body>
    <script>
    	function fn(data){
    		console.log(data);// fn(:,:){} 调用函数
		}
    </script>
    <script src='urladdress..?callback=函数名'></script> <-- callback=函数名 !->
</body>

// 后端代码
app.get('/url',(req,res)) => {
    const fnName = req.query.callback;
    const result = fnName+'({name:"西瑞"})';
    res.send(result)
    }
posted @ 2021-09-01 21:05  心无垠  阅读(55)  评论(0)    收藏  举报