JSONPを使用してクロスドメイン要求を実装する

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

Asynchronous JavaScript and XML( Ajax )は、次世代のWebサイト(Web 2.0サイトの一般的な用語)を推進する重要な技術です。 Ajaxを使用すると、Webアプリケーションの表示や動作を妨げずに、バックグラウンドでデータを取得できます。 XMLHttpRequest関数を使用してデータを取得します。これは、クライアント側のJavaScriptがHTTP経由でリモートサーバーに接続できるようにするAPIです。 Ajaxは、複数の場所のコンテンツを単一のWebに統合する多くのマッシュアップの原動力でもあります
アプリケーション。

ただし、この方法ではブラウザの制限によりドメイン間通信が許可されません。 別のドメインからデータを要求しようとすると、セキュリティエラーが発生します。 データが存在し、各要求が同じドメインに移動するリモートサーバーを制御できる場合、これらのセキュリティエラーは回避できます。 しかし、あなたが自分のサーバーにとどまっているだけの場合、Webアプリケーションの使用はどうですか? 複数のサードパーティ製サーバーからデータを収集する必要がある場合はどうすればよいですか?

同じ起源戦略を理解する

同一起点ポリシーは、あるドメインからロードされたスクリプトが別のドメインのドキュメントプロパティを取得または操作しないようにします。 つまり、要求されたURLのドメインは、現在のWebページのドメインと同じでなければなりません。 つまり、ブラウザーは異なるソースからコンテンツを分離して、それらの間の操作を防ぎます。 このブラウザ戦略は非常に古く、Netscape Navigator 2.0リリース以来のものです。

この制限を克服する比較的簡単な方法は、WebページがそのWebサーバーからデータを要求し、Webサーバーがその要求をプロキシのような実際のサードパーティサーバーに転送させることです。 この技術は広く使われていますが、スケーラビリティはありません。 別の方法は、フレームワーク要素を使用して現在のWebページに新しいゾーンを作成し、 GETリクエストを使用してサードパーティリソースを取得することです。 しかし、リソースが獲得された後、フレームワーク内のコンテンツは同じ起点ポリシーによって制限されます。

この制限を克服するより良い方法は、他のドメインのサービスURLを指す動的スクリプト要素をWebページに挿入し、独自のスクリプトでデータを取得することです。 スクリプトのロード時に実行を開始します。 同じ起源の方針が動的なスクリプトの挿入を妨げず、スクリプトがWebページを提供するドメインからロードされていると考えられるため、この方法が可能です。 しかし、スクリプトが別のドメインからドキュメントを読み込もうとすると、成功しません。 幸いにも、このテクニックはJavaScript Object Notation(JSON)を追加することで改善できます。

1. JSONPとは何ですか?

JSONPを理解するためには、JSONについて言及する必要があります 。次にJSONとは何ですか?

JSONはJavaScriptのオブジェクトリテラル表記法のサブセットです.JSONはJavaScriptのサブセットであるため、mussやfussのない言語で使用できます。

JSONP(JSON with Padding)は、スクリプトタグのサーバー側の統合をクライアントに返す非公式のプロトコルで、JavaScriptコールバックによるクロスドメインアクセスを可能にします(JSONPの単なる実装です)。

2. JSONPの使い方は?

XmlHttpRequestは、同じ発信元ポリシーの制限により、現在のソース(ドメイン名、プロトコル、ポート)リソースの要求のみを許可します。クロスドメイン要求を実装するには、スクリプトタグを使用してクロスドメイン要求を実装し、JSONデータをサーバーに出力してコールバック関数を実行します。それにより、クロスドメインデータ要求を解決する。

3. JSONPの使い方は?

以下のDEMOは実際にはJSONPの単純な表現です。クライアントがコールバック関数を宣言すると、クライアントはスクリプトタグを介してサーバーからデータを要求し、サーバーは対応するデータを返し、コールバック関数を動的に実行します。

HTMLコード(任意):

HTMLコード コレクションコード

関数jsonpCallback(結果){//アラート(結果); for </ tt> </ tt> <meta type = "text / html; charset = utf-8" 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コード コレクションコード

<code type = "text / javascript"> jsonpCallback(result){alert(result.a); alert} (結果のb); alert(result.c); for(var i in result){alert(i + ":" + result [i]); //ループ出力a:1、b:2など}} </ script> <script type = "text / javascript" src = "http://crossdomain.com/services.php?callback=jsonpCallback"> </ script>

JavaScriptリンクは関数の下になければなりません。

サーバーPHPコード(services.php):

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)";

jQueryで上記のJSクライアントコードを実装すると、非常に簡単です。

$ .getJSON
$ .ajax
$ .get

jQueryのクライアントJSコード実装1:

Jsコード コレクションコード

<script type = "text / javascript" src = "jquery.js"> </ script> <script type = "text / javascript"> $ .getJSON( "http://crossdomain.com/services.php?callback= (i + ":" + result "); //循環出力a:1、b:2など}); </ script >

jQuery 2でのクライアントJSコードの実装:

Jsコード コレクションコード

<script type = "text / javascript" src = "jquery.js"> </ script> <script type = "text / javascript"> $ .ajax({url: "http://crossdomain.com/services.php ";データタイプ: 'jsonp'、データ:"、jsonp: 'コールバック'、成功:関数(結果){for(var i in result){alert(i + ":" + result [i]); //循環出力a:1、b:2など}}}、タイムアウト:3000}); </ script>

jQuery 3でのクライアントJSコードの実装:

Jsコード コレクションコード

</ script> <script type = "text / javascript"> $ .get( 'http://crossdomain.com/services.php?callback= (i + ":" + json [i]);}、 'jsonp'); </ script> {(json内のvar i)

jsonCallbackは、クライアントが登録した関数で、クロスドメインサーバ上でjsonデータを取得した後にコールバックを取得します。
http://crossdomain.com/services.php?callback=jsonpCallback
このURLは、クロスドメインサーバからのJSONデータのインタフェースです。パラメータはコールバック関数の名前です。返される形式は次のとおりです。

Jsコード コレクションコード

jsonpCallback({msg: 'これはjsonデータです'})

Jsonpの原則:
まず、クライアントにコールバックを登録し、コールバックの名前をサーバーに渡します。

この時点で、サーバーはjsonデータです。
JavaScriptの構文では、関数を生成し、関数名にはパラメータjsonpが渡されます。

最後に、jsonデータはパラメータとして関数に直接配置され、js構文のドキュメントを生成し、それをクライアントに返します。

クライアントブラウザはスクリプトタグを解析し、返されたjavascriptドキュメントを実行します。この時点で、データはパラメータとしてクライアントの事前定義されたコールバック関数に渡されます(動的実行コールバック関数)

JSONを使用する利点は次のとおりです。

XMLよりもはるかに軽く、冗長ではありません。 JSONも非常に読みやすいですが、通常はリターンが圧縮されます。 XML以外のブラウザーを直接表示することができ、ブラウザーはJSONのフォーマットされた表示にいくつかのプラグインを使用する必要があります。 JSONをJavaScriptで処理するのは簡単です。 JSONのためのPHPサポートなどの他の言語も良いです。

JSONにもいくつかの欠点があります。

JSONのサーバー側言語に対するサポートは、XMLほど広範ではありませんが、JSON.orgは多くの言語のライブラリを提供しています。 解析するためにeval()を使用すると、セキュリティ上の問題が発生しやすくなります。

それでもJSONの利点は明らかです。 彼はAjaxデータとやり取りする理想的な方法です。


主なヒント:

JSONPはマッシュアップを構築するための強力なテクノロジーですが、残念ながら、すべてのドメイン間通信のニーズに対応する万能薬ではありません。 開発リソースを提出する前に慎重に検討しなければならない欠点がいくつかあります。

最初の最も重要な点は、JSONP呼び出しのエラー処理がないことです。 動的スクリプト挿入が有効な場合は呼び出しが実行され、無効な場合は暗黙的に失敗します。 失敗のヒントはありません。 たとえば、サーバーから404エラーを取得することはできず、要求を取り消したり再起動することもできません。 しかし、しばらく応答しなかった場合は、心配する必要はありません。 (将来のjQueryバージョンには、JSONPリクエストを終了する機能があるかもしれません)。

JSONPのもう1つの大きな欠陥は、信頼できないサービスで使用されると危険な可能性があることです。 JSONPサービスは関数呼び出しでパッケージ化されたJSON応答を返し、関数呼び出しはブラウザによって実行されるため、ホストWebアプリケーションはさまざまな種類の攻撃に対してより脆弱になります。 JSONPサービスを使用する予定の場合は、その脅威を理解することが重要です。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ