码迷,mamicode.com
首页 > Web开发 > 详细

jsonp跨域请求的方式

时间:2018-06-22 01:14:19      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:document   div   set   class   网页   脚本   hang   lis   实现   

1、jsonp一种请求方式、用于解决一个棘手的问题:

由于浏览器具有同源策略:即可以通过后台去访问其他网站,而不能通过浏览器(ajax请求)访问其他网页或域(阻止ajax请求,但是无法阻止<script src="">请求,所有带src属性的都不阻止

巧妙的实现方式:

创建一个<script>标签,设置它的src属性为需要访问的地址,返回的数据必须是json格式的、只能发get请求

实现原理:

在src里面带一个callback=fun参数,参数的值是需要服务端构造的函数来返回。服务端会返回return Httprequest(fun(数据))然后需要在本地script脚本里面加一个fun函数,函数内容可以是function fun(arg){
console.log(arg)
}
这里的arg就是服务端返回的数据,完成后再删掉这个script标签

实现源码:

script>
        function getContent(){
            /*
            var xhr = new XMLHttpRequest();
            xhr.open(‘GET‘,‘http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2‘);
            xhr.onreadystatechange = function(){
                console.log(xhr.responseText);
            };
            xhr.send();
            */
            /*
            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);
            */
            $.ajax({
                url: ‘http://www.jxntv.cn/data/jmd-jxtv2.html‘,
                type: ‘POST‘,
                dataType: ‘jsonp‘,
                jsonp: ‘callback‘,
                jsonpCallback: ‘list‘
            })
        }

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

  更多:https://www.cnblogs.com/wupeiqi/p/5703697.html

jsonp跨域请求的方式

标签:document   div   set   class   网页   脚本   hang   lis   实现   

原文地址:https://www.cnblogs.com/qiangayz/p/9211421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!