JSONP はクロスオリジンデータ取得の問題をどのように解決しますか?

JSONP: クロスオリジン データ取得の簡素化

クロスオリジン Web リクエストを処理する場合、同一オリジン ポリシーが課題となる可能性があります。 JSONP (JSON with Padding) は、この問題に対処するソリューションとして登場しました。ここでは、基本的な jQuery、PHP、および JSONP リクエストを実装して、別のドメインからデータを取得する方法を段階的に説明します。

jQuery Request

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?', { firstname: 'Jeff' }, function(res) {
  alert('Your name is ' + res.fullname);
});

PHP応答

<?php
  $fname = $_GET['firstname'];
  if ($fname == 'Jeff') {
    echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
  }
?>

キーの変更:

• ?callback=?: JSONP では、サーバーにコールバックが含まれます応答内の関数。 ?コールバック=?ブラウザが動的に生成されたコールバック関数をサーバーに提供できるようにします。
• $_GET['callback'] 。 '(': サーバーは JavaScript を使用して、ブラウザーが提供するコールバック関数を呼び出します。
• res.fullname: JavaScript コードはサーバーから返された JSON にアクセスし、 「フルネーム」値。

HTML 内応答

はい、HTML を結果に保存できます。HTML は文字列として返されます。JavaScript コードは HTML を適切に処理します。

使用例

この例では、次の場所にある PHP スクリプトから「Jeff」のフルネームを取得します。 「http://www.write-about-property.com/jsonp.php」。名前が「Jeff」と一致する場合、フルネーム「Jeff Hansen」が返されます。

以上がJSONP はクロスオリジンデータ取得の問題をどのように解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。