ホームページ >バックエンド開発 >PHPチュートリアル >JavaScript で JSONP 互換のエンドポイントを作成する方法: 包括的なガイド

JavaScript で JSONP 互換のエンドポイントを作成する方法: 包括的なガイド

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-23 00:14:31601ブラウズ

How to Create JSONP-Compatible Endpoints in JavaScript: A Comprehensive Guide

JavaScript での JSONP 互換エンドポイントの作成

クロスオリジン リソース共有 (CORS) の制限により、異なるドメインでホストされている Web サイト間の通信が妨げられる可能性があります。 JSONP (パディング付き JSON) は、ブラウザーのスクリプト タグの処理を活用することで回避策を提供します。

PHP で JSONP を実装する方法

JSONP 対応エンドポイントを作成するにはPHP の場合は、次の手順に従います:

  1. GET リクエストでコールバック パラメーターを受け入れます (例: $callback = $_GET['callback'];)。
  2. コールバック JavaScript 関数をラップします。ブラウザーの JSON 応答 (例: $callback.'('.$data.');'.
  3. CORS に適切な HTTP ヘッダーを設定します。例:
<code class="php">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');</code>
このコードは、コールバック関数にパラメータとして渡された JSON オブジェクトを含む JavaScript ファイルを返します。

JSONP 互換エンドポイントの利用

<スクリプト> を使用します。 JSONP サービスを利用するためのタグ:

<code class="html"><script>
    function receiver(data) {
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>
スクリプトが実行されると、JSON 応答でレシーバー関数が呼び出され、クライアント側のデータにアクセスできるようになります。

以上がJavaScript で JSONP 互換のエンドポイントを作成する方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。