JSONPはこの問題を解決することです。 JSONPは、JSONの英語のパディングによる略語であり、非公式のプロトコルです。これにより、サーバーはスクリプトタグのreturn値クライアントを生成し、JavaScriptコールバックの形式でサイトアクセスを実現できます。 JSONPはスクリプトタグインジェクションであり、サーバーによって返された応答をページに追加することは、特定の機能を実装することです。
要するに、JSONP自体は複雑なものではなく、SCIPTタグを介してブラウザの相同ポリシーをバイパスします。
今日、柔術の適用はますます効果的になりつつあります。多くのインターネット企業は、分散アーキテクチャを後の段階で使用します。
次に、ページ上の異なるドメイン名でJSONを呼び出すことに問題があります
（クロスドメイン：異なるドメイン名、同じドメイン名が異なるポート）
JavaScript仕様で言及されているJSONは、ドメイン全体で直接呼び出すことはできません。セキュリティのために、JSフラグメントを呼び出すことができます。
したがって、JSONをJSフラグメントにラップします。つまり、JSONP、そしてクロスドメインリクエスト
春4.1の後、JSONPへの呼び出しとして新しい方法が提供されます
例：
@RequestMapping（value = "/list"）@responsebody public object getItemcatlist（string callback）{itemcatresult result = itemcatservice.getItemcatlist（）; if（stringutils.isblank（callback））{//結果を文字列return resultに変換する必要があります。 } //文字列が空でない場合は、JSONPコールSpring4.1をサポートする必要があります。 mappingjacksonvalue mappingjacksonvalue = new mappingjacksonvalue（result）; mappingjacksonvalue.setjsonpfunction（callback）; Return MappingJackSonValue; }写真に示されているように、これはjsonpです
次に、JSONPを呼び出す必要がある限り、少し処理する必要がある後にドメイン間でデータを呼び出すことができます。
ページにJSONPを表示する例を作成しました。
（JSは少し醜いです。私はバックエンドで生まれました、そして、フロントエンドのヒーローはパットされます〜）
var menu = function（）{return {getMenudata：function（json）{console.log（json）; var data = json.data; var html = ""; for（var i = 0; i <data.length; i ++）{var url = data [i] .u; var name = data [i] .n; var sub = data [i] .i; html += "<li class = 'dropdown-submenu'>"; html += "<span class = 'c-arrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'dropdown-menu c-pull-right'>"; for（var j = 0; j <sub.length; j ++）{var url = sub [j] .u; var name = sub [j] .n; var node = sub [j] .i; html += "<li class = 'dropdown-submenu'>"; html + = "<a href = '" + url + "'>" + name; html += "<span class = 'c-arrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'dropdown-menu c-pull-right'>"; for（var k = 0; k <node.length; k ++）{// debugger var name = node [k]; var last = name.split（ "|"）; html += "<li>"; html + = "<a href = '" + last [0] + "'>" + last [1] + "</a>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } $（ "＃itemcatmenu"）。html（html）; }、getJSONP：function（serverurl、callbackfun）{$ .ajax（{type： "get"、url：serverurl、datatype： "jsonp"、jsonp： "callback"、jsonpcallback：callbackfun、success：function（json）{// console.log（e. {console.log（e）; }}; }（）; $（document）.ready（function（）{var serverurl = "http：// localhost：8088/rety/menu/list"; menu.getjsonp（serverurl、 "menu.getmenudata"）;}）;示された効果：