JSONP

JSONPは、クロスドメイン問題を考慮せずにJSONデータを送信する方法です。

JSONPはXMLHttpRequestオブジェクトを使用しません。

JSONPの使用方法 <script> タグが代わりに使用されます。

JSONPの概要

JSONPとは、JSON with Paddingのことです。

異なるドメインからのファイルのリクエストは、クロスドメインポリシーにより問題が発生します。

異なるドメインからの外部スクリプトはこの問題がありません。

JSONPはこの利点を利用し、scriptタグを使用してXMLHttpRequestオブジェクトを置き換えています。

<script src="demo_jsonp.php">

Server ファイル

サーバー上のファイルは、関数呼び出しで結果を包装しています：

インスタンス

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

PHP ファイルを表示します

結果は、JSON データが引数として渡される "myFunc" 名の関数の呼び出しとして返されます。

クライアント側にこの関数が存在することを確認してください。

JavaScriptの関数

クライアント側に位置する "myFunc" ファンクションを使用して JSON データを処理します：

インスタンス

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

自分で試してみる

動的なスクリプトタグを作成します

上記の例はページが読み込まれたときに "myFunc" ファンクションを実行し、スクリプトタグの場所に応じて不十分です。

スクリプトは必要なときにのみ作成されるべきです：

インスタンス

ボタンがクリックされたときに <script> タグを作成および挿入します：

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

自分で試してみる

動的な JSONP 結果

上記の例は静的なものです。

PHP ファイルに JSON を送信することで動的な例を作成し、その情報に基づいて 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_decode() 函数把该数组转换为 JSON。
  • 用 "myFunc()" 封装返回对象。

JavaScript インスタンス

将从 php 文件调用 "myFunc" 函数：

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;
}

自分で試してみる

コールバック関数

サーバーファイルを制御できない場合、どうやってサーバーファイルが正しい関数を呼び出すかをどうしますか？

時にはサーバーファイルがコールバック関数をパラメータとして提供します：

インスタンス

PHP ファイルは、コールバックパラメータとして渡された関数を呼び出します：

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

自分で試してみる