モバイル インターネットの急速な発展に伴い、Web API を使用してデータ サービスを提供する Web サイトがますます増えています。 Web API を使用してフロントエンドでデータを取得する場合、通常は AJAX を使用して非同期リクエストを作成します。ただし、ブラウザーの同一オリジン ポリシー制限により、AJAX は同一オリジン サーバーからのデータのみを要求できるため、フロントエンドがデータを取得できる範囲が制限されます。
クロスドメインの問題を解決するために、jsonP テクノロジーが登場しました。フロントエンドのデータ取得における jsonP のアプリケーションについて詳しく学びましょう。
1. JSONP の原則
JSONP (パディング付き JSON) はクロスドメイン データ送信方式であり、スクリプト タグを動的に追加することでクロスドメイン データ リクエストを行い、JSON データを取得します。フロントエンドで JSONP を使用する原理は次のとおりです。
まず、フロントエンドはサーバーへの JSONP リクエストを開始します。リクエスト アドレスはクロスドメイン アドレスです。 JSONP リクエストの URL にはコールバック パラメータが含まれる必要があります。バックエンドは、このパラメータに基づいて応答 JSON データを生成し、関数呼び出しの形式でフロントエンドに返します。その後、フロントエンドは応答データを解析して処理します。
具体的なプロセスを次の図に示します:
2. サーバーは JSONP リクエストに応答します
現在のエンドが JSONP リクエストを開始し、サーバーは次のことを行う必要があります。要求に正しく応答します。 JSONP リクエストの場合、サーバーは指定された名前の JavaScript 関数を返し、関数が呼び出されたときにサーバーによって生成された JSON データを呼び出す必要があります。以下は JSONP 応答の例です。
要約すると、サーバーは次の点を実装する必要があります。
3. フロントエンドの JSONP 応答の処理
サーバーが JSONP リクエストに正しく応答する場合、フロントエンドは応答データを正しく処理する必要があります。フロントエンドが行う必要があることは次のとおりです:
以下は JSONP 処理の例です。
最後に、JSONP リクエストを行う際に注意する必要があるのは、応答データが で返されるためです。 JavaScript の形式 (if) 返されたデータに JavaScript ステートメントが含まれている場合は、それらをエスケープする必要があります。エスケープしないと、フロントエンド コードの実行に影響します。一般的なエスケープ関数には、jQuery の $.parseJSON() 関数や JavaScript の JSON.parse() 関数が含まれます。 ######つづく...###
以上がphp jsonpはjsonデータを変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。