JSONP هو حل هذه المشكلة. JSONP هو اختصار JSON مع الحشو باللغة الإنجليزية وهو بروتوكول غير رسمي. يسمح للخادم بإنشاء عميل إرجاع علامات البرنامج النصي ، وإدراك الوصول إلى الموقع من خلال شكل رد اتصال JavaScript. JSONP هو حقن علامة البرنامج النصي ، وإضافة الاستجابة التي يتم إرجاعها بواسطة الخادم إلى الصفحة هي تنفيذ وظائف محددة.
باختصار ، JSONP نفسه ليس شيئًا معقدًا ، فهو يتجاوز السياسة المتماثلة للمتصفح من خلال علامة SCIPT.
في الوقت الحاضر ، أصبح تطبيق جوشي أقل فاعلية. ستستخدم العديد من شركات الإنترنت البنية الموزعة في المراحل اللاحقة.
ثم هناك مشكلة في الاتصال بـ JSON تحت أسماء مجال مختلفة على الصفحة
(المجال المتقاطع: أسماء مجالات مختلفة ، نفس أسماء المجال ولكن المنافذ المختلفة)
لا يمكن استدعاء JSON المذكورة في مواصفات JavaScript مباشرة عبر المجالات. للأمان ، يمكن أن يطلق على شظايا JS.
لذا لف JSON في جزء JS ، أي JSONP ، ثم طلبات المجال المتقاطع
بعد الربيع 4.1 ، يتم توفير طرق جديدة كمكالمات إلى JSONP
مثال:
requestmapping (value = "/list") recponsebody كائن عام getItemCatlist (سلسلة callback) {itemCatresult result = itemCatservice.getItemCatlist () ؛ if (stringUtils.isblank (callback)) {// النتيجة يجب تحويلها إلى نتيجة إرجاع السلسلة ؛ } // إذا لم تكن السلسلة فارغة ، فأنت بحاجة إلى دعم JSONP Call Spring4.1. MapPingJacksonValue MapPingJacksonValue = جديد MapPingJacksonValue (النتيجة) ؛ MapPingJacksonValue.setjsonpfunction (رد الاتصال) ؛ إرجاع mappingjacksonvalue ؛ }كما هو موضح في الصورة ، هذا هو JSONP
بعد ذلك ، طالما أنك بحاجة إلى الاتصال بـ JSONP ، يمكنك الاتصال بالبيانات عبر المجالات بعد حاجة إلى القليل من المعالجة.
لقد قدمت مثالًا لعرض JSONP على الصفحة:
(JS هو قبيح بعض الشيء. لقد ولدت في الخلفية ، ويتم ربت الأبطال في الواجهة الأمامية ~)
var menu = function () {return {getMenudata: function (json) {console.log (json) ؛ var data = json.data ؛ var html = "" ؛ لـ (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 = 'retropdown-submenu'>" ؛ html += "<span class = 'c-arrow c-toggler'> </span>" ؛ html += "</a>" ؛ html += "<ul class = 'retreddown-menu c-pull-right'>" ؛ لـ (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 = 'retropdown-submenu'>" ؛ html + = "<a href = '" + url + "'>" + name ؛ html += "<span class = 'c-arrow c-toggler'> </span>" ؛ html += "</a>" ؛ html += "<ul class = 'retreddown-menu c-pull-right'>" ؛ لـ (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: {console.log (e) ؛ }} ؛ } () ؛ $ (document) .Ready (function () {var serverurl = "http: // localhost: 8088/rest/menu/list" ؛ menu.getjsonp (serverurl ، "menu.getmenudata") ؛}) ؛الآثار الموضحة: