JSONP es para resolver este problema. JSONP es la abreviatura de JSON con relleno en inglés y es un protocolo no oficial. Permite que el servidor genere etiquetas de script de retorno del cliente y realice el acceso al sitio a través de la forma de devolución de llamada de JavaScript. JSONP es una inyección de etiqueta de script, agregando que la respuesta devuelta por el servidor a la página es implementar funciones específicas.
En resumen, JSONP en sí no es algo complicado, evita la política homóloga del navegador a través de la etiqueta SCIPT.
Hoy en día, la aplicación de Jushi se está volviendo cada vez menos efectiva. Muchas compañías de Internet utilizarán arquitecturas distribuidas en las etapas posteriores.
Luego hay un problema con llamar a JSON bajo diferentes nombres de dominio en la página
(Dominio cruzado: diferentes nombres de dominio, mismos nombres de dominio pero diferentes puertos)
El JSON mencionado en la especificación de JavaScript no puede llamarse directamente a través de dominios. Para la seguridad, puede llamar a JS Fragments.
Entonces envuelva a JSON en un fragmento JS, es decir, JSONP, luego solicitudes de dominio cruzado
Después de la primavera 4.1, se proporcionan nuevos métodos como llamadas a JSONP
ejemplo:
@RequestMapping (value = "/list") @ResponseBody Public Object getItemCatList (String Callback) {itemCatResult result = itemCatService.getItemCatList (); if (stringUtils.isblank (llamado)) {// El resultado debe convertirse en un resultado de retorno de cadena; } // Si la cadena no está vacía, debe admitir JSONP Call Spring4.1. MAPPINGJACKSONVALUE MAPPINGJACKSONVALUE = new MappingJacksonValue (resultado); MappingJacksonValue.SetJSONPFunction (devolución de llamada); return MappingjacksonValue; }Como se muestra en la imagen, este es JSONP
Luego, siempre que necesite llamar a JSONP, puede llamar a los datos a través de dominios después de que se requiera un pequeño procesamiento.
Hice un ejemplo para mostrar JSONP en la página:
(JS es un poco feo. Nací en el backend, y los héroes en la parte delantera están empalmados ~)
var menú = 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 = 'desplegable-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 nodo = sub [j] .i; html += "<li class = 'desplegable-submenu'>"; html + = "<a href = '" + url + "'>" + nombre; 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, stits: function (json) {// console.log (json);}, error: function (e) {if (if (if ({if ({"200" 200 ") {console.log (e);}}}); }}; } (); $ (documento) .Ready (function () {var serverUrl = "http: // localhost: 8088/REST/menú/list"; menú.getJsonp (serverurl, "menú.getMenudata");});Efectos mostrados: