jsonp解决非同源之间的数据访问

同源政策

ajax请求限制

ajax只能向自己的服务器发送请求

比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

使用JSONP解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

1.将不同源的服务器端请求地址写在 script 标签的 src 属性中。

<script src="www.example.com"></script>
<script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

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

const data = 'fn({name: "张三", age: "20"})';
 res.send(data);

3.在客户端全局作用域下定义函数 fn

function fn (data) { }

4.在 fn 函数内部对服务器端返回的数据进行处理。

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

JSONP代码优化

只需要在传递的时候，传递的参数是一个对象，对象里面包括data，url，success函数。

 function jsonp(options) {
            var script = document.createElement('script');
            //在传递参数的时候，进行拼接字符串
            var params = '';
            //循环传递的参数对象
            for (var attr in options.data) {
                params += '&' + attr + '=' + options.data[attr]
            }
            //定义一个函数的名字，让每一个函数的名字都是不一样的
            var fnName = 'jsonp' + Math.random().toString().replace('.', '');
            //让这个函数放在全局作用域window下面，使这个函数变成一个全局的函数
            window[fnName] = options.success
            script.src = options.url + '?callback=' + fnName + params;
            document.body.appendChild(script);
            script.onload = function() {
                document.body.removeChild(script)
            }

        }

自知写的不是很好，全是个人的一些理解，请各位大佬批评指正，留言，我一定及时更改。