JSONP はクロスオリジンリクエストの問題をどのように解決しますか?

JSONP を使用したクロスオリジン リクエスト: 実践的な例

クロスオリジン ポリシーの制限が発生した場合、JSONP (パディング付き JSON) が便利な解決策を提供します。ただし、最初は詳細を理解するのが混乱する可能性があります。簡単な jQuery、PHP、および JSONP の例でプロセスをわかりやすく説明しましょう。

クロスオリジン リクエスト用の JSONP の実装

次の間違ったコード スニペットを考えてみましょう:

// jQuery
$.post('http://MySite.com/MyHandler.php', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res);
});

// PHP
<?php
$fname = $_POST['firstname'];
if ($fname == 'Jeff') {
  echo 'Jeff Hansen';
}
?>

クロスオリジンリクエストを有効にするために、JSONP を利用します。方法は次のとおりです:

jQuery:

$.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') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({' . "'fullname' : 'Jeff Hansen'" . '})';
}
?>

キーポイント:

• ?callback=?: このパラメーターは、コールバック関数名を JSON 応答に追加するようにサーバーに指示します。
• res.fullname: JavaScript では、ドット表記を使用してプロパティ値にアクセスします。ただし、この場合、応答を JSON オブジェクトとして扱うために先頭に追加する必要があります。

JSONP 応答で HTML を返す

はい、JSONP 応答に HTML を保存できます。 PHP コードを次のように変更します。

<?php
if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({
    'name': 'Jeff Hansen',
    'html': '<span>This is some HTML</span>'
  })';
}
?>

JavaScript では、res.html を使用して HTML にアクセスできます。

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