JSONP
JSONPは、クロスドメインの問題を気にせずにJSONデータを送信するための方法です。
XMLHttpRequestJSONPはオブジェクトを使用しません。
JSONPは<script>代わりにタグを使用します。
JSONPイントロ
JSONPはJSONwithPaddingの略です。
クロスドメインポリシーにより、別のドメインからファイルをリクエストすると問題が発生する可能性があります。
別のドメインから外部スクリプトを要求しても、この問題は発生しません。
JSONPはこの利点を利用し、オブジェクトの代わりにスクリプトタグを使用してファイルをリクエストしXMLHttpRequestます。
<script src="demo_jsonp.php">
サーバーファイル
サーバー上のファイルは、結果を関数呼び出し内にラップします。
例
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
結果は、JSONデータをパラメーターとして使用して「myFunc」という名前の関数の呼び出しを返します。
関数がクライアントに存在することを確認してください。
JavaScript関数
「myFunc」という名前の関数はクライアントにあり、JSONデータを処理する準備ができています。
例
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
動的スクリプトタグの作成
上記の例では、スクリプトタグを配置した場所に基づいて、ページの読み込み中に「myFunc」関数を実行しますが、これはあまり満足のいくものではありません。
スクリプトタグは、必要な場合にのみ作成する必要があります。
例
ボタンがクリックされたときに<script>タグを作成して挿入します。
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
動的JSONP結果
上記の例はまだ非常に静的です。
JSONをphpファイルに送信して例を動的にし、phpファイルが取得した情報に基づいてJSONオブジェクトを返すようにします。
PHPファイル
<?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).")";
?>
PHPファイルの説明：
- PHP関数json_decode（）を使用して、リクエストをオブジェクトに変換します 。
- データベースにアクセスし、要求されたデータを配列に入力します。
- 配列をオブジェクトに追加します。
- json_encode（）関数を使用して配列をJSONに変換します。
- 戻りオブジェクトの周りに「myFunc（）」をラップします。
JavaScriptの例
「myFunc」関数は、phpファイルから呼び出されます。
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
コールバック関数
サーバーファイルを制御できない場合、サーバーファイルで正しい関数を呼び出すにはどうすればよいですか？
サーバーファイルがパラメータとしてコールバック関数を提供する場合があります。
例
phpファイルは、コールバックパラメータとして渡した関数を呼び出します。
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);