jsonp 工作原理

最新推荐文章于 2022-06-24 21:28:37 发布

bdss58

最新推荐文章于 2022-06-24 21:28:37 发布

阅读量619

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/bdss58/article/details/51087893

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在跨域请求的解决方案中，jsonp是一种常用的简洁方案。
<script> 标签可以加载不同域资源。我们常用的jquery库就是通过script标签加载到当前域页面中的。

<script type="text/javascript" src="http://xxcnd.com/jquery.min.js">

利用script标签加载不同域的资源：

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

上面的代码执行后，相当于html页面中加入了：

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

直接使用这种方法请求得到的数据并不方便我们操作。jsonp就是在这个方案的基础上添加了回调函数机制：

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';

注意到上面callback=my_callback ，这个指明了回调函数的名字。支持jsonp的server端返回的是：

my_callback({[‘some string 1’, ‘some data’, ‘whatever data’]});

相当于html页面中加入了：

<script>
my_callback({['some string 1', 'some data', 'whatever data']});
</script>

下面是一个整体的例子：
- 使用纯javascript

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

使用jquery

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>