PHP での Ajax クロスドメインソリューションの jsonp 例の分析-PHPチュートリアル-php.cn

PHP での Ajax クロスドメインソリューションの jsonp 例の分析

coldplay.xixi

リリース： 2023-04-09 12:56:01

転載

2737 人が閲覧しました

PHP での Ajax クロスドメインソリューションの jsonp 例の分析

この記事の例では、PHP での Ajax クロスドメインの jsonp ソリューションについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

まず、json と jsonp の違いについて説明しましょう。

Json は、テキストベースのデータ交換方法、またはデータを記述するための形式です。

関連する学習の推奨事項: php プログラミング (ビデオ)

var person = {
  "name": "test",
  "age": "25",
  "sex": "男"
};

var data = [1, 2, 3, 4, 5];

ログイン後にコピー

また、jsonp は非公式のクロスドメインデータ対話プロトコルであり、ユーザーがコールバックパラメーターをサーバーに送信すると、サーバーがデータを返すときに、このコールバックパラメーターを関数名として使用して JSON データをラップし、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。

たとえば、a.com の Web サイトで b.com の b.js を参照しましたが、そのようなクロスドメイン参照はエラーを引き起こしません。つまり、js ファイルを呼び出すときに、クロスドメインの影響を受けません。

<script type="text/javascript" src="http://www.b.com/b.js"></script>

ログイン後にコピー

次に、b.js に次のコードを追加して、実行できるかどうかを確認します。

alert("I from b");

ログイン後にコピー

実行できることを確認します。

では、a.com で js 関数を作成し、それを b.com の b.js で呼び出すことは可能でしょうか?

a.com 下のindex.html は次のとおりです。




  
  



  
  <script type="text/javascript" src="http://www.b.com/b.js"></script>

ログイン後にコピー

b.com 下の b.js は次のとおりです。

a("from b");

ログイン後にコピー

上記も実行できます。を見ると、b.js のデータが実際に関数 a に正しく渡されていることがわかります。

問題が再び発生します。a.com で作成された関数名は、b.js で呼び出される関数名と一致している必要があります。では、b.com サーバーにこの関数名を知らせるにはどうすればよいでしょうか?渡される場合は、渡す関数名に callback= を追加します。もちろん、コールバックの名前は変更できますが、誰もがこのように名前を付けるので、これは慣例です。

a.com のindex.html は次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="text/javascript">
    function a(data) {
      alert("uid :" + data.uid + "name :" + data.name);
    }
  </script>

  <!-- 注意这里把b.js改成b.php了 -->
  <script type="text/javascript" src="http://www.b.com/b.php?callback=a"></script>
</body>
</html>

ログイン後にコピー

b.com の b.php は次のとおりです。

<?php
$callback = !empty($_GET[&#39;callback&#39;]) ? trim($_GET[&#39;callback&#39;]) : &#39;&#39;;

if(!empty($callback)) {
  $data = json_encode(array(
    &#39;uid&#39; => 1,
    &#39;name&#39; => &#39;测试&#39;,
  ));

  echo "{$callback}({$data});";
}

ログイン後にコピー

上記も実行できます。コールバック関数名がわかっていると、b.com サーバーはデータを処理し、文字列連結を通じて出力します。

jquery はすでに jsonp のサポートを提供しています。a.com のindex.html は次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p class="info"></p>
  <script type="text/javascript" src="http://www.b.com/jquery.js"></script>
  <script type="text/javascript">
  $.ajax({
    dataType: "jsonp",
    url: "http://www.b.com/b.php",
    jsonp: "callback",
    success: function(data) {
      $(".info").text("uid:" + data.uid + " name:" + data.name);
    }
  });
  </script>
</body>
</html>

ログイン後にコピー

クロスドメインポリシー制限テーブルは次のとおりです:

#URL説明通信を許可http:// www.a.com/a.js同じドメイン名の下で許可http://www.a .com /lab/a.js同じドメイン名の異なるフォルダーAllowhttp:// www.a.com:8000/a.js同じドメイン名、異なるポート許可されませんhttp://www .a.com/a.js同じドメイン名、異なるプロトコル許可されませんhttp://www .a.com/a.jshttp ://www.a.com/a.js http://script.a.com/b.js#http ://www.a.com/a.js http://a.com/b.js許可されません http://www.b.com/b.js異なるドメイン名


http://www.a.com/b.js
http://www.a.com/script/b.js
http://www.a.com/b.js
https://www.a.com/b.js
http://127.0.0.100/b.js	ドメイン名とドメイン名に対応する IP アドレスは使用できません
メインドメインは同じですが、サブドメインは異なります	許可されません
同じドメイン名、異なる第 2 レベルドメイン名 (上記と同じ)		# #http://www.a.com/a.js
許可されません