JSONPは、クロス・ドメイン問題を気にせずにJSONデータを送信するためのメソッドです。
JSONPはXMLHttpRequestオブジェクトを使用しません。
JSONPは代わりに<script>タグを使用します。
JSONP は、JSON with Padding の略です。
他のドメインからファイルをリクエストすると、クロスドメインポリシーによって問題が発生する可能性があります。
他のドメインからの、外部スクリプトのリクエストにはこの問題がありません。
JSONPは、この利点を生かして、XMLHttpRequestオブジェクトの代わりに、scriptタグを使用してファイルをリクエストします。
<script src="demo_jsonp.php">
サーバ上のファイルは、関数呼び出しの中に成果をラップします：
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Show PHP file »
結果は、JSONデータをパラメータとした "myFunc"という名前の関数呼び出しを返します。
クライアントに関数が存在することを確認してください。
"myFunc"という名前の関数をクライアントに配置して、JSONデータの処理を用意しておきます：
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Try it Yourself »
上の例では、スクリプトタグを配置した場所に基づいて、ページのロード中に "myFunc"関数が実行されますが、 これではあまり十分ではありません。
スクリプトタグは、必要になったときにだけ作成するべきです：
ボタンをクリックしたときに、<script>を作成して挿入します：
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(tag);
}
Try it Yourself »
上記の例は、まだ動的ではありません。
phpファイルにJSONを送信し、phpファイルは取得した情報に基づき、JSONオブジェクトを返すようにすることで、動的な例にします。
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =
json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM
".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>
"myFunc"関数はPHPファイルから呼び出されます：
function clickButton() {
var obj, s
obj = { "table":"products", "limit":10 };
s =
document.createElement("script");
s.src = "jsonp_demo_db.php?x="
+ JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj)
{
var x, txt = "";
for (x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Try it Yourself »
（訳注）理解していないので、訳が変かもしれません。後日再調査します。
サーバファイルを制御できない場合、サーバファイルに正しい関数を呼び出す方法を教えてください。
（When you have no control over the server file, how do you get the server file
to call the correct function?）
場合によっては、サーバファイルはパラメータとしてコールバック関数を提供することがあります：
phpファイルは、callbackパラメータで渡した関数を呼び出します：
function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
Try it Yourself »