この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › フロントエンド設計とウェブ › フロントエンドフレーム › JSONP - Ajaxにおけるクロスドメインアクセスの問題解決
眺める： 12584|答える： 0

[Jquery] JSONP - Ajaxにおけるクロスドメインアクセスの問題解決

[リンクをコピー]
掲載地 2015/12/28 14:22:00 | | |

長い間エッセイを書いていなかったし、いつも時間がない気がするけど、実は時間は... もう無意味な話はやめておき、数日前には職場で新しい要件があり、フロントエンドのウェブページが情報を返すためにバックエンドの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スクリプトに巻き込むことで、同じオリジンポリシーの制約を突破し、クロスドメインアクセスの問題を解決します。

それを実現する方法を見てみましょう。

フロントエンドコード:






先の：Winフォーム間のデリゲート値
次に：同じWindowsマシン上で複数のMemcachedサービスを起動する

関連記事
免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com