JSONP (JSON with Padding) は、サーバー側でスクリプト タグを統合してクライアントに返すことを可能にする非公式プロトコルで、JavaScript コールバックの形式でクロスドメイン アクセスを可能にします (これは単なる JSONP の実装です)。
非同期 JavaScript および XML (Ajax) は、新世代の Web サイト (一般に Web 2.0 サイトとして知られています) を推進する主要なテクノロジです。 Ajax を使用すると、Web アプリケーションの表示や動作を妨げることなく、バックグラウンドでデータを取得できます。 XMLHttpRequest 関数を使用してデータを取得します。これは、クライアント側 JavaScript が HTTP 経由でリモート サーバーに接続できるようにする API です。 Ajax は、複数の場所のコンテンツを 1 つの Web アプリケーションに統合する多くのマッシュアップの原動力でもあります。
ただし、ブラウザーの制限により、この方法ではクロスドメイン通信は許可されません。別のドメインからデータをリクエストしようとすると、セキュリティ エラーが発生します。データが存在するリモート サーバーを制御でき、すべてのリクエストが同じドメインに送信される場合、これらのセキュリティ エラーは回避できます。しかし、Web アプリケーションが独自のサーバー上に留まるだけでは、何の役に立つのでしょうか?複数のサードパーティサーバーからデータを収集する必要がある場合はどうすればよいでしょうか?
同一生成元ポリシーの制限を理解する
同一生成元ポリシーは、あるドメインに読み込まれたスクリプトが別のドメインのドキュメント プロパティを取得または操作することを防ぎます。つまり、要求された URL のドメインは、現在の Web ページのドメインと同じである必要があります。これは、ブラウザがさまざまなソースからコンテンツを分離して、ソース間での操作を防止することを意味します。このブラウザ ポリシーは古いもので、Netscape Navigator バージョン 2.0 から存在しています。
この制限を克服する比較的簡単な方法は、Web ページが元の Web サーバーにデータを要求し、Web サーバーがプロキシのように機能して、その要求を実際のサードパーティ サーバーに転送することです。このテクノロジーは広く使用されていますが、拡張性がありません。もう 1 つの方法は、フレーム要素を使用して現在の Web ページ内に新しい領域を作成し、GET リクエストを使用してサードパーティのリソースを取得することです。ただし、リソースを取得した後は、フレーム内のコンテンツは同一生成元ポリシーによって制限されます。
この制限を克服するより理想的な方法は、ソースが別のドメインのサービス URL を指す動的スクリプト要素を Web ページに挿入し、独自のスクリプトでデータを取得することです。スクリプトがロードされると実行が開始されます。このアプローチが機能するのは、同一生成元ポリシーが動的スクリプトの挿入を妨げず、スクリプトが Web ページを提供するドメインから読み込まれたかのように扱われるためです。ただし、スクリプトが別のドメインからドキュメントをロードしようとすると、成功しません。幸いなことに、この手法は JavaScript Object Notation (JSON) を追加することで改善できます。
1. JSONPとは何ですか?
JSONP を理解するには、JSON について触れなければなりません。それでは、JSON とは何でしょうか?
JSON は JavaScript のオブジェクト リテラル表記のサブセットです。JSON は JavaScript のサブセットであるため、問題なく言語で使用できます。
JSONP (JSON with Padding) は非公式のプロトコルです。サーバー側でスクリプト タグを統合し、それらをクライアントに返すことで、JavaScript コールバックの形式でクロスドメイン アクセスが可能になります (これは単なる JSONP の実装です)。
2. JSONP の用途は何ですか?
同一オリジンポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみをリクエストできます。クロスドメインリクエストを実装するには、クロスドメインリクエストを実装します。スクリプト タグを通じて JSON データをサーバーに出力し、コールバック関数を実行してクロスドメイン データ リクエストを解決します。
3. JSONP の使用方法?
以下のデモは、実際には JSONP の単純な表現です。クライアントがコールバック関数を宣言した後、クライアントはスクリプト タグを通じてサーバーにクロスドメイン データを要求し、サーバーは対応するデータを返し、コールバックを動的に実行します。関数。
HTML コード (いずれか):
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>または
HTML コード
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>JavaScript リンクは関数の下にある必要があります。
サーバーサイド PHP コード (services.php):
<?php
//服务端返回JSON数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";上記の JS クライアント コードを jQuery を使用して実装する場合も、非常に簡単です。
$.getJSON
$.ajax
$.get
クライアント JS コードを jQuery 1 で実装する方法:
Js コード
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.getJSON("http://crossdomain.com/services.php?callback=?",
function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
});
</script>クライアント JS コードを jQuery 2 で実装する方法:
Jsコード
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
},
timeout:3000
});
</script>jQuery 3 でクライアント JS コードを実装する方法:
Js コード
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');
</script> ここで、 jsonCallback は、クロスドメイン サーバー上の JSON データを取得した後にコールバックするためにクライアントによって登録された関数です。
http://crossdomain.com/services.php?callback=jsonpCallback
この URL は、クロスドメイン サーバーが JSON データを取得するためのインターフェイスであり、パラメーターはコールバック関数の名前であり、返される形式は
です。 JS コード
jsonpCallback({msg:'this is json data'})Jsonp の原則:
まずクライアントでコールバックを登録し、次にそのコールバック名をサーバーに渡します。
このとき、サーバーは最初にjsonデータを生成します。
次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター jsonp.
です。最後に、json データがパラメーターとして関数に直接配置されるため、js 構文ドキュメントが生成され、クライアントに返されます。
クライアントのブラウザはscriptタグを解析し、返されたJavaScriptドキュメントを実行します。このとき、データはクライアントによって事前に定義されたコールバック関数にパラメータとして渡されます(コールバック関数の動的実行)。 JSON は:
XML よりもはるかに軽く、冗長なものがあまりありません。
JSON も非常に読みやすいですが、通常は圧縮されて返されます。ブラウザーで直接表示できる XML とは異なり、ブラウザーはいくつかのプラグインを使用して JSON をフォーマットする必要があります。
JavaScript での JSON の処理は簡単です。
PHP などの他の言語も JSON を適切にサポートしています。
JSON にはいくつかの欠点もあります。
JSON のサーバー側言語サポートは XML ほど広範囲ではありませんが、JSON.org は多くの言語のライブラリを提供しています。
eval() を使用して解析すると、セキュリティ上の問題が発生しやすくなります。
それにもかかわらず、JSON の利点は依然として明白です。これは、Ajax データ対話に理想的なデータ形式です。
重要なヒント:
JSONP はマッシュアップを構築するための強力なテクノロジーですが、残念ながら、すべてのクロスドメイン通信のニーズに対応する万能薬ではありません。これにはいくつかの欠陥があるため、開発にリソースを投入する前に慎重に検討する必要があります。
まず、そして最も重要なことは、JSONP 呼び出しにはエラー処理がありません。動的スクリプトの挿入が有効な場合、呼び出しは実行されます。無効な場合、呼び出しはサイレントに失敗します。失敗に対するプロンプトはありません。たとえば、404 エラーはサーバーから捕捉できず、リクエストをキャンセルしたり再開したりすることはできません。ただし、しばらく待っても応答がない場合は無視してください。 (jQuery の将来のバージョンには、JSONP リクエストを終了する機能が搭載される可能性があります)。
JSONP のもう 1 つの大きな欠点は、信頼できないサービスで使用すると危険になる可能性があることです。 JSONP サービスは、ブラウザーによって実行される関数呼び出しにラップされた JSON 応答を返すため、ホスト Web アプリケーションはさまざまな攻撃に対してより脆弱になります。 JSONP サービスを使用する予定がある場合は、それがもたらす可能性のある脅威を理解することが重要です。
上記は私があなたのためにまとめたものです。
関連記事:
h5 ajaxに基づいて携帯電話の測位を実装する H5の機能であるFormDataを利用して、更新せずにファイルアップロードを実現する さまざまなAJAXメソッドの使用方法を詳しく説明します以上がJSON データを取得するための AJAX クロスドメイン リクエスト JSONPの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
