JavaScript でクロスドメインリクエスト用の JSONP コールバックを作成するにはどうすればよいですか?

JavaScript での JSONP コールバックの作成

クロスドメインリクエストは、JavaScript 開発において課題となる可能性があります。ただし、JSONP (パディング付き JSON) は、この問題の解決策を提供します。

JSONP 用に JSON API を変更する

JSON API で JSONP 機能を有効にするには、次の手順に従います。以下の簡単な手順:

1. GET リクエストの「コールバック」パラメータを受け入れます:

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

2. データの周りにコールバック関数をラップします:

   $callback.'('.$data.');';

例として PHP を使用して、以下のコードは次の手順を示します:

<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 サービスを利用するには、HTML スクリプト タグを使用できます:

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>

<script src="data-service.php?callback=receiver"></script></code>

以上がJavaScript でクロスドメインリクエスト用の JSONP コールバックを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。