XMLHttpRequestにはドメインの異なるサイトからデータを取得できないという、クロスドメインの制限がある。

JSONPは、引数にJSON文字列を渡した関数呼び出しの書式で使う

// JSON
{ fuga : "ふが？" };
 
// JSONP
hoge({ fuga : "ふが？" });

JSONPによるクロスドメインリクエストは、SCRIPTタグのSRC属性がドメインを問わないことを利用している。まず、ドキュメントにSCRIPTタグを動的に追加し、別ドメインからJSONP形式で記述されたJavaScriptファイルを取得する。JSONPはJavaScriptの関数呼び出しの書式なので、ロード完了と同時にJavaScriptの関数として実行される。その関数をあらかじめ呼び出し元で定義しておくことで、別ドメインから得られたデータを利用することができる。

読み込み元に、JSONP読み込み時に実行されるコールバック関数を記述。

function hoge(obj) {
    window.alert(obj.fuga); 
}

JSONPをリクエスト、http://otherdomain.example.com/hoge.cgi?callback=hogeがJSONPを返すとする。DOMを操作し以下のようなscript要素をドキュメントに追加すると、Scriptファイルがダウンロードされ、hoge関数が実行される。

<script src="http://otherdomain.example.com/hoge.cgi?callback=hoge" type="text/javascript"></script>

JSONscriptRequest クラスというライブラリを利用すると簡単に実装できる。

JSONPスクリプトが読み込まれた瞬間、JSONPは1で定義したJavaScriptの関数として実行される

hoge({ fuga : "ふが？" });　　// JSONPは関数hogeとして実行され、アラートに「ふが」と表示</pre>

GETリクエストしか使えない、XMLHttpRequestに比べるとできる事が少ない等の欠点がある。

JSONPによるクロスドメイン非同期リクエストは、Dojoフレームワーク等でサポートされている。

// for Dojo 0.4
dojo.require("dojo.io");
dojo.require("dojo.io.ScriptSrcIO");
 
dojo.io.ScriptSrcTransport.bind({
    url: "http://example.com/intiki_url",
    jsonParamName: "callback",
    load: function(type, data, event, kwArgs) {
        for (var i in data) {dojo.debug(i + " = " + data[i])};
    }
});