はじめに
-
JSONP (JSON with Padding) は、クロスドメイン要求を解決するための方法であり、あるドメインのデータを別のドメインから要求できるようになります。JSONP は、「<script>」タグの特性を利用して、<script> タグを動的に作成することで、JSON データを含む JavaScript ファイルを読み込みます。
1.JSONPの基本動作原理
1. クライアント (ブラウザー) は <script> タグを作成し、その src 属性をターゲット ドメイン内の JSON データを含む URL に設定し、クエリ パラメーターとしてコールバック関数名を指定します。
例
<script src="http://example.com/data?callback=myCallback"></script>
2. リクエストを受信した後、ターゲット ドメイン サーバーは JSON データをパラメータとしてコールバック関数に渡し、それを JavaScript コードとしてクライアントに返します。
例
myCallback({"名前": "ジョン", "年齢": 30});
3. クライアントはコールバック関数 myCakkback を定義し、返された JavaScript コードを受信すると、この関数は自動的に実行され、JSON データをパラメータとして使用します。
function myCallback(data) { // 返された JSON データを処理します console.log(data.name); console.log(data.age); }
このようにして、JSONP はブラウザーの同一オリジン ポリシー制限をバイパスし、クロスドメイン リクエストとデータ取得を実現できます。
2. JSON 応答を生成する
1.PHPコード
192.168.120.84 で PHP コードを生成し、list-json.php という名前を付けます。
<?php // //データベースに接続してアクセス $conn = new mysqli('127.0.0.1','root','123456','learn') または die("データベース接続に失敗しました。"); $ conn ->set_charset('utf8'); $sql = "select * from xssdata"; $result = $conn->query($sql); // JSON データをページに出力 $json = json_encode($result-> fetch_all (MYSQLI_ASSOC)); echo $json; $ conn->close(); ? >
2. ブラウザアクセス
ブラウザで直接アクセスすると以下のデータが取得されます
3. 別ページでAJAXを使用してアクセスする
1. 192.168.120.84 に新しいページを構築し、list-json.html という名前を付け、list-json.php にリクエストを送信します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,Initial-scale=1.0"> < title>Document</title> <script type="text/javascript"> var listUrl = 'http://192.168.120.84/jsonp/list-json.php'; //AJAX リクエストを送信するための XMLHttpRequest をインスタンス化します xmlhttp = new XMLHttpRequest (); var count = 0; //リクエストのステータスが変化したときに、実行コードをトリガーします。 xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4 && xmlhttp.status==200){ //リクエストのレスポンスを取得し、レスポンスの規則性を通じてトークンを抽出します var text = xmlhttp.responseText warning(text) } }; xmlhttp.open("GET",listUrl,false); xmlhttp.send(); </script> </head> <body>
2. ブラウザで list-json.php にアクセスすると、通常のポップアップウィンドウが表示されます。
3. list-json.php を 192.168.120.51 サーバーに保存します
(1) アクセス方法
list-json.phpのコードを192.168.120.51サーバーに保存し、ブラウザで直接アドレスにアクセスし、正常にアクセスできることを確認します(データベース接続の変更には注意してください)
(2) 84サーバー上のlist-json.htmlページにアクセスします。
list-json.html の listUrl アドレスを 51 サーバーのアドレスに変更します。この時点では、ブラウザーでアクセスした場合、ポップアップ ウィンドウは利用できません。F12 を開き、次のようにコンソールの出力を確認します。
上記はドメインを超えて存在する問題です。
4. JSONP を使用してクロスドメイン アクセスを解決する
1. 51サーバーのlist-json.phpを変更する
echo $json; をecho $_GET['callback']."(".$json.")"; に置き換えます // コールバック関数をフロントエンドに出力します
2. 84 サーバー上の list-json.html ページを次のように変更します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,Initial-scale=1.0"> < title>Document</title> <script> //先定好一个JS関数数 function test(args){ alert(JSON.stringify(args)); } </script> <script src="http://192.168.120.51/list-json.php?callback=test"></script> </head> <body>
通常のアクセスを実現するには、http://192.168.120.84/jsonp/list-json.html に再度アクセスしてください。
原則: スクリプト タグは同一生成元ポリシーの影響を受けず、値はコールバックを通じて実際のパラメータとしてページに渡されます。
JSONP クロスドメインの 5 つの重要なポイント
1. list-json.php がクロスドメイン アクセスを実現すると、どの Web サイトでもそのデータにアクセスできるようになり、パラメーター名 $_GRT['callback'] がわかっていて、JS で関数のコールバックを実行すれば、アクセスを完了できます。
2. もう 1 つのポイントは、<script> タグに <script src="192.168.120.51/list-json.php?callback=test"></script> を入れることです。このタグはクロスドメイン アクセスを許可するためです。