プロジェクト開発でクロスドメインの問題に遭遇したとき、それらは一般にJSONPを介して解決されます。しかし、JSONPとは何か、実装の原則は何ですか。プロジェクトの自由時間に慎重に勉強できます。
1。jsonpとは何ですか？
JSONPを理解するには、JSONに言及する必要があります。
JSONは、JavaScriptのオブジェクトリテラル表記のサブセットです。 JSONはJavaScriptのサブセットであるため、MUSや大騒ぎのない言語で使用できます。
JSONP（JSON With Padding）は、サーバー側のスクリプトタグの統合をクライアントに戻すことを可能にする非公式プロトコルであり、JavaScriptコールバックの形式でクロスドメインアクセスが実現されます（これはJSONPの単純な実装です）。
2。JSONPの使用は何ですか？
同種のポリシーの制限により、XMLHTTPRequestでは、現在のソース（ドメイン名、プロトコル、ポート）のリソースのみが許可されます。クロスドメイン要求を実装するために、スクリプトタグを使用してクロスドメイン要求を実装し、サーバーにJSONデータを出力してコールバック関数を実行して、クロスドメインデータリクエストを解決できます。
JSONPの世代
1.私たち全員が知っているように、Ajaxリクエストリソースは、静的リソース、動的ページ、またはWebサービスであろうと、同じドメインによって制限されています。
2。同時に、WebページでJSファイルを呼び出すとき、それらはクロスドメインの影響を受けないことがわかりました（それだけでなく、属性のすべてのタグが<script>、<img>、<iframe>などのクロスドメイン機能を持っていることもわかりました。
3.現在、Web（ActiveXコントロール、サーバーエージェント、HTML5 WebSocketなど）を介してドメイン全体のデータにアクセスする場合は、1つの可能性しかありません。つまり、サーバーはデータをJS形式ファイルに通話して処理するためのJS形式ファイルにロードします。
4。データ送信。 JSONと呼ばれる純粋な文字データ形式は、複雑なデータ構造を簡潔に説明できることを知っています。また、JSによってネイティブにサポートされています。クライアント上のこの形式でデータを簡単に処理できます。
5.ソリューションは一目ではっきりしています。 Webサイドは、呼び出しスクリプトと同じ方法で、Cross-Domainサーバー上の動的に生成されたJSファイルを呼び出します。サーバーがJSファイルを動的に生成したい理由は、クライアントのコールバック関数名を取得し、クライアントが必要とするデータをJSON（または純粋な文字列）形式に渡すことです。
6。クライアントがJSファイルを正常に呼び出すと、コールバック関数のパラメーターが取得されます。残りはデータの処理です。この方法はAjaxに非常に似ていますが、同じではありません（jQueryはJSONPとAjaxを一緒にカプセル化します。理解できない場合は、混乱します）
7.クライアントがデータを使用するように促進するために、非公式の伝送プロトコルが徐々に形成されました。人々はそれをjsonpと呼んでいます。このプロトコルの重要なポイントの1つは、ユーザーがコールバックパラメーターをサーバーに渡すことを許可することです。サーバーがデータを返すと、コールバックパラメーターが関数名として使用されてJSONデータをラップするため、クライアントは独自の関数をカスタマイズして戻りデータを自動的に処理できます。
OK、Jsonpを理解しているかどうかはわかりません。そうでない場合は、要約します。あなたがそれを持っていないなら、私を襲わないでください。
実際、原則は、クライアントがリンクを要求し、必要なパラメーターを追加することです。コールバックとは、JSONPリクエストであることを意味します（フロントエンドとバックエンドは、それ自体で統合できます）。バックグラウンドはリクエストリンクを解析し、JSONPリクエストであることがわかります。次に、呼び出しメソッドを生成し、要求パラメーターに従って文字列（JSONまたは純粋な文字列にすることができます）を動的に生成します。このようにして、クライアントはデータにアクセスし、後続の処理を実行できます。
多くのことを言って、コードを追加しないのは私のスタイルではなく、コードを追加しています。 。
function test（data）{console.log（data）} var url = "http://www.x.com/test?a = 1&callback=test" //パラメーターをx.com/testに1の値を渡し、呼び出される関数名は「テスト」//バックグラウンド処理は、次の（データ架空の）テスト（ "aaaaaa"）テスト（{a：1、b：2}）// scriptタグを介してアクセスして実行します。 document.getElementsByTagname（ 'head'）[0] .appendChild（script）; //ページテスト方法が呼び出されます。これはJSONPの実装原則です。JQueryのJsonpの現実について
$ .ajax（{type： "get"、url： "http：//xdcn/asych/adv.html？loc = 8＆callback =？"、//背景にJSONPリクエストは、どのような方法を呼び出す必要があるかを伝えますか？成功にトリガー）タイプ： "post"、// jsonpは、datatypeにリクエストタイプを設定しても、jsonp "にリクエストタイプを設定しても、jsdata：{a：" 1 "}、qucuse afted afted afted（" 1 "}、qusted afted afted function（" 1 "}、function）{a：" 1 "}、function（a：" 1 "}、function）をロードするためのスクリプトタグを生成する必要があります。 "？"）$（ "body"）。append（data）;}、*/error：function（xmlhttprequest、textStatus、errorthrown）{//alert( errortrown）;} (function(function（ "body"）.pedend（data）;}）;上記のコードとコメントを読んだ後、誰もがそれを理解していると思います。 jQueryはjsonpをajaxにカプセル化しますが、本質的に異なります。
Ajaxのコアは、XmlhttpRequestを介してこのページ以外のコンテンツを取得することです。一方、JSONPのコアは、サーバーが提供するJSスクリプトを呼び出すために<script>タグを動的に追加することです。
したがって、AJAXとJSONPの違いは、それがクロスドメインかどうかではありません。 Ajaxは、サーバー側のプロキシを介してクロスドメインを達成することもでき、JSONP自体は同じドメイン内のデータの取得を除外しません。
上記のように、JSONPとAjaxのデータ形式はJSONである必要はありませんが、純粋な文字列であることもあります。
要するに、JSONPはAjaxのサブセットではなく、jQueryがJSONPをAjaxにカプセル化したとしても、これを変更することはできません。
上記は、あなたに紹介されたJS JSOPのクロスドメイン要求の例の詳細な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！