JSONP解决跨域问题

最新推荐文章于 2023-04-13 13:39:45 发布

优睿远行

最新推荐文章于 2023-04-13 13:39:45 发布

阅读量173

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_39487835/article/details/80004999

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有时候我们需要用到跨域名传递数据，JS请求非本域名会报跨域错误，为了解决跨域问题，学习JSONP是个好方法

什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）.

JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：callback({"name","name1"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

jsonp的原理是：

就是利用<script>标签没有跨域限制，来达到与第三方通讯的目的。

当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

（我们知道 <link href <img src <script src 请求的数据都不受域的限制）

jsonp的使用方法：

客户端指明使用jsonp的方式，服务器接受参数，并外包裹要返回的数据，再一并返回。

jquery的ajax简单描述：

前端指明data:jsonp , 在标明自定义的参数名 jsonp:jsoncallback

<body>
    <div id="box">
        <ul>names:</ul>
    </div>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        function addContents(data){ 
            var box = document.getElementById('box'),
                ul = box.getElementsByTagName('ul')[0],
                fragment = document.createDocumentFragment(),
                li;
            for(var i=0,j=data.length; i<j; i++){ 
                li = document.createElement('li');
                if(data[i].hasOwnProperty('name')){ 
                    li.appendChild(document.createTextNode(data[i].name));
                    fragment.appendChild(li);
                }
            }
            ul.appendChild(fragment);
        }

        $.ajax({ 
            //url: './cross_domain.php',
            url: 'http://demoff.sinaapp.com/cross_domain.php',
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            data: {},
            success: function(data){ 
                addContents(data);
            },
            error: function(xmlHttpRequest,textStatus,error){ 
                console.log(xmlHttpRequest.status);
                console.log(textStatus);
            }
        });
    </script>
</body>

后端服务器部分要做的就是，拿到参数，再包裹

<?php 
    //header("Access-Control-Allow-Origin: *");
    //header("Access-Control-Allow-Origin: 我的域或ip");
    
    // 接收数据
     $jsoncallback = $_GET["jsoncallback"];

    // 构造数据
    for($i=1; $i<=5; $i++){ 
        $names[] = array("name" => "name" + $i);
    }

     $data = $jsoncallback . "(" . json_encode($names) . ")";
    
    //$data = json_encode($names);
    echo $data;
?>

优睿远行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSONP解决跨域问题

有时候我们需要用到跨域名传递数据，JS请求非本域名会报跨域错误，为了解决跨域问题，学习JSONP是个好方法什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）.JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：callback({"name","name1"});JSONP由两部分组成：回调函数和数据。回调函数是当...
复制链接

扫一扫