jsonp 工作原理

在跨域请求的解决方案中,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','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>

相关文章

文章浏览阅读2.4k次。最近要优化cesium里的热力图效果,浏览...
文章浏览阅读1.2w次,点赞3次,收藏19次。在 Python中读取 j...
文章浏览阅读1.4k次。首字母缩略词 API 代表应用程序编程接口...
文章浏览阅读802次,点赞10次,收藏10次。解决一个JSON反序列...
文章浏览阅读882次。Unity Json和Xml的序列化和反序列化_uni...