Jsonp原理

前端 0 353 0
发表于: 2020-03-10 18:11:55

简介: 暂无~

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

最后更新于:2021-02-16 21:08:06

欢迎评论留言~
0/400
支持markdown
Comments | 0 条留言
按时间
按热度
目前还没有人留言~