ホームページ > 記事 > ウェブフロントエンド > jsonpとは何ですか? jsonpの原理を詳しく解説
jsonpとは何ですか? jsonpの原理を詳しく解説
- 不言オリジナル
- 2018-10-15 10:51:574376ブラウズ
jsonpとは何ですか?使用は何ですか？この記事では、jsonp について説明し、jsonp の原則を理解する必要がある人は参照してください。
早速、本文に進みましょう~
jsonp とは何ですか?
jsonp の定義はインターネットから見つけることができます。 JSONP (JSON with Padding) は JSON の「使用モード」であり、クロスドメイン データ アクセスを解決するために使用できます。主流のブラウザの質問。同一生成元ポリシーにより、通常は次の場所にあります。 server1.example.com の Web ページは、server1.example.com 以外のサーバーと通信できず、HTML 3f1c4e4b6b16bbbd69b2ee476dc4f83a要素は例外です。 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素のこのオープン ポリシーを使用すると、Web ページは他のソースから動的に生成されたスクリプトを取得できます。 JSON データ。この使用パターンは JSONP と呼ばれます。 実際、簡単に言うと、jsonp はクロスドメイン要求の問題を解決するために使用される軽量のデータ送信形式です。
jsonp
ajax リクエストは同一生成元ポリシーの影響を受け、クロスドメイン リクエストを許可しない、および script タグの原則を分析しましょう。 src 属性 内のリンクはクロスドメイン js スクリプトにアクセスできます。この機能を使用すると、サーバーはデータを JSON 形式で返すのではなく、src で呼び出される特定の関数を呼び出す js コードを返すため、クロスドメインが実現されます。
jsonp の例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body> <
script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
$(document).ready(function(){
var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>ここでは script タグが動的に追加され、src はクロスドメイン PHP スクリプトを指し、上記の js 関数名がコールバックとして渡されます。パラメータを入力してから、PHP コードがどのように記述されているかを見てみましょう:
<?php
$data = array( 'age' => 20, 'name' => '张三', );
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
return;PHP コードは JS ステートメント、つまり
この時点でページにアクセスすると、スクリプトが返されます。タグが動的に追加され、src が PHP スクリプトを指し、返された JS コードを実行すると、プロンプト ボックスが正常にポップアップ表示されます。
そのため、JSONP では、クロスドメイン リクエストへのアクセスがリモート JS コードの実行に変わり、サーバーは JSON 形式でデータを返さなくなり、JSON データを受信パラメータとして使用する関数実行コードを返します。
この記事はここで終わります。jsonp 関連のコンテンツについては、php 中国語 Web サイトを参照してください。 ！ ！
以上がjsonpとは何ですか? jsonpの原理を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。