JSにおけるJSONとJSONPの詳しい説明

json を使用するだけではクロスドメイン リソース リクエストをサポートできないため、この問題を解決するには、jsonp データ インタラクション プロトコルを使用する必要があります。ご存知のとおり、js ファイルの呼び出しはクロスドメインであるかどうかによって制限されないため、純粋な Web 側からクロスドメインでデータにアクセスしたい場合は、json データをカプセル化することしかできません。クライアントが呼び出してさらに処理するためのリモート サーバー上の js 形式ファイル。これが jsonp プロトコルの原理です。

JSON と JSONP

JSONP は、クロスドメインの問題を気にせずに JSON データを送信する方法です。 JSONP は XMLHttpRequest オブジェクトを使用しません。 JSONP では代わりに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用します。
クロスドメイン ポリシーにより、別のドメインからファイルをリクエストすると問題が発生する可能性があります。別のドメインから外部スクリプトをリクエストする場合には、この問題は発生しません。 JSONP はこれを利用し、XMLHttpRequest オブジェクトの代わりにスクリプト タグを使用してファイルを要求します。

<script src="demo_jsonp.php">

サーバー ファイル

サーバー上のファイルは、結果を関数呼び出しでラップします:

<?php
$myJSON = &#39;{"name":"John", "age":30, "city":"New York"}&#39;;
echo "myFunc(".$myJSON.");";
?>

結果は次のとおりです。名前によって返されます。 JSON データをパラメータとして使用した関数「myFunc」の呼び出し。この機能がクライアントに存在することを確認してください。

JavaScript 関数

「myFunc」という名前の関数はクライアント側にあり、JSON データを処理する準備ができています:

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.send("x=" + dbParam);

動的スクリプト タグの作成

スクリプト タグを配置する場所に応じて、上記の例ではページの読み込み時に「myFunc」関数が実行されます。あまり満足のいくものではありません。 script タグは必要な場合にのみ作成してください:
ボタンがクリックされたときに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを作成して挿入します:

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

動的 JSONP の結果

上の例はまだ非常に静的です。 JSON を PHP ファイルに送信してサンプルを動的にし、取得した情報に基づいて PHP ファイルが JSON オブジェクトを返すようにします。
PHP ファイル

<?phpheader("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 の例:

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 + "
";
  }
  document.getElementById("demo").innerHTML = txt;
}

コールバック関数

サーバー ファイルを制御できない場合、サーバー ファイルに正しい関数を呼び出すにはどうすればよいでしょうか?場合によっては、サーバー ファイルがパラメータとしてコールバック関数を提供することがあります:
php ファイルは、コールバック パラメータとして渡した関数を呼び出します:
PHP ファイル:

<?php
$callback = trim($_GET(&#39;callback&#39;));
$myJSON = &#39;{ "name":"John", "age":30, "city":"New York" }&#39;;
echo $callback."(".$myJSON.");";
?>

javascript:

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

プログラミング関連の詳細については、プログラミング入門をご覧ください。 ！

以上がJSにおけるJSONとJSONPの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。