長い間エッセイを書いていなかったし、いつも時間がない気がするけど、実は時間は... もう無意味な話はやめておき、数日前には職場で新しい要件があり、フロントエンドのウェブページが情報を返すためにバックエンドのWebserviceメソッドを非同期呼び出す必要がありました。 実装方法は多様で、この例ではjQuery+Ajaxを使っています。完了後はローカルデバッグが問題ありませんが、サーバーにデプロイした後に問題が発生し、バックグラウンドサービスコールが応答しません。これは一体何が起きているのでしょうか? コード自体はあまり変わっていません。変わったのはjQueryのajaxメソッドのURLアドレスだけです。 ここでの問題は、チェックやデバッグの結果、同型ポリシーが問題であることが判明したことかもしれません。Javascrip{filtering}tやjQueryはウェブのフロントエンド開発でよく使われる動的スクリプト技術であることがわかっています。 Javascrip{filtering}tには「Same-Origin Policy」と呼ばれる重要なセキュリティ制限があります。 このポリシーは、Javascrip{filter}tコードがアクセスできるページの内容に重要な制限を課しています。すなわち、Javascrip{filtering}tは、その内容を含む文書やスクリプトと同じドメイン名のコンテンツのみにアクセスできます。 異なるドメインのスクリプト同士、すらサブドメイン内でアクセスできません。 同源戦略については、白度で詳しく説明できますが、ここでは繰り返しません。
しかし、時にはクロスドメイン操作を行うことが避けられず、「同質ポリシー」が制約となる場合、どうすればよいのでしょうか? JSONPクロスドメインの実装方法を見て、JSONPクロスドメインの原則について議論しましょう。
ここでJSONPが言及されているので、誰かがJSONPとの違いや違いを尋ねました。Baidu百科事典には以下の説明があります:
JSON(Javascrip{filtering}t Object Notation)は軽量なデータ交換フォーマットです。 これはJavascrip{filter}t(Standard ECMA-262 第3版 - 1999年12月)のサブセットに基づいています。 JSONは完全に言語に依存しないテキスト形式を使用しますが、Cファミリーに似た習慣(C、C++、C#、Java、Javascrip、Perl、Pythonなど)も使っています。 これらの機能により、JSONはデータ交換に理想的な言語となっています。 人間が読み書きしやすいだけでなく、機械による解析や生成も容易(高速ネットワーク伝送)です。
JSONP(パディング付きのJSON)は、主流ブラウザにおけるクロスドメインデータアクセスの問題を解決するために使える「使用パターン」の一種です。 同一起源ポリシーのため、一般的に server1.example.com 上にあるページは、HTMLの<scrip{filter}t>要素を除き、server1.example.com されていないサーバーと通信できません。 <scrip{filter}t>要素というオープン戦略を用いることで、ウェブページは他のソースから動的に生成されたJSONデータを取得でき、この利用パターンはJSONPとして知られています。 JSONPでキャプチャされるデータはJSONではなく、任意のJavascrip{filter}tであり、JSONパーサーで解析される代わりにJavascrip{filter}tトランスレーターで実行されます。
ここで理解すべきは、JSONはXMLのように軽量なデータ交換形式であり、データ間のデータを記述するために使われるということです。 JSONPはJSONデータを使う方法であり、JSONオブジェクトを返す代わりにjavascrip{filtering}tスクリプトでJSONオブジェクトを返します。
では、JSONPはどのように動作するのでしょうか?同一起源ポリシーの制約により、XmlHttpRequestは現在のソース(ドメイン名、プロトコル、ポート)からのリソースへのリクエストのみを許可することがわかっています。 セキュリティ上の理由からクロスドメインリクエストはできませんが、ウェブページでjsファイルを呼び出してもクロスドメインの影響を受けず、「src」属性を持つタグにはクロスドメイン機能があり、例えば<scrip{filter}t><img>, ,<iframe>クロスドメインリクエストを行いたい場合は、htmlのscrip{filter}tタグを使ってクロスドメインリクエストを行い、レスポンスで実行されるscrip{filtering}tコードを返します。そこからJSONを使ってjavascrip{filter}tオブジェクトを直接渡すことができます。 つまり、クロスドメインサーバー上でJSONデータを生成し、それをscrip{filtering}tスクリプトに巻き込むことで、同じオリジンポリシーの制約を突破し、クロスドメインアクセスの問題を解決します。
それを実現する方法を見てみましょう。
フロントエンドコード:
- function CallWebServiceByJsonp() {
- $("#SubEquipmentDetails").html('');
- $.ajax({
- type: "GET",
- cache: false,
- url: "http://servername/webservice/webservice.asmx/GetSingleInfo",
- data: { strCparent: $("#Equipment_ID").val() },
- dataType: "jsonp",
- //jsonp: "callback",
- jsonpCallback: "OnGetMemberSuccessByjsonp"
- });
- }
-
- function OnGetMemberSuccessByjsonp(data) {
- //处理data
- alert(data);
- }
|
掲載地 2015/12/28 14:22:00
|
|
|
