JSONPチュートリアル

Jsonp（パディング付きJSON）は、ウェブページが別のドメイン（ウェブサイト）からデータを取得できるようにするjsonの「使用パターン」です。これはデータのクロスドメイン読み取りを可能にします。

JSONPとは何ですか？

JSONPはパディング付きのJSONを意味します。

クロスドメインポリシーにより、別のドメインからファイルをリクエストすると問題が発生する可能性があります。

別のドメインから外部スクリプトをリクエストするとこの問題は発生しません。

JSONPはこの利点を利用し、<script>マークアップではなくXMLHttpRequestオブジェクトを使ってファイルをリクエストします。

　　<script　src="jsonp_demo.php">

サーバー上のファイル（jsonp_demo.php）は結果を関数呼び出しで包装します：

　　<?php
　　$myJSON　=　'{　"name":"Seagull",　"age":32,　"city":"New　Delhi"　}';
　　echo　"myFunc(".$myJSON.");";
　　?>

「myFunc」という関数はクライアント側にあり、JSONデータを処理できます：

function　myFunc(myObj)　{
　　document.getElementById("output").innerHTML = myObj.name;
}

JSONとJSONPの違い

JSON： JavaScriptはJSON（JavaScript Object Notation）を使用してネットワークを通じてデータを交換します。JSONデータは、文字列形式のJavaScriptオブジェクトとして慎重に確認されます。

　　{「name」:「Seagull」,「age」:22,「city」:「New Delhi」}

JSONP： JSONPは埋め込まれたJSONです。ここでの「埋め込まれた」は、関数をJSONに包装して、それをリクエストに戻すことを意味します。

　　myFunc({「name」:「Seagull」,「age」:22,「city」:「New Delhi」}

JSONPの方法

• HTMLコードにscriptタグを含めます。scriptタグのソースは、データを取得するURLです。Webサービスでは、コールバック関数を指定できます。URLの最後にcallbackパラメータが含まれます。

• ブラウザがscriptエレメントに直面したとき、HTTPリクエストをソースURLに送信します。

• サーバーは関数呼び出しに包装されたJSONを応答として送信します。

• ブラウザは文字列形式のJSON応答を解析し、JavaScriptオブジェクトに変換します。コールバック関数を呼び出し、生成されたオブジェクトを渡します。

動的スクリプタラベルの作成

上の例では、ページが読み込まれたときにscriptタグの場所に基づいて「myFunc」機能を実行します。

ただし、必要なときにのみスクリプタラベルを作成するべきです。

以下の例では、ボタンをクリックしたときに作成して挿入します<script>タグ：

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}