JSONP は jQuery のクロスドメイン AJAX 通信の問題をどのように解決できるでしょうか?

jQuery AJAX クロスドメイン通信チャレンジ

クロスドメイン AJAX リクエストが発生した場合、あるドメインの HTML ドキュメントが別のドメインにリクエストすると、問題が発生します。 2 つの PHP ファイル、test.php と testserver.php:

test.php:

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
  $(function() {
    $.ajax({
      url: "testserver.php",
      success: function() {alert("Success")},
      error: function() {alert("Error")},
      dataType: "json",
      type: "get"
    });
  });
</script>

testserver.php:

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

両方のファイルが同じサーバー上でホストされている場合、AJAX リクエストは成功する。ただし、それらが異なるサーバーに配置されている場合、リクエストは失敗し、「エラー」アラートがトリガーされます。これは、クロスドメイン データ共有を制限するブラウザの Same Origin Policy (SOP) が原因です。

解決策: JSONP を利用する

SOP を克服するには、次のことが考えられます。 JSONP (JSON with Padding) を採用します。 JSONP では、データを関数呼び出しとして送信できるため、SOP によって課せられた制限を回避できます。

jQuery:

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Notice! JSONP < - P (lowercase)
  success: function(json){
    // do stuff with json (in this case an array)
    alert("Success");
  },
  error: function(){
    alert("Error");
  }
});

PHP:

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo $_GET['callback'] . "(" . json_encode($arr) . ");";
?>

この変更されたコードでは、JavaScript リクエストに次のものが含まれます'dataType: 'jsonp' は、JSONP の使用を示します。 PHP スクリプトは、jQuery によって送信されたコールバック関数名を「$_GET['callback']」経由で取得し、それを使用して出力を形成します。 PHP スクリプトの出力は、コールバック関数として表示され、その後に JSON データが続き、データが関数呼び出しとして転送されるようにする必要があります。

あるいは、jQuery は、処理の短縮形である $.getJSON() メソッドを提供します。 JSONP リクエスト。ただし、URL に「callback=?」を含める必要があります。 GET パラメータとして、jQuery が独自のコールバック メソッドを動的に挿入します。

以上がJSONP は jQuery のクロスドメイン AJAX 通信の問題をどのように解決できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。