JavaScript でのクロスドメイン通信に JSONP を使用する方法

クロスドメイン通信用に JavaScript で JSONP を作成する方法

クロスオリジンリクエストを処理する場合、悪名高い同一オリジンポリシーにより、邪魔になる。ただし、JSONP (パディング付き JSON) は、この制限を回避する賢いソリューションとして設計されました。

JSONP の仕組み

JSONP は Web ブラウザの動作を巧みに利用します。 。 GET リクエストで callback と呼ばれるパラメータを指定すると、サーバーが JSON データを JavaScript 関数呼び出しでラップできるようになります。次にブラウザは関数を実行し、JSON データを引数として渡します。

PHP でのサーバー側コールバック API の作成

1. GET リクエストのコールバック パラメータを受け入れます。
2. Content-Type ヘッダーや Access-Control ヘッダーなど、適切な HTTP ヘッダーを設定します。
3. コールバック JavaScript 関数を JSON データにラップします。

<code class="php"><?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

クライアント側での JSONP サービスの使用

JSONP を利用するにはクライアント側のサービスを使用するには、次の例に従ってください:

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>

このスクリプトは、受信 JSON データを処理する受信関数を作成し、data-service.php ファイルを動的にロードして、コールバック関数を引数。

以上がJavaScript でのクロスドメイン通信に JSONP を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。