使用.ajax()与JSONP的基本示例？

发布时间：2020-12-16 03:28:33 所属栏目：百科来源：网络整理

导读：请有人帮我解决如何开始使用JSONP吗？码： $('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10callback=photos'; var photos = function (data) { alert(data

请有人帮我解决如何开始使用JSONP吗？

码：

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,dataType: 'jsonp',jsonpCallback: 'photos',jsonp: false,});
});

小提琴：http://jsfiddle.net/R7EPt/6/

应该产生一个警报，就我可以从文档中工作：不是(但也不产生任何错误)。

谢谢。

JSONP真的是一个简单的技巧克服XMLHttpRequest相同的域策略。 (因为你知道一个不能发送AJAX(XMLHttpRequest)请求到不同的域。)

所以 – 不是使用XMLHttpRequest，我们必须使用脚本HTMLl标签，通常用来加载JS文件，以便JS从另一个域获取数据。听起来很奇怪？

事实上，脚本标签可以以类似于XMLHttpRequest的方式使用！看一下这个：

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

在加载数据后，您将看到一个类似于此的脚本段：

<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";

注意my_callback函数在那里？所以，当JSONP服务器接收您的请求并发现回调参数 – 而不是返回纯JS数组，它将返回：

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

看看利润在哪里：现在我们得到自动回调(my_callback)，一旦我们获得数据，它将被触发。
这就是所有有关JSONP的知识：它是一个回调和脚本标签。

注意：
这些是JSONP使用的简单示例，这些不是生产就绪脚本。

RAW JavaScript演示(使用JSONP的简单Twitter Feed)：

<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示例(使用JSONP的简单Twitter Feed)：

<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',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>

JSONP代表带有Padding的JSON。 (非常差的命名技术，因为它真的与大多数人认为是“填充”无关。)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!