JSONP クロスドメインアクセスの実装

はじめに

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> を入れることです。このタグはクロスドメインアクセスを許可するためです。