JSONP akan menyelesaikan masalah ini. JSONP adalah singkatan dari JSON dengan padding dalam bahasa Inggris dan merupakan protokol tidak resmi. Ini memungkinkan server untuk menghasilkan tag skrip mengembalikan nilai klien, dan mewujudkan akses situs melalui bentuk callback JavaScript. JSONP adalah injeksi tag skrip, menambahkan respons yang dikembalikan oleh server ke halaman adalah untuk mengimplementasikan fungsi tertentu.
Singkatnya, JSONP sendiri bukanlah hal yang rumit, ia melewati kebijakan homolog browser melalui tag scipt.
Saat ini, penerapan Jushi menjadi kurang dan kurang efektif. Banyak perusahaan internet akan menggunakan arsitektur terdistribusi di tahap selanjutnya.
Lalu ada masalah dengan menelepon JSON dengan nama domain yang berbeda di halaman
(Domain silang: nama domain yang berbeda, nama domain yang sama tetapi port yang berbeda)
JSON yang disebutkan dalam spesifikasi JavaScript tidak dapat dipanggil langsung di seluruh domain. Untuk keamanan, ia dapat menghubungi fragmen JS.
Jadi bungkus JSON menjadi fragmen JS, yaitu, JSONP, lalu permintaan silang domain
Setelah musim semi 4.1, metode baru disediakan sebagai panggilan ke JSONP
contoh:
@RequestMapping (value = "/list") @ResponseBody Objek publik getIteMcatList (string callback) {itemCatResult result = itemCatService.getIteMcatList (); if (stringutils.isblank (callback)) {// hasil perlu dikonversi menjadi hasil pengembalian string; } // Jika string tidak kosong, Anda perlu mendukung JSONP Call Spring4.1. MappingJackSonValue MappingJackSonValue = MappingjacksonValue baru (hasil); MappingjacksonValue.setjsonPfunction (callback); Return MappingjacksonValue; }Seperti yang ditunjukkan pada gambar, ini adalah JSONP
Kemudian, selama Anda perlu menelepon JSONP, Anda dapat memanggil data di seluruh domain setelah sedikit pemrosesan diperlukan.
Saya membuat contoh untuk menampilkan JSONP di halaman:
(JS agak jelek. Saya lahir di backend, dan para pahlawan di ujung depan ditepuk ~)
var menu = function () {return {getMenudata: function (json) {console.log (json); var data = json.data; var html = ""; untuk (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'>"; untuk (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 + "'>" + nama; html += "<span class = 'c-arrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'dropdown-menu c-pull-right'>"; untuk (var k = 0; k <node.length; k ++) {// debugger var name = node [k]; var last = name.split ("|"); html += "<li>"; html + = "<a href = '" + terakhir [0] + "'>" + terakhir [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) {// konsole.log (json); {console.log (e);}}}); }}; } (); $ (dokumen) .ready (function () {var serverUrl = "http: // localhost: 8088/rest/menu/list"; menu.getjsonp (serverUrl, "menu.getMenudata");});Efek yang ditunjukkan: