使用阿贾克斯（）与JSONP的基本的例子吗？

本文介绍了使用阿贾克斯（）与JSONP的基本的例子吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Please could someone help me work out how to get started with JSONP?

code：

$('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/

如果产生警报，据我可以从文档工作了：不是（但不产生任何错误，要么）

Should produce an alert, as far as I can work out from the documentation: isn't (but isn't producing any errors either).

感谢。

推荐答案

JSONP 确实是一个简单的把戏克服 XMLHtt prequest 同一个域策略。（正如你知道的人能不能发送的 AJAX（XMLHtt prequest）请求到不同的域。）

JSONP is really a simply trick to overcome XMLHttpRequest same domain policy. (As you know one cannot send AJAX (XMLHttpRequest) request to a different domain.)

所以 - 而不是使用的 XMLHtt prequest 我们要使用剧本 HTMLl标签，那些你平时使用加载JS文件，为了让JS来从另一个域获取数据。听起来不可思议？

So - instead of using XMLHttpRequest we have to use script HTMLl tags, the ones you usually use to load JS files, in order for JS to get data from another domain. Sounds weird?

是 - 原来的剧本标签可以用于类似的 XMLHtt prequest 时尚！检查了这一点：

Thing is - turns out script tags can be used in a fashion similar to XMLHttpRequest! Check this out:

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

您将结束与一个剧本段，看起来像这样之后它加载数据：

You will end up with a script segment that looks like this after it loads the data:

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

然而，这是一个有点不方便，因为我们要获取这个数组从剧本标记。因此， JSONP 创作者决定，这将更好地工作（它是）：

However this is a bit inconvenient, because we have to fetch this array from script tag. So JSONP creators decided that this will work better (and it is):

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

注意的 my_callback 的功能在那里？所以 - 当 JSONP 服务器接收你的要求，并认为回调参数 - 而不是返回纯JS数组，它会返回这样的：

Notice my_callback function over there? So - when JSONP server receives your request and finds callback parameter - instead of returning plain JS array it'll return this:

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

看到利润：现在我们得到自动回调（ my_callback 的），那将触发一次我们得到的数据。这是所有有了解的 JSONP ：这是一个回调和脚本代码

See where the profit is: now we get automatic callback (my_callback) that'll be triggered once we get the data. That's all there is to know about JSONP: it's a callback and script tags.

注意：
这是JSONP用法简单的例子，这些都不是用于生产的脚本。

NOTE:
These are simple examples of JSONP usage, these are not production ready scripts.

RAW JavaScript的演示（简单的Twitter的饲料使用JSONP）：

<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的例子（简单的Twitter使用JSONP饲料）：

Basic jQuery example (simple Twitter feed using JSONP):

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

JSONP 表示 JSON与填充。（很差命名技术，因为它真的无关，与大部分人都认为的填充。）

JSONP stands for JSON with Padding. (very poorly named technique as it really has nothing to do with what most people would think of as "padding".)

这篇关于使用阿贾克斯（）与JSONP的基本的例子吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！