jsonp原理

我们都知道浏览器有一个同源政策的限制，所以只要是在非同源的情况下，都会产生跨域问题。那么什么是跨域问题呢？就是协议，域名，端口号这三样有一个不同就会产生跨域问题，就不满足同源政策。
但是我们会发现，script标签的src和img的src，还有link的href都可以访问网络的在线链接，都没有被同源政策所限制。所以jsonp就是利用了这个漏洞，创建了一个script标签。
举个例子：

<body>
    <button id="btn">点击发送网络请求</button>
    <div id="container"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script>

    $("#btn").click(function () {
        // 2. 不知道ajax，如果要和后端交互，无外乎发送一个网络请求
        // 前端里面有哪些可以发生网络请求（img link script iframe）
        /**
         *
         * @type {HTMLElement}
         */
        var sc = document.createElement('script');
        var url = 'http://localhost:3000/users';
        sc.src = url;// 只是在内存里面，并没有挂载到DOM结构里面

        document.head.appendChild( sc );
  
    });

</script>

所以就是我们向页面添加了一个script标签，并加上了所要请求的URL；
我们点击摁扭却发现控制台的network里是这样

发送网络请求.png

动态创建了script标签.png

并且动态创建了一个script标签，并且它的特性就是看见src就主动发送网络请求。
但是我们需要一个容器接收相应内容呀。确实发送网络请求 2. 服务器确实给了响应；问题：没办法获取到服务器的响应信息。如果有那个容器可以接受响应最好。（浏览器可以告诉服务器我们这里有个容器，你把数据放在我们的容器，然后我就可以使用了）
// 2. 客户端如何告诉服务器相关的信息（get传参）
那我们在url地址通过get告诉服务器我们提供了一个容器叫box。
我们对服务器说：你可不可以把相应内容放在里面叫box的container里面给我？

var url = 'http://localhost:3000/users?container=box';

服务器收到消息：好的我这就创建一个container，把req往里面放好再给你。

router.get('/', function (req, res, next) {

    var container=req.query;
    console.log(container)
});

这个时候控制台，后台确实吧container给发回去了。

相应内容.png

服务器端也知道你的需求box，

image.png

那再把东西放到box好吧，接下来就要用服务器要响应的内容填充到盒子里面

var box=req.query.container;
    var fn=box+'("i am from server")'//box("i am from server");
     console.log(fn);

可以看到响应已经发送回来了，但是只是一个字符串，但是如果放入js语言来说，box("i am from server")是一个叫box的函数在调用并传入了"i am from server"这样的参数。

响应请求.png

控制台此时就会报错了，说box没定义

box未定义.png

所以客户端就要定义一个box函数啦，就可以放上去了。

 /**
     * 1. 实现定义好一个 box
     */

    function box(data){
        console.log(data);
        $("#container").html( data );

    }

然后规范一点呢，就成了jsonp。

var url = 'http://localhost:3000/users?callback=fn'; // 一般容器的名称叫做 callback
        // var url = 'http://localhost:3000/users?cb=fn';

相应的后台写法

router.get('/', function (req, res, next) {

    // var container=req.query;
    // console.log(container);
    // var box=req.query.container;
    // var fn=box+'("i am from server")'//box("i am from server");
    // console.log(fn);
    var callback = req.query.callback;

    // 一般都是查询数据库获取
    var userData = [
        {
            id: 1,
            name: 'andy',
            age: 12,
        },
        {
            id: 2,
            name: 'mark',
            age: 22,
        },
        {
            id: 3,
            name: 'lily',
            age: 12,
        },

    ];

    // 目前的拼接： json with padding 拿json格式的数据去填充 callback
    var fn = callback + '( '+ JSON.stringify( userData ) +' )'; // fn( [{}, {}, {}] )

    res.send(fn); // 返回的 fn( [{}, {}, {}] )
});

//相应的前台也要定义好一个函数接收
 function fn(data){
        console.log(data);
    }

jsonp原理

推荐阅读更多精彩内容