Jsonp(JSON with Padding)

JSONP:一种非官方跨域数据交互协议

众所周知，由于浏览器的同源策略，要从不同的域（网站）访问数据会产生跨域问题，img的src(获取图片)，link的herf（获取css），script的scr(获取JavaScript)，这三个不属于同源策略，都可以跨域获取数据，因此，jsonp应运而生！

JSONP实现跨域的原理简单的说，就是动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。

直接上代码，前端：

<body>
    <button id="normal">原生jsonp</button>
    <script>
        function show(x) {
            console.log('下面是jsonp返回的数据')
            console.log(x)
        }
        var btn = document.getElementById('normal')
        btn.onclick = function () {
            var parent = document.body
            var cb = document.createElement('script');
            cb.src = "http://localhost:3000?callback=show"
            parent.appendChild(cb)
            parent.removeChild(parent.lastElementChild)
        }
    </script>
</body>

前端（jquery版）：

<body>
    <button id="ajax">ajax jsonp</button>
    <script>
        $("#ajax").click(function () {
            $.ajax({
                url: "http://localhost:3000",
                dataType: 'jsonp',
                success: function (result) {
                    console.log('下面是jsonp返回的数据')
                    console.log(result)
                }
            });
        });
    </script>
</body>

后端（node）：

var express = require('express')
var url = require('url')
var app = express()

app.use('/', function (req, res) {
    var urlParse = url.parse(req.url, true)
    var cb = urlParse.query.callback
    res.end(cb + "('I am jsonp data')")
})

app.listen('3000', function () {
    console.log('running......')
})

Jsonp原理

Jsonp(JSON with Padding)

JSONP:一种非官方跨域数据交互协议