このクロスドメイン要求の回避策はなぜ機能しますか？

Question

this John Resig articleでは、彼はjavascriptで辞書サイズの単語リストを扱っており、彼はCDNからajax経由でコンテンツを読み込んでいます。

単語は、単語を区切る改行で読み込まれます。その後、クロスドメインが失敗すると彼は言う：

私はCDNから辞書を読み込むことはできません！ CDNは別のサーバー（または別のサブドメイン、ここでは ）に配置されているため、ブラウザのクロスオリジン ポリシーでこれらの種類の要求を禁止しています。すべてが失われていません - 辞書ファイルにシンプルな微調整を加えて、 ドメインに読み込むことができます。

まず、辞書ファイル内のすべてのエンドラインをスペースで置き換えます。 次に、行全体をJSONPステートメントでラップします。したがって、最後の の結果は次のようになります。

dictLoaded（ 'aah aaing aahing aahs aal ... zyzzyvas zzz'）;

これにより、ファイルにAjaxリクエストを行い、ブラウザが提供するすべてのキャッシングと 圧縮の恩恵を受けながら、 が期待するように動作させることができます。

私がこれを正しく読んでいる場合は、元のコンテンツだけに彼のメソッドdictLoaded('original content')を追加するだけで、ajaxリクエストが失敗しなくなります。

これは実際にはすべて（関数+パラメータに変換）ですか？ JSONPがクロスドメインアクセス制限の問題を解決するのはなぜですか？

Answer 1

<script>タグはどこからでも（たとえクロスドメインでも）JSファイルをロードできます。それに付随する素晴らしいことは、スクリプト内のコードも実行されるため、ドメイン間の制限をバイパスする方法です。

コードが実行されると、グローバルスコープで実行されるという問題があります。したがって、このコードを持つ：

var test = 'foo' 

test変数がグローバルスコープ内に作成されます。

これを軽減するには、返信を関数で囲みます。これは「パディング」を意味する「JSONP」の「P」です。これは、関数呼び出しで応答を囲みます。

は、だからあなたの外国人のスクリプトがある場合：

は

myFunction({ 
    test : 'foo' 
}); 

それはmyFunctionを呼び出し、値fooを持つtestキーを持つオブジェクトを渡します。受信機能は次のようになります。

function myFunction(data){ 
    //"data.test" is "foo" 
} 

これで、クロスドメイン制限をバイパスできました。必要不可欠な部品は以下のとおりです。

• （動的に使用した後に作成および破棄することができる）受信機能
• 「パディング」JSON

Answer 2

彼が追加したJSONPステートメントのためです。

「JSON with padding」は、ベースのJSONデータ形式を補うものです。同じドメインポリシーのため、一般的なWebブラウザでは禁止されている、異なるドメインのサーバーからデータを要求する方法を提供します。

これはスクリプト要素の注入によって機能します。

JSONPは、スクリプト要素とともに使用する場合にのみ意味があります。新しいJSONPリクエストごとに、ブラウザは新しい要素を追加するか、既存の要素を再利用する必要があります。前者のオプション（新しいスクリプト要素の追加）は、動的DOM操作を介して行われ、スクリプト要素の注入と呼ばれています。要素はHTML DOMに挿入され、目的のJSONPエンドポイントのURLが「src」属性として設定されます。この動的スクリプト要素の注入は、通常、javascriptヘルパーライブラリによって行われます。 jQueryと他のフレームワークにはjsonpヘルパー関数があります。スタンドアロンのオプションもあります。

出典：http://en.wikipedia.org/wiki/JSONP

Answer 3

は（機能+ PARAMにそれを回す）ということですそれが取るすべて本当に？

はい。

なぜそれがクロスドメインアクセス制限の問題を解決しますか？

JSONPについてお読みください。 AJAXリクエスト（これは禁止されています）を送信するのではなく、リソースを動的に指す<script>タグを含めることができるようになりました。そして、関数名で内容をラップしたので、この関数は実行され、JSONオブジェクトの引数として渡されます。ですから、この機能を定義するだけです。