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/
ドキュメントから判断する限り、アラートが生成されるはずですが、生成されません (ただし、エラーも生成されません)。
ありがとう。
ベストアンサー1
JSONPそれは本当に克服するための簡単なトリックですXMLHttpリクエスト同じドメインポリシーです。（ご存知のとおり、AJAX (XMLHttpリクエスト)別のドメインにリクエストを送信します。
だから、XMLHttpリクエスト私たちは使わなければならない脚本HTMLl タグは、JS が別のドメインからデータを取得できるようにするために、通常 JS ファイルを読み込むために使用します。奇妙に聞こえますか?
問題は、脚本タグは次のように使用できますXMLHttpリクエスト! これをチェックしてください:
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";
知らせマイコールバックそこに機能する？それで - いつJSONPサーバーはリクエストを受信し、コールバック パラメータを見つけます。プレーンな JS 配列を返す代わりに、以下を返します。
my_callback({['some string 1', 'some data', 'whatever data']});
利益がどこにあるのか見てみましょう: 自動コールバックができるようになりました (マイコールバック）はデータを取得すると起動されます。JSONP: コールバックとスクリプト タグです。
注意:
これらは JSONP の使用例の簡単な例であり、本番環境で使用できるスクリプトではありません。
RAW JavaScript demonstration (simple Twitter feed using 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>
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 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”.)