JSONPは、実際にはXMLHttpRequestの同じドメインポリシーを克服するための単純なトリックです。（ご存じのとおり、AJAX（XMLHttpRequest）リクエストを別のドメインに送信することはできません。）
したがって、XMLHttpRequestを使用する代わりに、JSが別のドメインからデータを取得するために、JSファイルをロードするために通常使用するスクリプト HTMLlタグを使用する必要があります。変な音？
実は、スクリプトタグは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', 'some data', 'whatever data']});
利益がどこにあるかを確認します。今度は、データを取得するとトリガーされる自動コールバック（my_callback）を取得します。JSONPについて知っておくべきことはこれだけです。これは、コールバックとスクリプトタグです。
注：
これらは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 with Paddingの略です。（ほとんどの人が「パディング」と考えるものとはまったく関係がないため、非常に貧弱な名前のテクニック。）