JSONP คือการแก้ปัญหานี้ JSONP เป็นตัวย่อของ JSON ที่มีช่องว่างภายในเป็นภาษาอังกฤษและเป็นโปรโตคอลที่ไม่เป็นทางการ อนุญาตให้เซิร์ฟเวอร์สร้างแท็กสคริปต์ส่งคืนไคลเอ็นต์ค่าและตระหนักถึงการเข้าถึงไซต์ผ่านรูปแบบของการเรียกกลับ JavaScript JSONP เป็นการฉีดแท็กสคริปต์การเพิ่มการตอบกลับที่ส่งคืนโดยเซิร์ฟเวอร์ไปยังหน้าคือการใช้ฟังก์ชั่นเฉพาะ
ในระยะสั้น JSONP นั้นไม่ใช่สิ่งที่ซับซ้อน แต่ผ่านนโยบายที่คล้ายคลึงกันของเบราว์เซอร์ผ่านแท็กสก็อต
ทุกวันนี้การประยุกต์ใช้ Jushi มีประสิทธิภาพน้อยลงเรื่อย ๆ บริษัท อินเทอร์เน็ตหลายแห่งจะใช้สถาปัตยกรรมแบบกระจายในระยะต่อมา
จากนั้นมีปัญหาในการโทรหา JSON ภายใต้ชื่อโดเมนที่แตกต่างกันในหน้า
(ข้ามโดเมน: ชื่อโดเมนที่แตกต่างกันชื่อโดเมนเดียวกัน แต่พอร์ตต่าง ๆ )
JSON ที่กล่าวถึงในข้อกำหนด JavaScript ไม่สามารถเรียกได้โดยตรงข้ามโดเมน เพื่อความปลอดภัยสามารถโทรหาชิ้นส่วน JS ได้
ดังนั้นห่อ JSON เป็นชิ้นส่วน JS นั่นคือ JSONP จากนั้นคำขอข้ามโดเมน
หลังจากฤดูใบไม้ผลิ 4.1 มีการจัดเตรียมวิธีการใหม่เป็น JSONP
ตัวอย่าง:
@RequestMapping (value = "/list") @ResponseBody วัตถุสาธารณะ getItemCatList (สตริงโทรกลับ) {itemCatResult result = itemCatservice.getItemCatList (); if (stringutils.isblank (การโทรกลับ)) {// ผลลัพธ์จะต้องถูกแปลงเป็นผลลัพธ์การส่งคืนสตริง; } // หากสตริงไม่ว่างคุณจะต้องรองรับ JSONP Call Spring4.1 MappingJacksonValue MappingJacksonValue = ใหม่ MappingJacksonValue (ผลลัพธ์); MappingJacksonValue.setjsonpfunction (การโทรกลับ); กลับมา MappingJacksonValue; -ดังที่แสดงในภาพนี่คือ JSONP
จากนั้นตราบใดที่คุณต้องการโทรหา JSONP คุณสามารถโทรหาข้อมูลข้ามโดเมนหลังจากการประมวลผลเล็กน้อย
ฉันทำตัวอย่างเพื่อแสดง JSONP บนหน้า:
(JS ค่อนข้างน่าเกลียดฉันเกิดในแบ็กเอนด์และฮีโร่ในส่วนหน้าจะถูกตบ ~)
var menu = function () {return {getMenudata: ฟังก์ชัน (json) {console.log (json); var data = json.data; var html = ""; สำหรับ (var i = 0; i <data.length; i ++) {var url = data [i] .u; ชื่อ var = 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'>"; สำหรับ (var j = 0; j <sub.length; j ++) {var url = sub [j] .u; ชื่อ var = sub [j] .n; var node = sub [j] .i; html += "<li class = 'dropdown-submenu'>"; html + = "<a href = '" + url + "'>" + ชื่อ; html += "<span class = 'c-arrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'dropdown-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 = '" + สุดท้าย [0] + "'>" + สุดท้าย [1] + "</a>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } $ ("#itemcatmenu"). html (html); }, getJSONP: function (serverUrl, callbackfun) {$ .ajax ({type: "get", url: serverUrl, ข้อมูล: "jsonp", jsonp: "callback", jsonpcallback: callbackfun, ความสำเร็จ: ฟังก์ชั่น (json) {// {console.log (e);}}}); }}; } (); $ (เอกสาร) .ready (function () {var serverUrl = "http: // localhost: 8088/rest/menu/list"; menu.getjsonp (ServerUrl, "menu.getMenudata");});ผลกระทบที่แสดง: