JSONP is to solve this problem. JSONP is the abbreviation of JSON with Padding in English and is an unofficial protocol. It allows the server to generate script tags return value client, and realize site access through the form of javascript callback. JSONP is a script tag injection, adding the response returned by the server to the page is to implement specific functions.
In short, JSONP itself is not a complicated thing, it bypasses the browser's homologous policy through the scipt tag.
Nowadays, the application of Jushi is becoming less and less effective. Many Internet companies will use distributed architectures in the later stages.
Then there is a problem with calling json under different domain names on the page
(Cross-domain: different domain names, same domain names but different ports)
The json mentioned in the JavaScript specification cannot be called directly across domains. For security, it can call js fragments.
So wrap json into a js fragment, that is, jsonp, then cross-domain requests
After spring 4.1, new methods are provided as calls to jsonp
example:
@RequestMapping(value="/list") @ResponseBody public Object getItemCatList(String callback) { ItemCatResult result = itemCatService.getItemCatList(); if (StringUtils.isBlank(callback)) { //Result needs to be converted into a string return result; } //If the string is not empty, you need to support jsonp call spring4.1. MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result); mappingJacksonValue.setJsonpFunction(callback); return mappingJacksonValue; }As shown in the picture, this is jsonp
Then, as long as you need to call jsonp, you can call data across domains after a little processing is required.
I made an example to display jsonp on the page:
(JS is a bit ugly. I was born in the backend, and the heroes in the front end are patted~)
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(json); }, error: function(e){ if (e.status != "200") { console.log(e); } } }); } }; }();$(document).ready(function(){ var serverUrl = "http://localhost:8088/rest/menu/list"; Menu.getJSONP(serverUrl, "Menu.getMenuData");});Shown effects: