AngularJS での JSONP インスタンスの解析

コンセプト

まず第一に、JsonとJSONPは異なります。 Json は、数多くあるデータ保存形式の 1 つであり、データの書き込み方法の 1 つです。これは、中華圏に数多くある詩形式 (たとえば、七文字詩) の 1 つのようなものです。この詩のスタイルには次のことが規定されています。 この詩のスタイルには、タイトル、詩の 1 行あたりの単語数 (7 単語) などが含まれていなければなりません。 テキスト形式。 Jsonで指定するテキスト形式はこんな感じです

(Json形式図)

JSONPに関しては、ブラウザの同一生成元セキュリティ制限を簡単に回避できる特殊な通信方式です(さまざまなソースからのスクリプト、画像、その他）。たとえば、あなたは王国の王子で、近くの小さな町に住む美しい若い女の子 (リソース) に突然恋に落ちます。あなたは、彼女に会ってさらに発展したいと考えています (リソースを入手)。しかし、あなたの父親であるキング氏（ブラウザ）は、この女の子は王室の女の子ではなく、王子にふさわしくないと信じており、王子を城に閉じ込めます。城外にも解放されており、多くの兵士が監視しており、部外者は立ち入り禁止となっている（ブラウザの同一生成元セキュリティ制限）。しかし、王子は恋に非常に執拗で、宦官オバに美しい少女に手紙を持ってくるように頼むなど、さまざまな方法で少女に連絡を取ろうとしましたが（PUT、GET、POSTなど）、都市に到着するたびに。ゲート、 、兵士は手紙のアドレスが少女宛であることに気づき、宦官の外出を繰り返し禁止しました (外部リソースを取得する場合、PUT、GET、および POST は機能しませんでした)。そこで王子は、JSONP という特別な通信方法を考えました。これにより、小さなハトは城を飛び回って、兵士の監視を回避して (ブラウザの同一生成元セキュリティ制限を回避して)、女の子と通信することができます。クロスドメインリソース共有CORSが実装されましたO(∩_∩)O)。 9981回の困難を乗り越え、ついに王子は宦官に恋をしました(∑(っ°Д °;)っ人生は驚きに満ちています...)

具体的な実装方法

このコミュニケーション効果を達成するには、王子(リクエストを送る手段)と女の子(サーバー)を準備する必要があります。

王子が JSONP リクエストを送信するときは、まずハト (Jsonp を使用) が必要です。次に、ハトに関連付けられたレター (アドレス バーのコールバック パラメーター) が必要です

$http.jsonp("https:/// api.github.com?callback=CALLBACK").success(function(data){//...})

女の子が子ハトから手紙を受け取ったら、その内容を小さな鳩からの手紙にも書く必要があります。ハト、レターに返信する（応答内容をコールバックパラメータを介してJavaScriptパラメータにパッケージ化し、リクエストに対応するコールバック関数で呼び出す）

データのパッケージ化方法

res.send([コールバック関数] + '('+ JSON.stringify(result) + ')');

その他の詳細

JSONP を使用する場合、AngularJS は応答が成功した後、<script> タグを DOM に挿入します。ノードの削除になります（ノードの削除はAngularのバージョンによって異なる場合があります） </script>

このうち、CALLBACKはこのリクエスト専用に生成されたカスタム関数に置き換えられます

$http.jsonp("https://api. github.com?callback=CALLBACK")...) は

になります、JSONP バックエンド サービスを独自に開発する場合、リクエストで指定されたコールバック関数に応答データが含まれていることを確認する必要があります

Notes

JSONP ではバックエンド サービスの呼び出しが許可されているため、JSOPN の使用には潜在的なセキュリティ リスクがあります。アプリケーションの JavaScript によりサイトが脆弱になり、ユーザーのプライバシーが漏洩する可能性もあります