今回は、JSONP が Ajax クロスドメイン アクセスを処理する方法について説明します。JSONP が Ajax クロスドメイン アクセスを処理する際の 注意事項 について説明します。実際のケースを見てみましょう。
数日前、仕事で新しい要件が発生しました。それは、フロントエンド Web ページがバックグラウンド Web サービス メソッドを非同期的に呼び出して情報を返す必要があるというものでした。実装方法は多数ありますが、この例では jQuery+Ajax を使用しています。完了後、サーバーにデプロイすると問題が発生しました。何が起こったのでしょうか。コードはあまり変更されていません。唯一の変更は、jQuery の ajax メソッドの URL アドレスです。これが問題なのでしょうか? 検査とデバッグの結果、ただし、クロスドメイン操作が避けられない場合があります。現時点では、「同一生成元ポリシー」が制限になっています。 JSONP クロスドメイン GET リクエストを使用するのが一般的なソリューションです。JSONP クロスドメインがどのように実装されるかを見て、JSONP クロスドメインの原理を調べてみましょう。ここで JSONP について言及されているので、JSON との違いは何ですか? という質問があったので、Baidu Encyclopedia に次の説明があります:JSON (JavaScript Object Notation) は軽量のデータ交換です。フォーマット。これは、JavaScript のサブセット (標準 ECMA-262 第 3 版 - 1999 年 12 月) に基づいています。 JSON は完全に言語に依存しないテキスト形式を使用しますが、C 言語 ファミリ (C、C++、C#、Java、JavaScript、Perl、Python などを含む) に似た習慣も使用します。これらの特性により、JSON は理想的なデータ交換言語になります。人間にとっては読み書きが容易であり、機械にとっても解析と生成が容易です（ネットワーク伝送速度が速い）。
JSONP (JSON with Padding) は、主流ブラウザーによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用モード」です。同一オリジン ポリシーにより、一般に、server1.example.com にある Web ページは、HTML の <script> 要素を除き、server1.example.com 以外のサーバーと通信できません。 <script> 要素のこのオープン ポリシーを使用すると、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンは JSONP と呼ばれます。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。 <span style="color: #ff0000">この時点で、JSON はデータを記述するために使用される、xml のような軽量のデータ交換形式であることを理解する必要があります。 JSONP は JSON データを使用する方法であり、返されるのは JSON オブジェクトではなく、JSON オブジェクトを含む JavaScript スクリプトです。 </script>
では、JSONP はどのように機能するのでしょうか? 同一生成元ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのリクエストのみを許可することがわかっています。セキュリティ上の理由からクロスドメインリクエストはできませんが、Webページ上でjsファイルを呼び出す場合はクロスドメインかどうかに影響されず、「src」属性を持つタグはクロスドメイン機能を持つことが分かりました。たとえば、
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
