跨站请求JSONP

2018-03-01  本文已影响9人  两点半的杂货铺

一、为什么用JSONP

由于 浏览器同源策略:XMLHttpRequest,实际当我们想别的网站利用ajax发送请求,别的网站实际上收到了我们的请求,并返回给了我们数据,但是因为浏览器的策略,并没用把数据展示给我们
我们发现,但是想图片标签的中的src属性似乎可以跳过这种策略,我们可以利用有src属性的利用创建script块写一个js引入,但如果只是但但用这种方法,我们发现js脚本中获取的是文本,实际上是不符js代码规范的,这里我们就给在后台处理成符合规范的形式返回

image.png
利用上面构造的list函数就可以执行
这是原理
    function submitJson2() {
            var tag = document.createElement('script');
            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
            document.head.appendChild(tag);
            //document.head.removeChild(tag);
        }
            function list(arg) {
           console.log(arg)
        }

传给后台get接受的值,然后告诉后台生成的封装函数

    function submitJsonp4() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
                type: 'POST',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'func'
            })
        }

     function list(arg) {
           console.log(arg)
        }

后台写法


image.png
上一篇 下一篇

猜你喜欢

热点阅读