与JSONP使用.ajax（）的基本示例？
请有人能帮我解决如何开始使用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服务器收到你的请求，并findcallback参数 – 而不是返回纯JS数组它会返回这个：
my_callback({['some string 1', 'some data', 'whatever data']});
看看利润在哪里：现在我们得到自动callback（ my_callback ），一旦我们获得数据，就会触发它。 这就是所有关于JSONP的知识 ：它是一个callback和脚本标记。
注意：
这些是JSONP用法的简单示例，这些不是生产就绪脚本。
RAW JavaScript演示（使用JSONP的简单Twitter推送）：
<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推送）：
<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 。 （这个技巧很差，因为它与大多数人认为的“填充”无关。）
有更简单的方法如何使用jQuery使用JSONP
$.getJSON("http://example.com/something.json?callback=?", function(result){ //response data are now in the result variable alert(result); });
这个? 在URL的末尾告诉jQuery，这是一个JSONP请求，而不是JSON。 jQuery自动注册并调用callback函数。
有关更多详细信息，请参阅jQuery.getJSON文档 。
编辑2017年 ：请不要使用jQuery了！
为了响应这个OP，你的代码有两个问题：你需要设置jsonp ='callback'，并且在一个像你这样的variables中添加一个callback函数似乎没有工作。
更新：当我写这个Twitter API刚刚打开，但他们改变它，现在需要authentication。 我改变了第二个例子到一个工作（2014Q1）的例子，但现在使用github。
这不再工作 – 作为一个练习，看看你是否可以用Github API来replace它：
$('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10&callback=photos'; $.ajax({ url: pm_url, dataType: 'jsonp', jsonpCallback: 'photos', jsonp: 'callback', }); }); function photos (data) { alert(data); console.log(data); };
尽pipealert（）这样的数组实际上并不能很好地工作…… Firebug中的“Net”选项卡会正确显示JSON。 另一个方便的技巧是做
alert(JSON.stringify(data));
你也可以使用jQuery.getJSON方法。 这里有一个完整的html例子，它从github获取“gist”列表。 这样它为你创build一个随机命名的callback函数，这是最后的“callback=？” 在url。
<!DOCTYPE html> <html lang="en"> <head> <title>JQuery (cross-domain) JSONP Twitter example</title> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> $(document).ready(function(){ $.getJSON('https://api.github.com/gists?callback=?', function(response){ $.each(response.data, function(i, gist){ $('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" + (gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>'); }); }); }); </script> </head> <body> <ul id="gists"></ul> </body> </html>
<!DOCTYPE html> <html> <head> <style>img{ height: 100px; float: left; }</style> <script src="jquery-latest.js"></script> <title>An JSONP example </title> </head> <body> <!-- DIV FOR SHOWING IMAGES --> <div id="images"> </div> <!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP --> <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { format: "json" }, //RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV function(data) { $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); }); });</script> </body> </html>
上面的代码有助于从Flicker API获取图像。 这使用GET方法来获取使用JSONP的图像。 它可以在这里find详细的
