2

このJohnResigの記事では、彼はjavascriptを使用して辞書サイズの単語リストを扱っており、CDNからajaxを介してコンテンツを読み込んでいます。

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

ただし、問題があります。CDNから辞書を読み込めません。CDNは別のサーバー（またはここでの場合のように別のサブドメイン）にあるため、これらのタイプのリクエストを禁止するブラウザーのクロスオリジンポリシーに翻弄されます。ただし、すべてが失われるわけではありません。辞書ファイルを微調整するだけで、ドメイン間でロードできます。

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

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

これにより、ファイルに対してAjaxリクエストを実行し、期待どおりに機能させることができます。その一方で、ブラウザーによって提供されるすべてのキャッシュと圧縮の恩恵を受けます。

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

それ（関数+パラメーターに変換する）は本当に必要なすべてですか？そして、なぜJSONPはクロスドメインアクセス制限の問題を解決するのですか？

4

3 に答える 3

6

タグは、<script>どこからでも任意の JS ファイルをロードできます (クロスドメインであっても)。それに付随する優れた点は、そのスクリプト内のコードも実行されることです。したがって、クロスドメイン制限をバイパスする方法です.

問題は、コードが実行されると、グローバル スコープで実行されることです。このコードを持っている：

var test = 'foo'

testグローバルスコープで変数を作成します。

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

したがって、外国語のスクリプトが次の場合:

myFunction({
    test : 'foo'
});

value を持つ key を持つmyFunctionオブジェクトを呼び出して渡します。受信関数は次のようになります。testfoo

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

これで、クロスドメイン制限をうまく回避できました。必要な重要な部品は次のとおりです。

  • 受信関数 (使用後に動的に作成および破棄できます)
  • 「パディングされた」JSON 応答
于 2012-05-07T16:27:45.877 に答える
3

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

「パディング付きJSON」は、基本のJSONデータ形式を補完するものです。これは、異なるドメインのサーバーからデータを要求する方法を提供します。これは、同一生成元ポリシーのために通常のWebブラウザーでは禁止されています。

これは、スクリプト要素の挿入を介して機能します。

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

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

于 2012-05-07T16:25:16.767 に答える
3

それ（関数+パラメーターに変換する）は本当に必要なすべてですか？

はい。

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

JSONPについて読む必要があります。<script>アイデアは、AJAXリクエストを送信する代わりにリソースを動的に指すタグを含めることができるようになったことです（これは禁止されています）。また、コンテンツを関数名でラップしているため、この関数が実行され、JSONオブジェクトが引数として渡されます。したがって、あとはこの関数を定義するだけです。

于 2012-05-07T16:25:23.677 に答える